Executing cypress tests with tags in nrwl nx workspace: A simple guide

Currently, I am working within a nrwl nx workspace where I have set up a cypress BDD cucumber project. My goal is to run cypress tests based on tags using nrwl.

In the past, I would typically use the "cypress-tags" command to achieve this. For example: 

"cypress run --env TAGS='@smoke' --browser chrome
"

I attempted to apply the same concept with an nx command as follows: nx e2e myProject-e2e --tags=@reg

Unfortunately, the nx project seems to be recognizing all test cases in cypress without taking into account the ones tagged with "@reg". Is there anyone who can provide guidance on running cypress tests based on tags in nrwl?

typescriptcypresspipelinenrwl-nx

Answer №1

I encountered a similar problem and found a solution by utilizing the ENV object within the NX configuration:

To address this, I included the tags in the project.json setup file. For instance, I configured the smoke test and regression test filtering based on tags:

"smoke": {
  "executor": "@nrwl/cypress:cypress",
  "options": {
    "cypressConfig": "apps/explore-e2e/cypress.json",
    "baseUrl": "<BASE_URL>",
    "env": {
      "TAGS": "@smoke"
    }
  },
  "configurations": {
    "staging": {
      "baseUrl": "<STG_URL>"
    },
    "production": {
      "baseUrl": "<PROD_URL>"
    }
  }
},
"regression": {
  "executor": "@nrwl/cypress:cypress",
  "options": {
    "cypressConfig": "apps/explore-e2e/cypress.json",
    "baseUrl": "<BASE_URL>",
    "env": {
      "TAGS": "@regression"
    }
  },
  "configurations": {
    "staging": {
      "baseUrl": "<STG_URL>"
    },
    "production": {
      "baseUrl": "<PROD_URL>"
    }
  }
}

By doing so, you can now label your scenarios and execute them using:

nx e2e myProject-e2e:smoke --TAGS=@smoke

(I personally use: yarn nx run instead)

Answer №2

In NX, take advantage of the "configurations" functionality to incorporate multiple tags into your designs.

Answer №3

If you want to streamline your test runs in Cypress, consider setting specific tags in the env section of the cypress.config.ts file. By specifying tags, you can easily filter out tests when running them through the Cypress runner. Here's an example:

module.exports = defineConfig({
 env: { 
    tsConfig: 'tsConfig.json',
    tags: '@exampleTag',
 },
 <other configurations go here>

You can also apply this filtering method when running tests from the command line using Nx:

nx e2e myproject-e2e --env.tags=@exampleTag

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Use Typescript in combination with React/Redux to showcase a dynamic table on the

Looking to create a React TypeScript Redux application that showcases a table using an API endpoint provided at https://example.com/users The goal is to construct a table with 4 columns: Name, Email, City, and Company, utilizing the API response to popula ...

javascriptreactjstypescriptreduxjestjs

What is the reason behind VS Code not showing an error when executing the command line tsc shows an error message?

Deliberately introducing a typo in my code results in an error. Here is the corrected code: declare const State: TwineState; If I remove the last character and then run tsc on the command line, it throws this error: tsc/prod.spec.ts:7:22 - error TS2304: ...

typescriptvisual-studio-codeeslinttypescript-eslint

The dropdown cannot be disabled because it is being passed as an input parameter

We are currently utilizing PrimeNG along with Angular 15. Scenarios: According to the requirements, we need the ability to disable the PrimeNG dropdown control based on a selection. Problem: The disabled property of <p.dropdown> is not functioning ...

angulartypescript

Toggle the visibility of certain side menu items based on user authentication status

Using Angular 2, I created a website where I need to enable or disable certain sidebar components based on user login data. The user's login data is stored in JSON and a token is passed via Qwebchannel for authentication on localhost. My goal is to dy ...

node.jsangulartypescriptnpm

Acquire keys from a different residence

Currently, I am working on a React component that accepts data through props and I aim to implement safe property access. I have experimented with the following: type Props = { items?: any[]; // uncertain about using type "any" bindValue?: keyof Prop ...

reactjstypescript

Trigger the Material UI DatePicker to open upon clicking the input field

I have a component that is not receiving the onClick event. I understand that I need to pass a prop with open as a boolean value, but I'm struggling to find a way to trigger it when clicking on MuiDatePicker. Here is an image to show where I want to ...

javascripttypescriptmaterial-ui

Error encountered with tsc-generated .d.ts files stating "Namespace 'Jimp' not found"

Currently, I am in the process of developing an NPM package, and within my codebase lies a specific class that looks like this: import { MIME_PNG } from 'jimp'; import { IDimensions } from './spritesheet'; /** * Representing a single ...

node.jstypescriptnamespacestsc

Is there a way to programmatically add a timestamp to a form in Angular6?

Is there a way to automatically populate new forms with the current datetime value? this.editForm.patchValue({ id: chatRoom.id, creationDate: chatRoom.creationDate != null ? chatRoom.creationDate.format(DATE_TIME_FORMAT) : null, roo ...

angulartypescript

Achieve flattening of types using recursion in TypeScript with the help of const

I am presenting the TypeScript code below: type Item = { key: number; value: string; items?: readonly Item[]; } const items = [ { key: 1, value: 'foo', items: [{ key: 3, value: 'baz' }] }, { key: 2, value: 'bar ...

typescriptrecursion

New Requirement for Angular Service: Subclass Constructor Must Be Provided or Unable to Resolve all Parameters for ClassName (?)

During a recent project, I encountered an issue while working on several services that all extend a base Service class. The base class requires a constructor parameter of HttpClient. When setting up the subclass with autocomplete, I noticed that their con ...

angulartypescript

Creating nested return types: A guide to defining function return types within a Typescript class

My large classes contain functions that return complex objects which I am looking to refactor. class BigClass { ... getReferenceInfo(word: string): { isInReferenceList:boolean, referenceLabels:string[] } { ... } } I am considering somethi ...

typescript

There seems to be an issue with a potentially null object in an Angular project while trying to view a PDF file

IDENTIFY THE ERROR: printContents = document.getElementById('print').innerHTML.toString(); ON LINE 4: print(): void { let printContents!: string; let popupWin!: any; printContents = document.getElementById('print').innerHTM ...

javascriptangulartypescriptangular11

Locate an element within an array of strings to refine the contents of a flatlist

Currently, I have a FlatList that I am attempting to filter using multiple inputs from dropdown selectors. Here is the code snippet for my FlatList component: <FlatList style={styles.list} data={data.filter(filteredUsers)} ...

javascriptarraystypescriptfilteringreact-native-flatlist

Access the plugin object from a Vue.js 2 component using typescript

I devised a plugin object to handle the regular expressions used in my application in a more global manner. Here's an example of how it looks: import Vue from "vue"; Vue.prototype.$regex = { //isEmail function implementation goes here } ...

typescriptvue.jsvuejs2

Steps to allow an ng-model to accept a variety of input values

Imagine having an input box structured like this <ion-input [(ngModel)]="Gender" type="text" placeholder="Gender Type"></ion-input> <ion-input [(ngModel)]="hairCat" type="text" placeholder="Hair Type"></ion-input> Now, let's ...

angulartypescriptionic2

What is the best method for calculating the total of a column field within an array in Angular 9.1.9?

I am using Angular 9.1.9 and Html to work with a nested array field in order to calculate the total sum and display it in a row. Within my array list ('adherant'), I am aiming to sum up a specific column's values ({{ Total Amount }}) and pr ...

javascripthtmlangulartypescript

Fix the TypeScript issue encountered during a CDK upgrade process

After upgrading to version 2.0 of CDK and running npm install, I encountered an issue with the code line Name: 'application-name'. const nonplclAppNames = configs['nonplclAppNames'].split(','); let nonplclAppNamesMatchingState ...

typescriptaws-cdk

Cypress - simulate multiple responses for watchPosition stub

I have a small VueJs app where clicking on a button triggers the watchPosition function from the Geolocation API to retrieve the user's position and perform some calculations with it. Now, I want to test this functionality using Cypress testing. To ...

javascriptgeolocationcypresse2e-testingstub

The 'innerText' property is not found in the 'Element' type

Currently, I am working with Typescript and Puppeteer. My goal is to extract the innerText from an element. const data = await page.$eval(selector, node => node.innerText); However, I encountered an error: The property 'innerText' is not ...

javascripttypescriptpuppeteer

Enhanced VS code typings for Nuxt injected properties

My approach to injecting properties into the Nuxt TS context is as follows: ~/plugins/services.ts import Vue from 'vue'; import { errorService } from '~/services/error'; import { Plugin } from '@nuxt/types' const services: Pl ...

typescriptvue.jsvisual-studio-codenuxt.jsvue-property-decorator