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

[Jacek-fstack]

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

[Deop]

We face the same issue. It's not possible to use new .selectFile() on hidden file input.

[CallumHoward]

+1 for my test suite too.

[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.

[Jacek-fstack]

It's still broken

<input type="file" style="display: none" id="field219687" name="field219687" size="30" class="xxField xxUpload uploadTypes-jpg,jpeg,gif,png,bmp,tif,psd,pdf,doc,docx,csv,xls,xlsx,txt,mp3,mp4,aac,wav,au,wmv,avi,mpg,mpeg,zip,gz,rar,z,tgz,tar,sitx">

I'm not sure what else I can provide. Obviously I can't give you access to our staging :)

[BlueWinds]

You could provide the actual javascript of the test you're executing, that would be helpful. Can you create a fork of https://github.com/cypress-io/cypress-test-tiny demonstrating the failure? Also the browser and browser version you're seeing the issue with.

Here's the test I'm running, which seems to work, using the exact HTML you've provided:

      it.only('can force on hidden inputs', () => {
        cy.document().then(doc => {
          doc.body.innerHTML = `<input type="file" style="display: none" id="field219687" name="field219687" size="30" class="xxField xxUpload uploadTypes-jpg,jpeg,gif,png,bmp,tif,psd,pdf,doc,docx,csv,xls,xlsx,txt,mp3,mp4,aac,wav,au,wmv,avi,mpg,mpeg,zip,gz,rar,z,tgz,tar,sitx" />`
        })
        cy.get('#field219687').selectFile({ contents: '@foo' }, { force: true })
      })

Can you change this test, to demonstrate the failure you're seeing? This test does not time out, so there's something more going on here that we need to figure out - it's not as simple as 'hidden inputs don't work'.

[Jacek-fstack]

oh shucks, it actually did work, my bad! I didn't realize I had to change one more thing - I changed the file name [change of the path] but didn't change what I'm looking for. So Force works, Thanks for the help!

[BlueWinds]

Glad you figured it out. going to close this issue as resolved. :)

[CallumHoward]

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:

TypeError: Cannot read properties of null (reading 'stream')

With cypress-file-upload the test worked as expected with:

    cy.get("input[type=file]").attachFile("test.csv", { subjectType: "input" });

The target DOM looks like

<input accept=".csv" multiple="" type="file" autocomplete="off" tabindex="-1" data-anchor="csv-selector-input" style="display: none;">

[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.

[Karla-Reyes]

hi @BlueWinds , just wanna ask if you know if your issue with uploading a .csv file using selectFile() has already been fixed? if no, were you able to have a workaround aside from lowering your cypress version. Hope to hear from you. Thanks

[BlueWinds]

hi @BlueWinds , just wanna ask if you know if your issue with uploading a .csv file using selectFile() has already been fixed? if no, were you able to have a workaround aside from lowering your cypress version. Hope to hear from you. Thanks

I'm the author of selectFile and part of the Cypress team, not the person who had an issue that needed to be fixed. Jacek, the initial reporter of this issue, did figure out a solution for his problem, which he explained above.

For CallumHoward's issue, I don't believe they ever opened a new one, so not sure if they figured things out or not.