I'm currently trying to do some very basic tests in regards to the input fields at https://whitelabel.sandbox.array.io/signup?platform=v3 but having trouble in Cypress in finding the form elements. The code I have is as follows:
describe('Verify identity data', () => {
it('Makes an assertion', function () {
cy.visit('https://whitelabel.sandbox.array.io/signup?platform=v3');
cy.get('input[name=firstName]');
});
});
However Cypress is giving me the error:
Timed out retrying after 4000ms: Expected to find element: input[name=firstName], but never found it.
Am I using the incorrect selector here? Any advice would be appreciated!
It is because you are using a shadow DOM
to access use .shadow https://docs.cypress.io/api/commands/shadow
describe("Verify identity data", () => {
it("Makes an assertion", function () {
cy.visit("https://whitelabel.sandbox.array.io/signup?platform=v3");
cy.get("array-account-enroll").shadow().find('input[name="firstName"]');
});
});
There's a shadow root in the DOM, but it's pretty high up in the DOM and likely to affect a lot of your commands.
Add a config setting to the test or to cypress.confi.js and you won't have to worry about appending every command.
describe("Verify identity data", {includeShadowDom: true}, () => {
it("Makes an assertion", function () {
cy.visit("https://whitelabel.sandbox.array.io/signup?platform=v3");
cy.get('input[name="firstName"]');
cy.get('input[name="lastName"]');
});
})