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}, () => {
...
})
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 a cy.js file like this
/// <reference types="cypress" />
context("Dummy test cases", () => {
it("open Google", () => {
cy.visit("www.google.com");
});
it("search a keyword", () => {
cy.get(".gLFyf").type("cypress{enter}");
});
});
As you can see I've 2 test cases. 1 is to open a website and the other is to do other tasks.
But the problem is that after finishing the first 'it' (test case 1), the browser closes and then the next case fails because there is no active browser.
Can you help me how to stop cypress from closing the browser after the execution of each test case?
I found Cypress is quite opinionated about some things, one at the top of the list is "test isolation" which means one test must not influence another test.
Note each it() is a test.
To make your code work, you must turn off test isolation.
If the cypress.config.js file add the option
const { defineConfig } = require("cypress");
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
// implement node event listeners here
},
testIsolation: false,
},
})
Same if you are using typescript.
This got added in the new Version Cypress 12.0.0, in their
Changelogs its at the feature section:
Added a new configuration option called testIsolation, which defaults to true.
As #Joylette already said, in your config file just use testIsolation: false to deactivate it. If you ever use an older version use testIsolation: off, they renamed it in the newest version.
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
I have the following component test:
import AutoGeneratedPage from '../../../src/components/AutoGenerate/AutoGenerate.vue'; // <= note the absence of `.vue` extension, here we are importing the JS/TS part of a Double File Component
describe('AutoGenerated Page tests', () => {
it('Auto generated page from JSON should contain all the UI Elements', () => {
cy.mount(AutoGeneratedPage);
cy.get('[data-test="toggle-setting-0"]').eq(false);
cy.get('[data-test="toggle-setting-0"]').focus().click();
cy.get('[data-test="toggle-setting-0"]').eq(true);
cy.get('[data-test="dropdown-setting-3"]').should('have.text', 'Option 1');
cy.get('[data-test="dropdown-setting-3"]').should('have.text', 'Option 2');
cy.get('[data-test="dropdown-setting-3"]').should('have.text', 'Option 3');
});
})
and bump into the following error when running the component test:
What do I miss? https://github.com/khteh/quasar
The first assertion needs changing:
cy.get('[data-test="toggle-setting-0"]').eq(false);
cy.get('[data-test="toggle-setting-0"]').focus().click();
cy.get('[data-test="toggle-setting-0"]').eq(true);
change to
cy.get('[data-test="toggle-setting-0"]').invoke('val').should('eq', false);
cy.get('[data-test="toggle-setting-0"]').focus().click();
cy.get('[data-test="toggle-setting-0"]').invoke('val').should('eq', true);
because .eq(number) is a Cypress command for taking the nth item in a group.
The error Cannot read properties of undefined (reading 'deep') is due to the deep rendering (i.e nested components) in the AutoGenerate.vue component.
If you comment out the child components, the test succeeds.
<div v-for="(field, index) in layoutObj.data" :key="index">
<span>{{field.name}}</span>
<!-- <toggle-setting
v-if="field.type === 'toggle'"
:name="field.name"
:fieldName="field.fieldName"
:description="field.description"
:data-test="`toggle-setting-${index}`"
/>
<pop-up-edit-setting
v-if="field.type === 'popUpEdit'"
:dataType="field.dataType"
:name="field.name"
:fieldName="field.fieldName"
:hint="field.hint"
:data-test="`popup-edit-setting-${index}`"
/>
<drop-down-setting
v-if="field.type === 'dropDown'"
:name="field.name"
:description="field.description"
:fieldName="field.fieldName"
:internalOptions="internalOptions"
:data-test="`dropdown-setting-${index}`"
/> -->
</div>
Of course, the child components are required, but I thought I'd post this in case it gives you clues.
In any case, the Cypress component test is configured correctly, this is the config I used.
const { defineConfig } = require("cypress");
const webpackConfig = require("./webpack.config");
module.exports = defineConfig({
e2e: {
...
},
component: {
devServer: {
framework: "vue",
bundler: "webpack",
webpackConfig,
},
specPattern: 'test/cypress/components/**/*.cy.{js,jsx,ts,tsx}',
indexHtmlFile: 'test/cypress/support/component-index.html',
},
});
Will add to this if I find out the problem with deep-nested components.
Remove mount() and all references to quasar UI stuff. mount() must only be used for Component Tests. Not E2E tests.
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
},
},
});