thebrainfamily / cypress-cucumber-example

Example of using Cypress with Cucumber

cypress-cucumber-example

Initial example of using Cypress with Cucumber.

There are examples that are part of a Continuous Integration build in the main repo, that also showcase more advanced usage, please refer there as well - https://github.com/TheBrainFamily/cypress-cucumber-preprocessor/tree/master/cypress

Run example tests

npm install
npm test

Tags usage

Tagging tests

You can use tags to select which test should run using cucumber's tag expressions. Keep in mind we are using newer syntax, eg. 'not @foo and (@bar or @zap)'. In order to initialize tests using tags you will have to run cypress and pass TAGS environment variable.

To make things faster and skip cypress opening a browser for every feature file (taking a couple seconds for each one), even the ones we want ignored, we use our own cypress-tags wrapper. It passes all the arguments to cypress, so use it the same way you would use cypress CLI. The only difference is it will first filter out the files we don't care about, based on the tags provided.

Examples:

There are a few tagged tests in these files:

Facebook.feature

@feature-tag
Feature: The Facebook

  I want to open a social network page

  @tag-to-include
  Scenario: Opening a social network page
    Given I open Facebook page
    Then I see "Facebook" in the title

  @another-tag-to-include @some-other-tag
  Scenario: Different kind of opening
    Given I kinda open Facebook page
    Then I am very happy

GitHub.feature

@feature-tag @github-tag
Feature: The GitHub

  I want to tweet things

  @tag-to-include
  Scenario: Opening GitHub
    Given I open GitHub page
    Then I see "GitHub" in the title

  @another-tag-to-include
  Scenario: Opening GitHub again
    Given I open GitHub page
    Then I see "GitHub" in the title

Simple Example

Run ./node_modules/.bin/cypress-tags run -e TAGS='@feature-tag' in this repo. As both Facebook.feature and GitHub.feature have @feature-tag above the feature name, and Google.feature has no tags, the result should be:

    Spec                                                Tests  Passing  Failing  Pending  Skipped
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ ✔ socialNetworks/Facebook.feature           00:04        2        2        -        -        - │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ ✔ socialNetworks/GitHub.feature            00:05        2        2        -        -        - │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
  All specs passed!                           00:09        4        4        -        -        -

usage of not

Run ./node_modules/.bin/cypress-tags run -e TAGS='not @github-tag' in this repo. Facebook.feature and Google.feature will run, as only GitHub.feature has the unwanted tag. The result should be:

      Spec                                                Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔ socialNetworks/Facebook.feature           00:05        2        2        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    All specs passed!                           00:05        2        2        -        -        -

usage of and

Run ./node_modules/.bin/cypress-tags run -e TAGS='@another-tag-to-include and @some-other-tag' in this repo. There is only one scenario that has both the tags, in Facebook.feature. The result should be:

     Spec                                                Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔ socialNetworks/Facebook.feature           00:03        1        1        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
    All specs passed!                           00:03        1        1        -        -        -

combinations

Keep in mind that order matters and use parentheses wisely. The following commands will yield different results:
./node_modules/.bin/cypress-tags run -e TAGS='@tag-to-include or @another-tag-to-include and not @github-tag'

./node_modules/.bin/cypress-tags run -e TAGS='(@tag-to-include or @another-tag-to-include) and not @github-tag'

The first one will include scenario tagged @tag-to-include from the GitHub.feature, while the second one will skip all scenarios from it.

Smart tagging

Start your tests without setting any tags. And then put a @focus on the scenario (or scenarios) you want to focus on while development or bug fixing.

For example:

Feature: Smart Tagging

  As a cucumber cypress plugin which handles Tags
  I want to allow people to select tests to run if focused
  So they can work more efficiently and have a shorter feedback loop

  Scenario: This scenario should not run if @focus is on another scenario
    Then this unfocused scenario should not run

  @focus
  Scenario: This scenario is focused and should run
    Then this focused scenario should run

  @this-tag-affects-nothing
  Scenario: This scenario should also not run
    Then this unfocused scenario should not run

  @focus
  Scenario: This scenario is also focused and also should run
    Then this focused scenario should run

Scoped hooks:

Unfortunately, running all tests through GUI causes an unexpected behavior with hooks:

TheBrainFamily/cypress-cucumber-preprocessor#139 which is an acknowledged bug in cypress itself:

cypress-io/cypress#3323

Our advice is to not use the "run all" in the GUI - which would be slow once you have enough .feature files anyway. Running through cypress run (for CI use) works as described.

cypress-cucumber-example's Issues

Can not work well on windows 10

