support for cucumber e2e tests #1276
Comments
|
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. |
vsavkin
added
the
scope: testing tools
|
Hi there.... I was able to find a way to do this: First, install the Next, write an alternative 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 {
"stepDefinitions": "src/support/step_definitions"
}Without the updated It would be nicer if the built-in |
|
^ Storybook has a paradigm for custom webpack config which may be a good approach here. |
|
@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? |
|
@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: badeball/cypress-cucumber-preprocessor#336 |
|
@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 |
|
Can you please get cucumber/gherkin integrated!? |
|
@hnryjms Do you have an example repo with your solution? Unfortunately I couldn't get it to run :( |
|
I have it running just fine with: /src/plugins/index.js cypress.json |
|
If still doesn't work, this might be your case
|
|
I didn't get the same error, but got it to work in two steps:
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
}));
};
|
|
@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: |
|
Unfortunately not :( |
|
@kbradl16 ill publish the completed integration of NX workspace with angular and cucumber. watch my GitHub profile. cheers |
|
any update on cypress + cucumber in nx ? |
|
Is there any update on this? The above example @dbartholomae listed doesn't work with webpack5 on nx12.3.4, cypress 6.0.1, & cypress-cucumber-preprocessor 4.1.0. |
For Webpack 5I got a working solution, practically using @dbartholomae 's config, with the same solutions as the ones I googled up before for a regular Angular CLI 12 generated project (without using @nrwl/nx). My idea was to:
Based on that:
{
// ...
"testFiles": "*.{ts,feature,features}",
"ignoreTestFiles": "**/*.js"
}
{
// ...
"cypress-cucumber-preprocessor": {
"nonGlobalStepDefinitions": true,
"stepDefinitions": "./src/integration"
}
}
const { preprocessTypescript } = require('@nrwl/cypress/plugins/preprocessor');
const webpack = require('webpack');
module.exports = (on, config) => {
on('file:preprocessor', preprocessTypescript(config, (wpConfig) => {
wpConfig.resolve.fallback = {
...wpConfig.resolve.fallback,
'path': require.resolve("path-browserify")
};
wpConfig.plugins.push(
new webpack.ProvidePlugin({
process: 'process/browser',
})
);
wpConfig.module.rules.push(
{
test: /\.feature$/,
use: [{
loader: 'cypress-cucumber-preprocessor/loader'
}]
},
{
test: /\.features$/,
use: [{
loader: 'cypress-cucumber-preprocessor/lib/featuresLoader'
}]
}
);
return wpConfig
}));
}; |
|
With a more recent version of That is a problem because we still need a webpack configuration, but now we don't have the help of Nx. According to Nx's Click to expand the *wrong* solution...Only showing the changes to my previous example code:diff --git a/path-to-project/src/plugins/index.js b/path-to-project/src/plugins/index.js
index 968157c..d5cc2f2 100644
--- a/path-to-project/src/plugins/index.js
+++ b/path-to-project/src/plugins/index.js
@@ -1,8 +1,11 @@
-const { preprocessTypescript } = require('@nrwl/cypress/plugins/preprocessor');
+const webpackPreprocessor = require('@cypress/webpack-preprocessor')
+const { getWebpackConfig } = require('@nrwl/cypress/plugins/preprocessor');
const webpack = require('webpack');
module.exports = (on, config) => {
- on('file:preprocessor', preprocessTypescript(config, (wpConfig) => {
+ on('file:preprocessor', webpackPreprocessor((() => {
+ const options = { webpackOptions: getWebpackConfig(config) };
+ const wpConfig = options.webpackOptions;
wpConfig.resolve.fallback = {
...wpConfig.resolve.fallback,
'path': require.resolve('path-browserify')
@@ -26,6 +29,6 @@ module.exports = (on, config) => {
}]
}
);
- return wpConfig
- }));
+ return options;
+ })()));
};However, a more future-proof solution may look like this (you might need to install some packages if Nx no longer provides them transitively). Sadly it's quite some code copied out of /// <reference types="cypress" />
const webpackPreprocessor = require('@cypress/webpack-preprocessor')
const webpack = require('webpack');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
/**
* @type {Cypress.PluginConfig}
*/
module.exports = (on, config) => {
on('file:preprocessor', webpackPreprocessor({
webpackOptions: {
resolve: {
extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx'],
plugins: [
new TsconfigPathsPlugin({
configFile: config.env.tsConfig,
extensions: ['.ts', '.tsx', '.mjs', '.js', '.jsx']
}),
],
fallback: {
'path': require.resolve('path-browserify')
}
},
module: {
rules: [
{
test: /\.([jt])sx?$/,
loader: 'ts-loader',
exclude: [/node_modules/],
options: {
configFile: config.env.tsConfig,
// https://github.com/TypeStrong/ts-loader/pull/685
experimentalWatchApi: true,
transpileOnly: true
}
},
{
test: /\.feature$/,
use: [{
loader: 'cypress-cucumber-preprocessor/loader'
}]
},
{
test: /\.features$/,
use: [{
loader: 'cypress-cucumber-preprocessor/lib/featuresLoader'
}]
}
]
},
plugins: [
new ForkTsCheckerWebpackPlugin({
typescript: {
enabled: true,
configFile: config.env.tsConfig,
},
}),
new webpack.ProvidePlugin({
process: 'process/browser',
})
],
externals: [nodeExternals()]
},
}));
}Edit: I've checked if we can reuse webpackPreprocessor.defaultOptions but it does not seem true for our use case. |
|
What do you think about this config ? It works running cypress run but not nx e2e |
I tried the |
I thought we were trying to find a solution to use cucumber tests with nx? And I'm using typescript aliases and it works fine as well. |
Yep, sorry you're correct (I've mixed up the GitHub issues). I think that config you showed matches what we have and works fine (when not importing for aliased
Could you show how the |
|
This is our config in I've noticed this setup is pretty slow for us (takes >10 seconds just to load a handful of |
|
OK, I've tested the browserify way, and I could reproduce both problems:
|
I'll see if I can get the custom Webpack setup you shared working correctly. Then from there we could follow up with some combo of nx, Cypress Webpack, or cypress-cucumber-preprocessor to implement the best support path going forward? I'd be fine using Webpack, but hopefully the config mostly just works out of the box with the |
|
Hey guys. I have the same problem with cypres cucumber and paths. Did you find a solution, where all 3 of them work? And do you still use the nx preprocessor? |
|
@mristo , a summary for you:
|
|
@wrslatz I was able to get Cypress-Cucumber-Preprocessor to work well with Nx using the above mentioned Webpack 5 configuration from @rkrisztian, but I am running into the paths issue noted here: badeball/cypress-cucumber-preprocessor#537 Were you able to get around your paths issue? I was able to temporarily bypass it by using relative paths, but now that I'm trying to leverage some of my application's data models (that reference other models via aliases), I'm not able to get past it. This is a massive impediment and I can't seem to get through. Any insight is greatly appreciated! |
|
Why is this closed? I still cannot run Cypress + Cucumber with nx v.13.2.1. I tried all of the outlined solutions here and none of them works. |
|
The custom webpack config in #1276 (comment) along with merging the |
|
Just adding it here if anyone comes to this thread later. With the new @badeball/cypress-cucumber-preprocessor you can simplify the configuration in the First you have to install the dependencies: Then you can add to your /** @see https://on.cypress.io/plugins-guide */
const createBundler = require('@bahmutov/cypress-esbuild-preprocessor');
const {
createEsbuildPlugin,
} = require('@badeball/cypress-cucumber-preprocessor/esbuild');
const {
addCucumberPreprocessorPlugin,
} = require('@badeball/cypress-cucumber-preprocessor');
/// <reference types="cypress" />
/**
* @type {Cypress.PluginConfig}
*/
module.exports = async (on, config) => {
await addCucumberPreprocessorPlugin(on, config);
on(
'file:preprocessor',
createBundler({
plugins: [createEsbuildPlugin(config)],
})
);
return config;
};You also have to change your config, for example in {
- "nonGlobalStepDefinitions": true,
- "stepDefinitions": "./src/integration",
- "commonPath": "./src/integration/common"
+ "stepDefinitions": [
+ "./src/integration/[filepath]/**/*.ts",
+ "./src/integration/common/*.ts"
+ ]
}Then you also need to change all imports in your spec files: - import { When } from 'cypress-cucumber-preprocessor/steps';
+ import { When } from '@badeball/cypress-cucumber-preprocessor';But please be aware that with the One thing I also changed was to merge the tsconfigs in the e2e project into one |
|
This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context. |
and others
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.
The text was updated successfully, but these errors were encountered: