Select file does not work if type="file" element has display:none property

Current behavior

I’m getting

Timed out retrying after 15000ms: cy.selectFile() failed because this element is not visible:

If my element has

style="display: none"

While cypress-file-upload had no issues with that.

{force: true} does not help.

Desired behavior

No response

Test code to reproduce

Just run selectFile

Cypress Version

9.3

Other

No response

[BlueWinds]

So we have a unit test covering this, which you can see here: https://github.com/cypress-io/cypress/blob/develop/packages/driver/cypress/integration/commands/actions/selectFile_spec.js#L459 https://github.com/cypress-io/cypress/blob/develop/packages/driver/cypress/fixtures/files-form.html#L33

My guess is that you’re setting {force: true} on the first argument, rather than the second.

// Correct!
cy.get('#hidden').selectFile({ contents: '@foo' }, { force: true })

// Incorrect!
cy.get('#hidden').selectFile({ contents: '@foo', force: true })

This is something we could have made more explicit in the migration guide. Basically - the first argument is the file/files being uploaded (file name, contents), and the second argument configures how the command behaves (force, action, timeout).

If you’re still seeing an issue after verifying this, a reproducible example and a more detailed report would help us track down what’s going on.

[BlueWinds]

I have something like:

    cy.get("input[type=file]").selectFile("cypress/test-data/test.csv", {
      action: "select",
      force: true,
    });

With force: true this does find the element, but I get an exception thrown:

This sounds like a separate issue, likely related to reading the file from disk; I’d suggest opening a new ticket, and most importantly, provide a reproducible example. A complete test, preferably using a fork of https://app.circleci.com/pipelines/github/cypress-io/cypress-test-tiny will help us help you.