4

I need to upload a file, but the thing is that the button doesn't have the tag input and attr type="file". How do I solve this? The DOM: enter image description here

I tried:

cy.contains('div#dropdown-grouped', "Bon d'intervention").siblings('div.d-none').find('input[type="file"]') 
    .selectFile('cypress/fixtures/bon.pdf', {force: true})

But this returns a statusCode 422

Also tried:

const filePath = 'My reportis.jpg'
    cy.contains('#dropdown-group-1', "Bon d'intervention").attachFile(filepath)

But this obviously does nothing.

What if I would change the tag of the button from button to input, and add an attr type="file", would that work? If yes, how do you I change the tag with cypress?

Thank you very much!

Solution:

cy.contains('#dropdown-group-1', "Bon d'intervention").click()
cy.get('input[type="file"]').selectFile('cypress/fixtures/bon.pdf', {force: true})
Andrei Nico
  • 71
  • 6

1 Answers1

0

Your first code is correct,

cy.contains('div#dropdown-grouped', "Bon d'intervention")
  .siblings('div.d-none')
  .find('input[type="file"]')
  .selectFile('cypress/fixtures/Call order.pdf', {force: true})

Status code 422 is a response from the server, so selectFile() worked and the app fired a POST, but the server did not like what it was given.

422 Unprocessable Entity

The HyperText Transfer Protocol (HTTP) 422 Unprocessable Entity response status code indicates that the server understands the content type of the request entity, and the syntax of the request entity is correct, but it was unable to process the contained instructions.

From further discussion, it looks like following the steps a user takes gives a working test, which means adding a button click() before the selectFile().

This is the final working test:

cy.contains('#dropdown-group-1', "Bon d'intervention").click() 

cy.get('input[type="file"]')
  .selectFile('cypress/fixtures/bon.pdf', {force: true})
Fody
  • 23,754
  • 3
  • 20
  • 37
  • It's not the case, even if I change the file to .jpg, it returns 422 =( I believe is something related to the fact that the server doesn't know which specific option I'm selecting to upload the file for. Because the dropdown has several options that allows to upload a file, and each option has it's card to display the file. – Andrei Nico Jul 28 '22 at 08:31
  • What if I would change the tag of the button from button to input, and add an attr type="file", would that work? If yes, how do you I change the tag with cypress? – Andrei Nico Jul 28 '22 at 08:37
  • I think the element tags are ok, since an upload get's sent to the server - you don't have a problem there. I see what you mean about the button doing something else - try `.click()` the button before or after adding the file - what action does the user see? He obviously has a menu in front of him, does he click one option then select a file? That would be the order of actions Cypress needs to take. – Fody Jul 28 '22 at 08:58
  • So the right way to do it in my case was to click on the button, and then get the input type file and .selectFile. Fody please update your answer so I can accept it: cy.contains('#dropdown-group-1', "Bon d'intervention").click() cy.get('input[type="file"]').selectFile('cypress/fixtures/bon.pdf', {force: true}) – Andrei Nico Jul 28 '22 at 12:52
  • Good news, have updated and removed incorrect note about file type. I suspect the `click()` causes additional headers to be added to the POST call. – Fody Jul 28 '22 at 20:24