Error: Cannot find module 'E:democypress-cucumber-example
ode_modulescypress-cucumber-preprocessorlib/createTestsFromFeature' from 'E:\demo\cypress-cucumber-example\cypress\integration\common'

Unable to re-execute only a scenario

If you have multiple scenarios in a feature, you will have to execute all scenario instead of just one scenario in the dashboard. That is probably most common usage during debugging to execute a single scenario rather than the whole feature. Is there a way to support that?

BeforeFeature/Scenario/Step hooks

Hey, seems I can't find these for the preprocessor, might be me who can't search properly.

Basically I would like to be able to do some tracability for my tests when they are running against the backend, where I would like to attach the feature name and scenario name in the headers of cy.request (the BeforeStep is mostly for completeness).

So I'd like to be able to do:

let featureName: string = ""
let scenarioName: string = ""

BeforeFeature((event, callback) => {
    featureName = event.getPayloadItem('feature')
})

// similar for Scenario

Cypress.Commands.overwrite('request', function(originalFn, ...restParameters) {
    if (restParameters.length === 1) {
        restParameters[0].headers['x-correlation-id'] = `accept-test-${featureName}-${scenarioName}`
    }

    return originalFn.apply(this, restParameters)
})

Uncaught TypeError: (0 , _steps.Before) is not a function

Cypress: 3.8.1
cypress-cucumber-preprocessor: 1.11.0

Google.Feature's Before() produces this error.

`
import { Given, Then, Before } from "cypress-cucumber-preprocessor/steps";

const url = "https://google.com";

let myBeforeCount = 0;

// This verifies that the hooks work with bundling feature
// badeball/cypress-cucumber-preprocessor#234
Before(() => {
expect(myBeforeCount).to.be.lessThan(2);
myBeforeCount += 1;
});

`

Solution: Is to update cypress-cucumber-preprocessor to version 1.16.2 in package.json.

Writing Cucumber scenario including datable

Before everything, thank you Łukasz for your work! It's amazing 🥇

I was just wondering if I could use scenario including a Datatable, like this for example:

The scenario

Scenario: Writing scenario with datatable
    Given a table step
      | Cucumber     | Cucumis sativus |
      | Burr Gherkin | Cucumis anguria |

The step definition

given(`a table step`, function(table) {
    const expected = [
        ['Cucumber', 'Cucumis sativus'],
        ['Burr Gherkin', 'Cucumis anguria']
    ]
    assert.deepEqual(table, expected)
})

But when I do that Cypress displays an AssertionError :

expected undefined to deeply equal [ Array(2) ]

table seems to be undefined. Did I do something wrong?

unable to skip test scenarios with Cypress/Cucumber implementation

I'm new to this so bear with me.

I'm unable to skip test scenarios from feature files with an @Skip tag. The console output is TypeError: this.skip is not a function

OS: Mac OS Catalina (UTD)
Test Framework: Cypress with Cucumber Preprocessor
Browser: Chrome
cucumber: "6.0.5",
cypress: "4.7.0",
cypress-commands: "^1.1.0",
cypress-cucumber-preprocessor: "^2.4.0",
mocha": "^7.2.0"

Please let me know of any more information you would like.

zsh error on cypress run

When I run cypress run --spec **/*.features I get

zsh: no matches found: **/*.features

gherkin and when step

hi
it seems missing "when" in alls steps.
why ?

Request: Add Scenario outline implementation

Hello,

From what I have seen in the repo Scenario Outlines are now handled by cypress-cucumber.
Althought I am struggling finding the syntax for the variables in the case of a Scenario Outline inplemented in Cypress.
Anyone could add a working example to the repository ?

Thank you :)

Question: Can I use the all.features and -e TAGS ?

Really appreciate all the work that went into this plugin - a pleasure to use and write tests with!

I have now bumped into a situation that I need to segment groups of tests. I am currently relying on a top level all.features to leverage not spinning up separate chrome instances, but I also need to skip a few of the features.

Is there a recommended way of doing that?

cypress-tags doesnt work with tags across multiple files using OR operator

Bug Report:

I have 2 files in integration:

• 1.feature - has tag: @1
• 2.feature - has tag: @2

I run command:

• npx cypress-tags run -e TAGS='@1 or @2'

You would expect that to output: "Found 2 - path xyz" and execute the 2 feature files, however it stops at the first tag "@1" and doesnt do anything with @2.

I think theres a regression in how its handling this scenario, and you havent made an example with it thus didnt discover the bug.

Please assess when you can!
Regards.

Debug code without cypress open

Can I stop the code executing by break point at some row into *.steps.ts using run and debug mode into VSCode?

