Cypress - New test file not showing in cypress UI - cypress

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
},
},
});

Related

How to rename downloaded file in Cypress?

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)

Error: Step implementation missing for: [step_definition] when trying to run a scenario using cucumber with cypress 10

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;
},
},
});

Add cypress dashboard record key in cypress config file

I have added my cypress record key in the cypress config file. But displaying this issue. Can someone help me to resolve this issue?
Tried like this too.
e2e: {
async setupNodeEvents(on, config) {
// implement node event listeners here
const bundler = createBundler({
plugins: [createEsbuildPlugin(config)],
});
on("file:preprocessor", bundler);
await addCucumberPreprocessorPlugin(on, config);
return config;
},
specPattern:"cypress/e2e/features/*feature",
baseUrl:"https://d2l5front.net/",
projectId: "7t2",
viewportWidth: 1600,
viewportHeight: 1100,
env: {
CYPRESS_RECORD_KEY: "62ad7c5d-2c01209cf1c7",
}
}
The CYPRESS_ prefix is only for "external" environment variables, those created in the OS before Cypress runs.
See Option #3: CYPRESS_*
Cypress automatically normalizes both the key and the value.
The leading CYPRESS_ or cypress_ is removed and the remaining name is camelCased, while values are converted to Number or Boolean wherever possible.
I would suggest you try without the CYPRESS_ prefix since you are providing the key "internally" as it were.
env: {
RECORD_KEY: "62ad7c5d-2c01209cf1c7",
}
Your env property should be under the e2e object, not at the same level.
...
e2e: {
...
env: {
CYPRESS_RECORD_KEY: 'foo',
},
...
}
...
I think that is by design. The record key should not be saved in the config (or any) file, as it's linked to billable usage.
From Dashboard - Record key
Exposing a record key
Anyone that has access to both the projectId and the record key of a project can record runs to that organization's project in the Dashboard.
The projectId can be saved as
const { defineConfig } = require('cypress')
module.exports = defineConfig({
projectId: 'a7bq2k'
})
but there is no mention of setting recordKey in the config.
Instead, you must set it in the external environment as CYPRESS_RECORD_KEY or on the command line
cypress run --record --key abc-key-123

Cypress 10 - How can I run test files in order

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.

Cypress shadow-root inside of shadow-root

How do I find the element that is inside of shadow-root which is inside of other shadow-root? I'm new to this and tried .shadow() function.
You don't have to use .shadow() every time. Go to cypress.json file and add the following includeShadowDom: true.
Now with this added all your get, find commands will automatically traverse through the shadow dom and reach the element.
cy.get('some-element').should('be.visible')
If you're using Cypress v10, then the configuration is in the file cypress.config.js and the format for setting global shadow enabling is
const { defineConfig } = require("cypress");
module.exports = defineConfig({
e2e: {
...
},
...
includeShadowDom: true
})
Or use test-specific configuration
it('tests some shadow dom elements', {includeShadowDom: true}, () => {
...
})

Resources