Nx: support for cucumber e2e tests

[remkoboschker]

Have you considered / would you consider supporting (or accepting a pr for) running cucumber tests? It would be nice to have schematics to scaffold feature and step definition files and include the configuration required to run cucumber tests using cypress. There is a cypress plugin that seems a good fit https://github.com/TheBrainFamily/cypress-cucumber-preprocessor.

[joelmuskwe]

Any luck with this when i add cypress-cucumber-preprocessor i get the attached error.

I dont know how possible is it to allow the following ` as per Cypress documentation to enable transpiling TypeScript test files.

[hnryjms]

Hi there....

I was able to find a way to do this:

First, install the cypress-cucumber-preprocessor package:

npm install --save-dev cypress-cucumber-preprocessor
# or
yarn add --dev cypress-cucumber-preprocessor

Next, write an alternative preprocessTypescript() function by modifying your src/plugins/index.js file like so:

const wp = require('@cypress/webpack-preprocessor');
const { getWebpackConfig } = require('@nrwl/cypress/plugins/preprocessor');

function preprocessTypescript(config) {
   if (!config.env.tsConfig) {
       throw new Error(
           'Please provide an absolute path to a tsconfig.json as cypressConfig.env.tsConfig'
       );
   }

   const webpackConfig = getWebpackConfig(config);

   webpackConfig.node = { fs: "empty", child_process: "empty", readline: "empty" };
   webpackConfig.module.rules.push({
       test: /\.feature$/,
       use: [{
           loader: "cypress-cucumber-preprocessor/loader"
       }]
   }, {
       test: /\.features$/,
       use: [{
           loader: "cypress-cucumber-preprocessor/lib/featuresLoader"
       }]
   });

   return async (...args) => wp({
       webpackOptions: webpackConfig
   })(...args);
}

module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config

   // Preprocess Typescript file using Nx helper
   on('file:preprocessor', preprocessTypescript(config));
};

Finally, add a .cypress-cucumber-preprocessorrc file to the root of your repo (or in each -e2e app) with this configuration:

{
    "stepDefinitions": "src/support/step_definitions"
}

Without the updated stepDefinitions configuration, cucumber will continue searching the cypruss/ instead of src/ directory of your -e2e/ folders.

---

It would be nicer if the built-in preprocessTypescript() function gave us an optional second argument for modifying the Webpack config file, so we wouldn't need to fork the work of that function. That way we wouldn't be duplicating the throw new Error and return async parts of NX.

[hnryjms]

^ Storybook has a paradigm for custom webpack config which may be a good approach here.

[bhavyamathur]

@hnryjms I created a similar nx repo and used your suggested cypress cucumber preprocessor plugin configuration, still when I run cypress it creates a cypress folder and tries to find the step definition file in it's new support folder. Can you share how your cypress, package and tsconfig looks like?

[vinayakpatil]

@hnryjms Your solution worked but I have seen a degradation in the test run times. Have you faced anything like it?

I have already logged a separate issue here: https://github.com/TheBrainFamily/cypress-cucumber-preprocessor/issues/336

[D0rmouse]

@hnryjms Your solution worked, thanks for that.

I'm not able to debug my steps in Cypress though, because the source doesn't seem to be attached. Is that something we could add to the webpack config, or is it a cypress-cucumber-preprocessor issue?

[thinuspainter]

Can you please get cucumber/gherkin integrated!?

[dbartholomae]

@hnryjms Do you have an example repo with your solution? Unfortunately I couldn't get it to run :(

[remkoboschker]

I have it running just fine with:
package.json

   "cypress": "^4.6.0",
        "cypress-cucumber-preprocessor": "^2.3.1",
.....
 "cypress-cucumber-preprocessor": {
        "nonGlobalStepDefinitions": true,
        "stepDefinitions": "./src/integration",
        "cucumberJson": {
            "generate": true,
            "outputFolder": "./cucumber"
        }

/src/plugins/index.js

const { getWebpackConfig } = require('@nrwl/cypress/plugins/preprocessor');
const wp = require('@cypress/webpack-preprocessor');

module.exports = function(on, config) {
    const wpConfig = getWebpackConfig(config);
    wpConfig.node = { fs: 'empty', child_process: 'empty', readline: 'empty' };
    wpConfig.module.rules.push({
        test: /\.feature$/,
        use: [
            {
                loader: 'cypress-cucumber-preprocessor/loader'
            }
        ]
    });
    on('file:preprocessor', wp({ webpackOptions: wpConfig }));
};

cypress.json

{
    "fileServerFolder": "./",
    "fixturesFolder": "./src/fixtures",
    "integrationFolder": "./src/integration",
    "pluginsFile": "./src/plugins/index.js",
    "supportFile": "./src/support/index.ts",
    "video": true,
    "videosFolder": "../../dist/videos",
    "screenshotsFolder": "../../dist/screenshots",
    "chromeWebSecurity": false,
    "testFiles": "**/*.{feature,features}",
    "baseUrl": "https://localhost:4200",
    "ignoreTestFiles": "*.{js,ts}"
}

[huantaoliu]

If still doesn't work, this might be your case

1. you might used custom cypress commands, that nx is not able to support now, this is the work around
   https://github.com/nrwl/nx/issues/1609

1. if you also cypress-cucumber-pre-processor, you might have problem configuring your commonPath
   https://github.com/TheBrainFamily/cypress-cucumber-preprocessor/issues/213

[dbartholomae]

I didn't get the same error, but got it to work in two steps:

1. I am using TypeScript so I had to include preprocessTypescript in the plugins/index.js function:

const { preprocessTypescript } = require('@nrwl/cypress/plugins/preprocessor');

module.exports = function(on, config) {
  on('file:preprocessor', preprocessTypescript(config, (wpConfig) => {
    wpConfig.node = { fs: 'empty', child_process: 'empty', readline: 'empty' };
    wpConfig.module.rules.push({
      test: /\.feature$/,
      use: [{
        loader: 'cypress-cucumber-preprocessor/loader'
      }]
    });
    return wpConfig
  }));
};

1. With the configuration above the step definitions need to be in src/integration/nameOfFeature/**/* where nameOfFeature is the name of the feature file or common. If you disable nonGlobalStepDefinitions in package.json, step files will be checked directly in src/integration.

[kbradl16]

@dbartholomae Do you happen to have a working example you can share? I'm not able to get it working with what you have.

I get this error:

ReferenceError: The following error originated from your test code, not from Cypress.

  > require is not defined

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

We dynamically generated a new test to display this failure.

Check your console for the stack trace or click this message to see where it originated from.
    at Object.eval (http://localhost/__cypress/tests?p=e2e\src\integration\BasePage.feature:413:1)
    at __webpack_require__ (http://localhost/__cypress/tests?p=e2e\src\integration\BasePage.feature:20:30)
    at Object.eval (http://localhost/__cypress/tests?p=e2e\src\integration\BasePage.feature:91:19)
    at __webpack_require__ (http://localhost/__cypress/tests?p=e2e\src\integration\BasePage.feature:20:30)
    at Object.eval (http://localhost/__cypress/tests?p=e2e\src\integration\BasePage.feature:388:5)
    at __webpack_require__ (http://localhost/__cypress/tests?p=e2e\src\integration\BasePage.feature:20:30)
    at Object.eval (http://localhost/__cypress/tests?p=e2e\src\integration\BasePage.feature:368:18)
    at __webpack_require__ (http://localhost/__cypress/tests?p=e2e\src\integration\BasePage.feature:20:30)
    at eval (http://localhost/__cypress/tests?p=e2e\src\integration\BasePage.feature:84:18)
    at eval (http://localhost/__cypress/tests?p=e2e\src\integration\BasePage.feature:87:10)
From previous event:
    at Object.runScripts (http://localhost/__cypress/runner/cypress_runner.js:176237:96)
    at $Cypress.onSpecWindow (http://localhost/__cypress/runner/cypress_runner.js:166148:18)

[dbartholomae]

Unfortunately not :(

[agborkowski]

@kbradl16 ill publish the completed integration of NX workspace with angular and cucumber. watch my GitHub profile. cheers