At the moment code execute till the end of test.
My launch.json

    "version": "0.2.0",
    "configurations": [
        {
            "type": "node-terminal",
            "request": "launch",
            "name": "CY-DEBUG",
            "skipFiles": ["<node_internals>/**"],
            "command": "./node_modules/.bin/cypress-tags run -e TAGS='@debug'",
            "env": {
                "SHA":"46ef8ca8788d6e9d97c8d673857e964681df1895",
                "BUILD_ID":"2848972426"
            }
        }
    ]
}

Show scenario steps (given, when then etc) in CI server for console output

Why don't we have it yet? This would make life more easier especially debugging where exactly (step) the test failed.

Scoped hooks aren't working in demo app

It appears scoped hooks aren't working in the demo app. When you run all tests, the before hook that states it only runs during the Google tests is run during all tests.

Google test suite

Facebook test suite

repro steps: clone the demo app, run cypress, and run all tests.

I was having issues with scoped step definitions in a project and I wanted to make sure it wasn't a weird configuration on my end. I'm wondering if this is a bug with scoped step definitions and if I should file an issue against the main repo.

Thanks

Unable to skip specific scenarios

I am unable to skip scenarios that are tagged within a feature. I am able to skip entire features though. Here is the example of my issue.

Script from package.json:
"doit:prod": "./node_modules/.bin/cypress-tags run -e TAGS='@feature-tag and not @production-only'"

Example:

@feature-tag
Feature:Example Login Page 

  Scenario: Validate Login Page Components
    Given I visit the Example homepage
    Then I validate username field on Example login page
    Then I validate password field on Example login page
    Then I validate login button on Example login page
    Then I validate forgot password on Example login page

@production-only
  Scenario: Login With Valid Credentials on Example Homepage
    Given I visit the Example homepage
    When I type valid username
    And I type valid password
    Then I expect to see "Example" as user on Example homepage

Expected Result:
I expect cypress to skip the Login With Valid Credentials on Example Homepage scenario.

Actual Result:
Cypress is running both tests.

I have also attempted just trying to skip the scenario without the tag on the feature and just implementing it on the scenario only and that did not work either.

"doit:prod": "./node_modules/.bin/cypress-tags run -e TAGS='not @production-only'",

Getting execution issue

I have two feature file one is login and another one is creation, once login feature file is completed before starting the next feature file application getting its logged out

Scenario Outlines as one "it"

I am struggling with cypress' insistence on tearing the world down between tests. With protractor, we did not need to do this. Not your issue, but...

Scenario outlines are especially painful as invoking "background" ( log in and navigate to where I need to be) on each example becomes very long running. I'd like to see an option where the scenario outlines could be "rendered" as one test rather than "n" tests.

while running scenario with specific tag others are marked as pending.

This feature file has two tests marked with tags @smoke and @regression
Google.feature

Feature: The Facebook

  I want to open a social network page
  
  @smoke
  Scenario: fhgfh a social network page
    Given I open Google page
    Then I see "Google" in the title

  @regression
  Scenario:sd a social network page
    Given I open Google page
    Then I see "Google" in the title

I want to scenario only with tag @smoke so using command npx cypress-tags run -e TAGS='@smoke'
this command runs the desired scenario but marks others as pending. Example of the result shown in the below image
https://ibb.co/CPfqzLv

How to avoid the not executed scenario "marked as pending"?

Cucumber World constructor

