CODEWITHSUNDEEP
javascriptfile-uploadcypress
littlevahn
littlevahn

Reputation: 657

Cypress- SelectFile() Not working as expected in Chrome

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?

Upvotes: 6

Views: 3328

Answers (2)

littlevahn
littlevahn

Reputation: 657

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

Upvotes: 0

SianJebelius
SianJebelius

Reputation: 71

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.

Upvotes: 2

Related Questions