Cypress- SelectFile() Not working as expected in Chrome

user_327339 0
Viewed 844

Cypress Version: 9.5.0
Chrome Version: 98

Ive been trying to use cy.selectFile() to upload a file in Cypress test. The following code looks as such:

cy.get('#new-project-photo', { force: true }).selectFile({
    contents: 'cypress/fixtures/media/003_StreetView.jpg',
    fileName: 'image01.jpg',
    mimeType: 'image/jpeg',
}, { force: true });

The HTML of the File Input looks as such:

<input multiple="multiple" id="new-project-photo" 
data-file-type="image" data-max-size="10485760" data-callback="true" 
type="file" name="file" 
data-url="https://api.cloudinary.com/v1_1/pxd/auto/upload" 
data-form-data="{&quot;allowed_formats&quot;:&quot;jpg,gif,png,jpeg&quot;,&quot;callback&quot;:&quot;https://kf.pxs-staging.com/cloudinary_cors.html&quot;,&quot;timestamp&quot;:1645550617,&quot;signature&quot;:&quot;47dd768ebfad68ebce2c8c5bc9b1da08777f69f9&quot;,&quot;api_key&quot;:&quot;421553125867598&quot;}" 
data-cloudinary-field="photos[image]" class="cloudinary-fileupload">

The code when running the test through FF runs as expected and the file is uploaded with a 200 on the post request. However when running the test through Chrome. I get a 400 with an error of {"error":{"message":"Missing required parameter - file"}} (Coming from server). The upload does work as expected when manually doing the upload in chrome.

The URL it sends the POST to is a different domain then the base url of the tested site. Could this be the cause? Im also curious about having this in the config: "chromeWebSecurity": false, Which is needed to load the site properly in chrome.

Ive also tried wrapping the image in a fixture first, same issue.

Anyone know what i might be doing wrong and why it only seems to work in FF?

cypress file-upload javascript
2 Answers

Since you are selecting the input with force: true (meaning that the actual input element is hidden from view), one possibility is that perhaps the input that is being referred doesn't have the requirements in place for the selectFile to succeed. Perhaps in Firefox the input type is inferred from context while in Chrome it would need to be explicitly set.

Have you checked that the element #new-project-photo passed to selectFile satisfies this requirement specifically (from the Cypress docs linked above)?

a single input element with type="file", or a label element attached to one

If you could post the element and its context that could help further recreate this scenario and allow testing. Right now from the information available it's not possible to recreate this problem reliably.

user_181103230

For anyone who comes across this issue, make sure you have the latest version. As of today (v9.5.1) seems to have fixed the issue i was having. Its adding images now with no issues. Chrome is also on version 99

Thanks everyone

user_3273390
Related