We are using your implementation and are quite happy but for our tests we need scenario isolated context.(like https://github.com/cucumber/cucumber-js/blob/master/docs/support_files/world.md ) Do you plan to support it or know an way to make this happen ?
thx thomas

After methods are not being called when a scenario fails

Whenever a scenario fails the After() method does not get called.

I'm running the following versions.

"cypress-cucumber-preprocessor": "2.5.0",
"@cypress/webpack-preprocessor": "5.4.1",
"cypress": "4.9.0",

Running cypress-tag command as a script behaves different

Hi,
So, I cloned the repo, executed it successfully and tried the commands as mentioned

C:\Development\cypress-cucumber-example-master> ./node_modules/.bin/cypress-tags run -e TAGS='@feature-tag'

This gives me the expected result.

====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped  
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ √  socialNetworks\Facebook.feature          00:04        2        2        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ √  socialNetworks\Twitter.feature           00:05        2        2        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    √  All specs passed!                        00:10        4        4        -        -        -  

Now, if I add a script into the package.json such as

"scripts": {
  "test": "cypress run --spec \"**/*.feature\"",
  "test:all": "cypress run --spec \"**/*.features\"",
  "test:tag": "./node_modules/.bin/cypress-tags run -e TAGS='@feature-tag'"
}

and then execute this script, it looks into all the feature files, but doesn't execute any scenario.

PS C:\Development\cypress-cucumber-example-master> npm run test:tag

> [email protected] test:tag C:\Development\cypress-cucumber-example-master
> cypress-tags run -e TAGS='@feature-tag'



====================================================================================================

  (Run Starting)

{...}

====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped  
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ √  All.features                               3ms        -        -        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ √  news\Google.feature                        3ms        -        -        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ √  socialNetworks\Facebook.feature            1ms        -        -        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ √  socialNetworks\Twitter.feature             1ms        -        -        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    √  All specs passed!                          8ms        -        -        -        -        -  

So I wonder if that's the reason there was no a script as part of this repo in the first place, but I don't really understand this different behavior.

I'm pretty new to cypress and nodejs, so my apologies if this is a basic question, but I haven't been able to find an answer so far. If there's any help, I'm on Windows 10.

Feature Request: Generate test files.

Been playing with cucumber in python, and the frameworks (behave, pytest-bdd) all appear to ship with spec file generators based on the feature files. Would be something to maybe consider?

https://slushjs.github.io/#/

Provides some handy tools for generating?

Cucumber Given When Then are not printed to the console output

Cucumber Given When Then are not printed to the console output after upgrade:
Version used:
"cypress": "^3.1.0",
"cypress-cucumber-preprocessor": "^1.6.0",

Parallel Execution

Hi,

Is there any way available which I can use to run cucumber cypress test parallelly.

Thanks

Running All.features fails to run all features

I tried to run All.features right after npm install from this example repository and it looks like no tests are getting executed. Is there anything I am doing wrong?

~/D/c/cypress-cucumber-example> npm run test:all                                                                                                    master!

> [email protected] test:all /Users/<***>/Desktop/cypress/cypress-cucumber-example
> cypress run --spec "**/*.features"


====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:    3.7.0                                                                              │
  │ Browser:    Electron 73 (headless)                                                             │
  │ Specs:      1 found (All.features)                                                             │
  │ Searched:   **/*.features                                                                      │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────

  Running:  All.features                                                                    (1 of 1)
Browserslist: caniuse-lite is outdated. Please run next command `npm update`


  0 passing (1ms)


  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        0                                                                                │
  │ Passing:      0                                                                                │
  │ Failing:      0                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  0                                                                                │
  │ Video:        true                                                                             │
  │ Duration:     0 seconds                                                                        │
  │ Spec Ran:     All.features                                                                     │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


  (Video)

  -  Started processing:  Compressing to 32 CRF
  -  Finished processing: /Users/<***>/Desktop/cypress/cypress-cucumber-examp    (0 seconds)
                          le/cypress/videos/All.features.mp4


====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  All.features                               2ms        -        -        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✔  All specs passed!                          2ms        -        -        -        -        -

Unable to use cy.server() with Step definition syntax

When I try to run cy.server() in order to mock http requests that are executed as part of the tests, I get the following error:

Uncaught CypressError: Cannot call "cy.server()" outside a running test.....

I don't know how to get this to work. This is my code:

import { Given, Then } from 'cypress-cucumber-preprocessor/steps'

beforeEach(() => {
  cy.server()

  cy.route({
    method: 'GET',
    url: '/',
    response: []
  })
})

const url = 'http://localhost:8080'

Given('I click the big button', () => {
  cy.visit(url)
  cy.get('.btn').click()
})

Then('I can get the MOTD', (title) => {
  cy.title().should('include', title)
})

multiple features execution fails

When I execute both facebook.feature and google.feature with cypress open, facebook.feature passes but google.feature fails with url visit with wrong url. Instead of https//www.google.com I see https://www.google.com/__/#/tests/__all.

When I try recording in dashboard (node_modules/cypress/bin/cypress run --record), it is stuck at the beginning of second feature: google.feature.

When I only execute with one feature, it is working as expected.

Not compatible with the latest Cypress and Cucumber Preprocessor versions

I have updated the dependency as follows by cloning this repository and tried to run the tests. I have also open the Cypress and migrated the config and other files to proceed further.

  "dependencies": {
    "cypress": "^12.0.2",
    "cypress-cucumber-preprocessor": "^4.3.1"
  }

But ended up with the getting the below errors.

> [email protected] test
> cypress run --spec "**/*.feature"

Warning: We failed to trash the existing run results.

This error will not alter the exit code.

Error: spawn Unknown system error -86
    at ChildProcess.spawn (node:internal/child_process:413:11)
    at spawn (node:child_process:709:9)
    at execFile (node:child_process:336:17)
    at node:child_process:243:21
    at node:electron/js2c/asar_bundle:5:3131
    at s.exports (<embedded>:1372:1011480)
    at <embedded>:1372:1019740
    at <embedded>:1358:431521
    at new Promise (<anonymous>)
    at r (<embedded>:1358:431502)
    at p (<embedded>:1372:1019248)
    at <embedded>:2837:406870
    at tryCatcher (/Library/Caches/Cypress/12.0.2/Cypress.app/Contents/Resources/app/node_modules/bluebird/js/release/util.js:16:23)
    at MappingPromiseArray._promiseFulfilled (~/Library/Caches/Cypress/12.0.2/Cypress.app/Contents/Resources/app/node_modules/bluebird/js/release/map.js:61:38)
    at MappingPromiseArray.<anonymous> (~/Library/Caches/Cypress/12.0.2/Cypress.app/Contents/Resources/app/node_modules/bluebird/js/release/promise_array.js:114:31)
    at MappingPromiseArray.init (~/Library/Caches/Cypress/12.0.2/Cypress.app/Contents/Resources/app/node_modules/bluebird/js/release/promise_array.js:78:10)
    at Promise._settlePromise (~/Library/Caches/Cypress/12.0.2/Cypress.app/Contents/Resources/app/node_modules/bluebird/js/release/promise.js:566:21)
    at Promise._settlePromise0 (~/Library/Caches/Cypress/12.0.2/Cypress.app/Contents/Resources/app/node_modules/bluebird/js/release/promise.js:614:10)
    at Promise._settlePromises (~/Library/Caches/Cypress/12.0.2/Cypress.app/Contents/Resources/app/node_modules/bluebird/js/release/promise.js:694:18)
    at Promise._fulfill (~/Library/Caches/Cypress/12.0.2/Cypress.app/Contents/Resources/app/node_modules/bluebird/js/release/promise.js:638:18)
    at ~/Library/Caches/Cypress/12.0.2/Cypress.app/Contents/Resources/app/node_modules/bluebird/js/release/nodeback.js:42:21
    at <embedded>:219:98304
    at <embedded>:2844:18778
    at FSReqCallback.oncomplete (node:fs:188:23)

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        12.0.2                                                                         │
  │ Browser:        Electron 106 (headless)                                                        │
  │ Node Version:   v19.2.0 (/opt/homebrew/Cellar/node/19.2.0/bin/node)                            │
  │ Specs:          1 found (Google.feature)                                                       │
  │ Searched:       **/*.feature                                                                   │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                    
  Running:  Google.feature                                                                  (1 of 1)

Your configFile threw an error from: cypress.config.js

We stopped running your tests because your config file crashed.

Error: We've tried to resolve your step definitions at cypress/integration, but that doesn't seem to exist. As of version 2.0.0 it's required to set step_definitions in your cypress-cucumber-preprocessor configuration. Look for nonGlobalStepDefinitions and add stepDefinitions right next to it. It should match your cypress configuration has set for integrationFolder. We no longer rely on getting information from that file as it was unreliable and problematic across Linux/MacOS/Windows especially since the config file could have been passed as an argument to cypress.
    at module.exports (~/GitHub/cypress-cucumber-example/node_modules/cypress-cucumber-preprocessor/lib/stepDefinitionPath.js:20:15)
    at getStepDefinitionsPaths (~/GitHub/cypress-cucumber-example/node_modules/cypress-cucumber-preprocessor/lib/getStepDefinitionsPaths.js:14:46)
    at module.exports (~/GitHub/cypress-cucumber-example/node_modules/cypress-cucumber-preprocessor/lib/loader.js:25:36)
    at Stream.end (~/GitHub/cypress-cucumber-example/node_modules/cypress-cucumber-preprocessor/lib/index.js:24:18)
    at _end (~/GitHub/cypress-cucumber-example/node_modules/through/index.js:65:9)
    at Stream.stream.end (~/GitHub/cypress-cucumber-example/node_modules/through/index.js:74:5)
    at DestroyableTransform.onend (~/GitHub/cypress-cucumber-example/node_modules/readable-stream/lib/_stream_readable.js:577:10)
    at Object.onceWrapper (node:events:627:28)
    at DestroyableTransform.emit (node:events:525:35)
    at endReadableNT (~/GitHub/cypress-cucumber-example/node_modules/readable-stream/lib/_stream_readable.js:1010:12)
    at processTicksAndRejections (node:internal/process/task_queues:82:21)