unable to upload image using cypress?

Question

Using this code:

const imagefile='aboutfirst.png';
cy.get('[name="File"]').attachFile(imagefile);

or

const imagefile='aboutfirst.png';
cy.get('#File').attachFile(imagefile);

I already installed the upload file path using terminal and the picture is in fixtures.

This is the HTML where I request the name:

<input id="File" name="File" type="file" />

And the response I get from cypress in both cases:

Timed out retrying after 4000ms: Expected to find element: [name="File"], but never found it.

Answer 1

The selector cy.get('[name="File"]') should find the <input id="File" name="File" type="file" /> element, except if there's a shadow DOM involved.

Dev tools will show you the shadow root when you inspect the element.

If so, add this line to your cypress.json config file

{
  includeShadowDom: true
}