How To Configure cypress-grep plugin v3.1.0 for Cypress v11.01 (TS not JS)

[Zujaj]

Thanks @bahmutov for creating the @cypress-grep plugin. It's really cool and awesome, I saw the videos and appreciate your efforts. Here's the scenario:

Cypress Version

11.0.1

Node Version

16.16.0

Package Manager

Yarn version 1.22.19

Operating System

Windows 10 Pro Version 21H2

I've created a cypress_grep_test_project to practice this plugin(version ^3.1.0) and used the sample spec files that Cypress provides during the first-time configuration. Just changed some files from "cy.js" to "cy.ts." I aim to use this plugin and test it out for Continuous Integration.

According to the Cypress docs, the plugins folder no longer exists. Following the current documentation of the plugin, the registerCypressGrep method isn't available anymore.

I've added the @cypress/grep to the ts.config file.

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "commonjs",
    "types": [
      "cypress",
      "@cypress/grep" // Added this to prevent tags issue
    ],
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

In the todo.cy.ts file, I inserted the { tags: 'smoke' } to the describe block as shown in below snippet.

describe('example to-do app', { tags: 'smoke' }, () => {
  beforeEach(() => {
    cy.visit('https://example.cypress.io/todo')
  })

Now I don't know what to do next, can you please help me with this?

// cypress.config.ts
import { defineConfig } from 'cypress'

export default defineConfig({
  e2e: {
    video: false,
    setupNodeEvents(on, config) {
      // implement node event listeners here
    // What next?
    },
  }
})

[Zujaj]

Thanks @mahadazad for your collaboration.

Although this is just a workaround, I hope we'll get a proper solution to this problem very soon.

1. Navigate to the cypress\support\e2e.ts file.

2. Add the below code with @ts-ignore to ignore typescript compiler warnings.

// e2e.ts file

import './commands'

// @ts-ignore
import registerCypressGrep from '@cypress/grep' 

registerCypressGrep()

3. Run the command npx cypress run --env grepTags=smoke on the terminal.

[T-e-j-k-u-m-a-r]

Hi @Zujaj : I tried the same steps suggested by you and getting below error and all the specs are getting executed:

cypress.config.js file:

spec file:

e2e.ts file:

Execution report:
Its should have executed only the 1st spec file which has the smoke tag: SE-2949-TC1, But instead it executed all the 4 spec files inside the login module.

Can you please assist?

[Zujaj]

Hi @T-e-j-k-u-m-a-r

I don't think you've followed the steps correctly. The e2e image you sent refers to your cypress test SE-2949_TC1.cy.ts file. I don't know what you've coded in the e2e.ts. I would suggest you revisit the solution by cloning the cypress_grep_test_project repo on your machine & compare the files side by side.

PS: Please share the code rather than the images.

[Zujaj]

You can also read the Typescript support section added to the grep documentation.

[T-e-j-k-u-m-a-r]

Error message: