in package.json I used these versions of cucumber and esbuild with cypress:
"cypress-cucumber-preprocessor": {
"stepDefinitions": "cypress/support/step_definitions/**/*.{js,ts}"
},
"devDependencies": {
"#badeball/cypress-cucumber-preprocessor": "^11.5.1",
"#bahmutov/cypress-esbuild-preprocessor": "^2.1.5",
"cypress": "^10.7.0"
},
In cypress.config.js I have:
e2e: {
baseUrl: 'http://localhost:4200',
specPattern: 'cypress/e2e/features',
setupNodeEvents(on, config) {
const createEsbuildPlugin =
require('#badeball/cypress-cucumber-preprocessor/esbuild').createEsbuildPlugin
const createBundler = require('#bahmutov/cypress-esbuild-preprocessor')
require('#badeball/cypress-cucumber-preprocessor').addCucumberPreprocessorPlugin
on('file:preprocessor', createBundler({
plugins: [createEsbuildPlugin(config)],
}));
}
},
Now, this is working fine, no issues. But after I upgraded the cucumber preprocessor to:
"#badeball/cypress-cucumber-preprocessor": "^15.1.2",
and cypress version to 12.3.0
then ran npm install and started cypress test runner, I can't run any test.
After starting the test runner, however I can see all my tests there, but after I click any test, there is an error: Cypress could not detect tests in this file and this:
Error: Build failed with 1 error:
node_modules/common-ancestor-path/index.js:17:37: ERROR: [plugin: feature] Reduce of empty array with no initial value
at failureErrorWithLog (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1605:15)
at C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1251:28
at runOnEndCallbacks (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1034:63)
at buildResponseToResult (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1249:7)
at C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:1358:14
at C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:666:9
at handleIncomingPacket (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:763:9)
at Socket.readFromStdout (C:\Users\JS\Desktop\test\node_modules\esbuild\lib\main.js:632:7)
at Socket.emit (node:events:527:28)
at addChunk (node:internal/streams/readable:324:12)
at readableAddChunk (node:internal/streams/readable:297:9)
at Readable.push (node:internal/streams/readable:234:10)
at Pipe.onStreamRead (node:internal/stream_base_commons:190:23)
When I downgrade the cucumber preprocessor and cypress, it is working again. Is there anything I should change in config file or what is the issue?
I tried both versions, "#badeball/cypress-cucumber-preprocessor": "^15.1.2" worked ok but I did have to modify your config in line with the sample on the badeball repo:
awaiting the addCucumberPreprocessorPlugin() call
passing in the on, config params
returning the config at the end of setupNodeEvents()
putting a wildcard into specPattern (could explain test-not-found error)
const { defineConfig } = require("cypress");
module.exports = defineConfig({
e2e: {
// baseUrl: 'http://localhost:4200',
specPattern: "**/*.feature",
// prefix async
async setupNodeEvents(on, config) {
const createEsbuildPlugin = require('#badeball/cypress-cucumber-preprocessor/esbuild').createEsbuildPlugin
const createBundler = require('#bahmutov/cypress-esbuild-preprocessor')
// await here
await require('#badeball/cypress-cucumber-preprocessor').addCucumberPreprocessorPlugin(on, config)
on('file:preprocessor', createBundler({
plugins: [createEsbuildPlugin(config)],
}));
// return any mods to Cypress
return config
}
},
});
So as I still had issues with using esbuild, I replaced it with browserify:
const { defineConfig } = require("cypress");
const preprocessor = require("#badeball/cypress-cucumber-preprocessor");
const browserify = require("#badeball/cypress-cucumber-preprocessor/browserify");
async function setupNodeEvents(on, config) {
await preprocessor.addCucumberPreprocessorPlugin(on, config);
on("file:preprocessor", browserify.default(config));
return config;
}
module.exports = defineConfig({
e2e: {
baseUrl: 'http://localhost:4200',
specPattern: "**/*.feature",
setupNodeEvents,
},
});
So now the package.json looks like:
"#badeball/cypress-cucumber-preprocessor": "^15.1.2",
"#cypress/browserify-preprocessor": "^3.0.2",
"cypress": "^12.3.0",
I also needed to replace all AND commands in step definitions js files, e.g.:
Before:
import { And, Then } from "#badeball/cypress-cucumber-preprocessor"
And("I select Checkbox", () => {}
Now:
import { When, Then } from "#badeball/cypress-cucumber-preprocessor"
When("I select Checkbox", () => {}
As And should be used in feature files, and in step definitions only When, Then.
With this config the latest cypress works with the latest cucumber and browserify.
Related
is there some way how to rename downloaded file in test?
Was looking for advice on google, but did not find any.
Current code to download load file:
cy.get(':nth-child(2) > .btn').contains(domData.dwnldContractFiles).as('dwnldContractFiles').should('exist').should('be.visible').and('not.be.disabled')
cy.get('#dwnldContractFiles').click()
cy.verifyDownload(domData.allFiles, {timeout: 30000, interval: 3000})
You can use cypress-downloadfile if you are not tied to any download mechanism.
In order to install this package you need tinpm install cypress-downloadfile
Then add the following line to cypress/support/commands.js.
require('cypress-downloadfile/lib/downloadFileCommand');
Update your cypress.config.js file with:
const { defineConfig } = require('cypress')
const {downloadFile} = require('cypress-downloadfile/lib/addPlugin')
module.exports = defineConfig({
// setupNodeEvents can be defined in either
// the e2e or component configuration
e2e: {
setupNodeEvents(on, config) {
on('task', {downloadFile})
})
}
}
})
Finally, you can use it in your tests and set any name you want:
cy.downloadFile('https://upload.wikimedia.org/wikipedia/en/a/a9/Example.jpg','downloads',chosenName)
When running Cypress headlessly, I can see console.log output from the frontend code under test by using the DEBUG environment variable, like:
DEBUG='cypress:launcher' npx cypress run --browser chrome
However, I haven't found any similar way to see the output of cy.log from the Cypress test code when running headlessly. Even with DEBUG='cypress:*' I don't see them - they only seem to be visible in the interactive interface. It feels like there must be some way to see the cy.log output headlessly - can someone help with that?
The first step is to add a new task in your Cypress config file so that you can run console.log from Node:
import { defineConfig } from "cypress";
export default defineConfig({
e2e: {
setupNodeEvents(on, config) {
on("task", {
log(args) {
console.log(...args);
return null;
}
});
},
},
});
Then, you can override cy.log so that it calls this task whenever you run the command in headless mode, and console.log when you're running in headed mode. You can do this by adding the following to your commands file:
Cypress.Commands.overwrite("log", function(log, ...args) {
if (Cypress.browser.isHeadless) {
return cy.task("log", args, { log: false }).then(() => {
return log(...args);
});
} else {
console.log(...args);
return log(...args);
}
});
I have updated my project to cypress 10. But getting this error couldn't solve the problem described in the title.
my feature file:
spec file:
Error:
File order:
Config file:
package.json file:
It's probably a mistake to use both cypress-cucumber-preprocessor and #badeball/cypress-cucumber-preprocessor in the same project.
Uninstall cypress-cucumber-preprocessor, it is a defunct version.
Then follow badeball Example setup to make corrections to the configuration, for example
import { defineConfig } from "cypress";
import createBundler from "#bahmutov/cypress-esbuild-preprocessor";
import { addCucumberPreprocessorPlugin } from "#badeball/cypress-cucumber-preprocessor";
import createEsbuildPlugin from "#badeball/cypress-cucumber-preprocessor/esbuild";
export default defineConfig({
e2e: {
specPattern: "**/*.feature",
async setupNodeEvents(
on: Cypress.PluginEvents,
config: Cypress.PluginConfigOptions
): Promise<Cypress.PluginConfigOptions> {
// This is required for the preprocessor to be able to generate JSON reports after each run, and more,
await addCucumberPreprocessorPlugin(on, config);
on(
"file:preprocessor",
createBundler({
plugins: [createEsbuildPlugin(config)],
})
);
// Make sure to return the config object as it might have been modified by the plugin.
return config;
},
},
});
I am trying add functions to this (which is a Mocha Context) in tests, so I can do e.g.
describe('my spec', () => {
it('should work', function () {
this.sayHelloWorld();
})
})
In an empty folder I call
yarn add cypress
yarn cypress open
so that default config files are created. It also creates a sample test in cypress/e2e/spec.cy.js.
I can run the sample test without problem. But if I add
import { Context } from "mocha";
to cypress/support/e2e.js I get
Error: Webpack Compilation Error
./cypress/support/e2e.js
Module not found: Error: Can't resolve 'mocha' in '...\support'
resolve 'mocha' in '...\support'
Parsed request is a module
So I installed Mocha, the same version which is in devDependencies of Cypress (see package.json):
yarn add mocha#3.5.3
My package.json now looks like this:
{
"dependencies": {
"cypress": "^10.4.0",
"mocha": "3.5.3"
}
}
Now that import line passes. But this fails:
import { Context } from "mocha";
Context.prototype.sayHelloWorld = () => console.log("hello world");
Error:
> Cannot read properties of undefined (reading 'prototype')
Why is that? In comparison adding something to String.prototype works.
Also in comparison: Again in an empty folder:
yarn add mocha#3.5.3
And in test/test.js:
const { Context } = require("mocha");
it("should work", function () {
Context.prototype.sayHelloWorld = () => console.log("hello world");
this.sayHelloWorld();
});
Now yarn mocha works (says hello world).
What is going on in Cypress? Possibly a bug?
Solution:
no import { Context } from "mocha";
add functions like that:
Mocha.Context.prototype.sayHelloWorld = function () {
cy.log('hello world');
};
I recently upgraded tom Next.js 11 and so I use the storybook webpack5 beta as well. But when I add the sass-loader to the config:
// .storybook/main.js
const path = require('path');
module.exports = {
core: {
builder: "webpack5",
},
stories: ['../stories/*.stories.#(ts|tsx|js|jsx|mdx)'],
addons: ['#storybook/addon-links', '#storybook/addon-essentials'],
webpackFinal: async (config, { configType }) => {
config.module.rules.push({
test: /\.s[ac]ss$/i,
use: [
"style-loader",
"css-loader",
"sass-loader",
],
},);
return config;
},
}
So when I start storybook then, the example has no className at all:
And the .index class has not compiled by sass like it should in a module:
To see it yourself you can checkout my example here
For Storybook you can use the Storybook Saas Addon which works just fine.