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

Encountering issues with @typescript-eslint/typescript-estree due to using a non-officially supported version of TypeScript after updating Nuxt

After upgrading Nuxt in my project using the command npx nuxi upgrade, I encountered an issue while running eslint .. The output displayed a warning regarding the TypeScript version: ============= WARNING: You are currently running a version of TypeScript ...

typescriptnpmnuxt.jseslint

Interface circular dependency is a phenomenon where two or more interfaces

In my MongoDB setup, I have created an interface that defines a schema using mongoose as an ODM. import mongoose, { model, Schema, Model, Document } from "mongoose"; import { IUser } from "./user"; import { IPost } from "./posts&q ...

typescriptmongodbmongoosenext.js

Sinon Stub generates varying values with each invocation

I'm pretty new to TypeScript and JavaScript, but I've managed to create a functioning VScode extension that I'm really happy with. However, I'm running into some issues with my Mocha tests. Here's a snippet of the code I'm str ...

javascripttypescriptmocha.jssinon

Creating a fresh type in Typescript based on object keys that are already defined within an interface

Here is the scenario I am currently dealing with: interface ListField { code: number; message: string; } interface List { [key: string]: ListField; } export const allCodes: List = { FIRST: { code: 1, message: 'message 1', }, ...

typescripttypes

Leveraging the 'this' keyword in TypeScript

In my Javascript class, I used the 'this' keyword as shown below: if (this[this.props.steps[i].stepId].sendState !== undefined) { this.setState({ allStates: { ...this.state.allStates, [thi ...

javascriptreactjstypescriptmaterial-ui

Angular: The type AbstractControl<any> cannot be assigned to type FormControl

I am working with a child component that includes an input tag <input [formControl]="control"> component.ts file @Input() control: FormControl; In the parent component, I am using it as follows: <app-input [control]="f['email ...

angulartypescriptform-control

Developing a Typescript "Map" type using numerical enumerations

In my Typescript project, I came across the need to create record types with numeric enums: enum AxisLabel { X = 0, Y = 1 } export const labelLookup: Record<AxisLabel, string> = { [AxisLabel.X]: "X axis", [AxisLabel.Y]: "Y Axis" }; However, I w ...

typescriptenums

Refresh Material-Ui's Selection Options

Is there a way to properly re-render the <option> </option> inside a Material UI select component? My goal is to transfer data from one object array to another using the Material UI select feature. {transferData.map(data => ( <option ...

javascriptreactjstypescriptmaterial-uimap-function

Dealing with Uncaught Promises in Angular 2 while injecting a service

I followed the instructions in the official tutorial to start a project, but I'm encountering an issue with injecting services into my Angular2 app. Everything was working fine until I added a service. Here are the files : app.component.ts import ...

angulartypescriptes6-promise

I need help creating a functional Component in react and utilizing destructive assignment. I attempted to write some code but it doesn't seem to be functioning properly

Can someone help me convert this into destructive assignment? I keep getting the error message Binding element 'onClickBackDrop' implicitly has an 'any' type.ts(7031) I'm struggling to figure out where I went wrong import React ...

reactjstypescriptreact-functional-component

Could you tell me the kind of theme used in Material-UI version 5?

I've decided to switch my project over to MUI version 5 and embrace the use of emotion CSS. It's come to my attention that I need to incorporate the theme property, but now TypeScript is prompting me for a type definition for it. The current code ...

reactjstypescriptmaterial-ui

What is the process for generating an array of objects using JavaScript?

I am struggling to create an array of objects using JavaScript and facing errors with new lines added where I need to split the messages and collect row numbers. The row numbers should be comma-separated if it is a repetitive error message. I found a solu ...

javascriptjsonregextypescriptangular6

Differing preferences for indentation styles can lead to conflicting prett

My eslint setup is as follows: { "env": { "es2020": true, "jest": true }, "extends": [ "eslint:recommended", "plugin:react/recommended", "plugin:import/recommended&q ...

typescriptvisual-studio-codeeslintprettier

Angular 10 introduces a new approach to handling concurrency called "forkJoin"

Here is the code I have: async getBranchDetails() ----component method { let banks = this.bankDataService.getBanks(); let branchTypes = this.branchDataService.getBranchTypes(); forkJoin([banks,branchTypes]).subscribe(results => { ...

angulartypescriptpromiserxjs

Storing the state of DevExtreme DataGrid in Angular

Currently, I have integrated the DevExtreme DataGrid widget into my Angular application. Here is a snippet of how my DataGrid is configured: <dx-data-grid id="gridContainer" [dataSource]="employees" [allowColumnReordering]="true" [allo ...

javascriptangulartypescriptdevexpressdevextreme

What is the process for extracting the paths of component files from an Angular ngModule file?

I've been on the lookout for automation options to streamline the process of refactoring an Angular application, as doing it manually can be quite tedious. We're working on reducing our app's shared module by extracting components/directive ...

angulartypescriptwebpackangular-clidependency-graph

Best Practices for Organizing Imports in Typescript to Prevent Declaration Conflicts

When working with TypeScript, errors will be properly triggered if trying to execute the following: import * as path from "path" let path = path.join("a", "b", "c") The reason for this error is that it causes a conflict with the local declaration of &ap ...

typescript

An unexpected error occurred while running ng lint in an Angular project

I've encountered an issue while trying to run ng lint on my Angular project. After migrating from TSLint to ESLint, I'm getting the following error message when running ng lint: An unhandled exception occurred: Invalid lint configuration. Nothing ...

angulartypescripteslint

How can I utilize Angular services to transfer a count value to the Component?

I've been working on creating a coin counter for my application by developing a service specifically for counting coins. However, when I tried to use this service in one of my components where the count function is triggered, I encountered some diffic ...

angulartypescriptangular-services

Issue with triggering blur event in Internet Explorer while using Angular 2+

The issue discussed in the Blur not working - Angular 2 thread is relevant here. I have a custom select shared component and I am attempting to implement a blur event to close it when the component loses focus. // HTML <div (blur)="closeDropDown()" t ...

javascriptangulartypescriptinternet-explorerblur