Cypress unable to find form element on webpage-CodePudding

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!

CodePudding user response：

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"]');
  });
});

CodePudding user response：

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"]');
  });
})