Previously it should be set up in cypress.json.
Like
testFiles: [
"e2e/register.cy.ts",
"e2e/buyGiftCertificate.cy.ts",
"e2e/buyMembershipCertificate.cy.ts"
]
But after migrating to Cypress 10 the place for it is cypress.config.ts
There should be a pattern but how to order tests it's not clear
If you are using npx cypress run, you can do exactly the same thing, except use specPattern instead of testFiles.
The following will run the test (only these tests) in the order spec2.cy.js, spec3.cy.js, spec1.cy.js
const { defineConfig } = require("cypress");
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
},
specPattern: [
"cypress/e2e/spec2.cy.js",
"cypress/e2e/spec3.cy.js",
"cypress/e2e/spec1.cy.js",
]
},
});
Create a file inside your e2e folder as tests-in-order.cy.ts and inside that file import the tests in order you want them to execute:
//Run tests in the intended order
import './register.cy.ts'
import './buyGiftCertificate.cy.ts'
import './buyMembershipCertificate.cy.ts'
And then execute the file using the command (from cli):
npx cypress run --spec=cypress/e2e/tests-in-order.cy.ts
For Test Runner, just click on the file to execute.
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)
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 using NX 14.5.1 and cypress 10.2.0. When I run cypress component testing for "libs/ui" always got "Process not defined" error. In the component call ".env" like this:
import consola from 'consola'
export const logger = consola.create({
level: process.env.NX_ENV_NAME === 'production' ? 0 : 5
})
This is my "cypress.config.ts":
import { defineConfig } from 'cypress';
import { nxComponentTestingPreset } from '#nrwl/react/plugins/component-testing';
export default defineConfig({
component: {
...nxComponentTestingPreset(__dirname)
}
})
And the error is like this:
process is not defined
ReferenceError
The following error originated from your test code, not from Cypress.
> process 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.
I think Cypress doesn't recognize my ".env". How do I pass my ".env" when I run component testing?
I think the basic problem is the app is server-side-rendered. The server compiles in Node where process is available, but the component test runs in the browser where process isn't valid.
This is the way you might tackle it:
In cypress.config.js load the process.env you need into Cypress.env
import { defineConfig } from 'cypress';
import { nxComponentTestingPreset } from '#nrwl/react/plugins/component-testing';
const setupNodeEvents = (on, config) => {
config.env = {
...config.env,
...process.env.NX_ENV_NAME,
}
return config
}
export default defineConfig({
component: {
...nxComponentTestingPreset(__dirname),
setupNodeEvents
}
})
In the component, check where the component is being run from.
import consola from 'consola'
const envName = window && window.Cypress
? window.Cypress.env('NX_ENV_NAME') // running in browser, take Cypress.env
: process.env.NX_ENV_NAME; // running SSR, take process.env
const level = envName === 'production' ? 0 : 5;
export const logger = consola.create({
level
})
This is messy but removes the restriction on running SSR code in a browser environment.
Creating a new test file in Cypress folder integration is not showing in the Cypress UI.
In this print-screen I have created a new file called: NewTest.spec.js (in green). It is not showing in Cypress.
It used to work
In case you have a testFiles list defined inside the cypress.json file, Cypress will not include all of spec files found within the integration folder and will instead use that list to populate the suite.
So, check cypress.json and add the new spec file to the appropriate place in the order.
"testFiles": [
"FirstTest.spec.js",
"NewTest.spec.js",
"ThirdTest.spec.js"
]
In the latest version of Cypress, make sure your file is named [filename].cy.js
This is for cypress 10 and above - You can also specify the spec pattern in cypress.config.js as below, for all of the files to show up.
No need to name the files as [filename].cy.js for these to show up.
const { defineConfig } = require("cypress");
module.exports = defineConfig({
e2e: {
specPattern: "cypress/e2e/**/*.*",
setupNodeEvents(on, config) {
// implement node event listeners here
},
},
});
In cypress.config.ts you need to define your pattern with specPattern:
Like this:
import { defineConfig } from "cypress";
export default defineConfig({
e2e: {
specPattern: 'cypress/integration/*.cy.ts', // write your pattern here
setupNodeEvents(on, config) {
// implement node event listeners here
},
},
});
I'm using Nightwatch JS to run my e2e tests with the Mocha runner.
I want to integrate an HTML reporter that with the suite.
I'm trying to use the nightwatch-html-reporter package. But as far as I understand there is a problem with the CLI commands (it's written in the Nightwatch docs that --reporter will not work when using mocha).
I also copied the code sample from nightwatch-html-reporter to my globals.js but it doesn't seem to work either.
The tests run but there is no output anywhere.
Here is my folder structure:
project
src
spec
e2e
globals
globals.js
tests
smoke
testFile.js
nightwatch.conf.js
Here is my conf file:
const seleniumServer = require('selenium-server-standalone-jar');
const chromeDriver = require('chromedriver');
module.exports = {
src_folders: ['src/spec/e2e/tests'],
output_folder: 'report',
page_objects_path: [
'src/spec/e2e/pageObjects'
],
globals_path: 'src/spec/e2e/globals/globals.js',
custom_commands_path: 'src/spec/e2e/customCommands',
selenium: {
start_process: true,
server_path: seleniumServer.path,
host: '127.0.0.1',
port: 4444,
cli_args: {
'webdriver.chrome.driver': chromeDriver.path
}
},
test_runner: {
type: 'mocha',
options: {
ui: 'bdd',
reporter: 'list'
}
},
test_settings: {
default: {
launch_url: 'http://URL',
silent: true,
desiredCapabilities: {
browserName: 'chrome',
javascriptEnabled: true,
acceptSslCerts: true,
chromeOptions: {
args: [
"--no-sandbox",
"start-fullscreen"
]
}
}
}
}
};
And here is my global.js file:
var HtmlReporter = require('nightwatch-html-reporter');
var reporter = new HtmlReporter({
openBrowser: true,
reportsDirectory: __dirname + '/reports'
});
module.exports = {
reporter: reporter.fn
};
I don't think it will work with nightwatch-html-reporter as it is probably not a mocha reporter (but correct me if I'm wrong).
You want to use built in or custom mocha reporters when using nightwatch with mocha.
You can use a custom mocha html reporter like mochawesome but you'll have to hack around a bit and I offer no guarantees as I only tested those hacks lightly.
Here are the instructions to use mochawesome
(tested with
"mocha": "^5.2.0",
"mochawesome": "^3.1.1",
"nightwatch": "^0.9.21")
npm install mochawesome
Modify mochawesome node_modules\mochawesome *.js files to require mocha-nightwatch instead of mocha. (See instructions/explanations towards the end of the answer)
Presuming you're using a nightwatch.conf.js, configure your test runner to the equivalent of
test_runner : {
type : "mocha",
options : {
ui : "bdd",
reporter : require("mochawesome") // Please observe that you can pass a custom report constructor function here, not just reporter names
}
}
Run tests and observe that you still see the default console reporter (spec) but that at the end of the run you also see an output like:
[mochawesome] Report HTML saved to C:\projects\myWebApp\mochawesome-report\mochawesome.html
Open the html report.
This solution is hackish and fragile because nightwatch comes with it's own version of mocha.
When you install nightwatch you will see in your node_modules a mocha-nightwatch folder. This is the mocha that is being used by nightwatch.
However mochawesome doesn't use mocha-nightwatch. If you look at node_modules\mochawsome\dist\mochawesome.js you will see lines of code like:
var Base = require('mocha/lib/reporters/base');
var Spec = require('mocha/lib/reporters/spec');
This means is requires mocha, not mocha-nightwatch.
Those lines should ideally be: require('mocha-nightwatch/...).
So please change them in all *.js files that need fixing.
You could also fork mochawesome and make them like that ;)
Debugging notes:
Try putting some additional console.logs in node_modules\mocha-nightwatch\lib\mocha.js in the Mocha.prototype.reporter function. That's how I figured out what's going on.
If you use Mocha you can always go with mochawsome: https://www.npmjs.com/package/mochawesome
I haven't tried it myself but it looks pretty neat.