When trying to click the upload button after uploading the file into the input field internal validation displays as File is Required in Cypress

Question

Below is the code i'm using to upload the file into the system from the test runner.

 it.only('Check the item upload file validations', () => {
    cy.get('[icon="fa fa-cloud-upload"]').click()
    cy.get('[id="itemListController"]',{force:true}).attachFile('itemfile.xlsx')
    cy.get('.p-float-label > [type="submit"]').click()
    // cy.pause()  
})

When the cypress the code executes , it displays a system internal validation as if the file is not being attached to the web page to be uploaded even though the file name is clearly being displayed in the input field.

Below is the element im trying to upload the file in to before clicking the submit button

<input _ngcontent-wul-c516="" id="itemListController" formcontrolname="itemListController" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" type="file" hidden="" class="ng-untouched ng-pristine ng-invalid">

score 0 · Answer 1 · answered Jun 13 '22 at 21:19

0

I notice in the HTML id="fileText" and formcontrolname="itemListController" but you have selector [id="itemListController"], so maybe

cy.get('[formcontrolname="itemListController"]').attachFile('itemfile.xlsx')

//or

cy.get('[id="fileText"]').attachFile('itemfile.xlsx')

There's no force option on cy.get() so you can take that out.

But it's not the whole story, you do end up with the file name in the input.

I notice ng-untouched is present which may be causing the validation problem. Try adding a blur

@property {boolean} $untouched True if control has not lost focus yet.

cy.get('[id="fileText"]').attachFile('itemfile.xlsx').blur()

answered Jun 13 '22 at 21:19

Fody

23,754
3
20
37

You are correct ! I've mistakenly inserted another element. i have edited the original question with the correct element included. also , i've tried the solution you mentioned which displayed as below. "cy.blur() can only be called when there is a currently focused element." – Avishka Perera Jun 14 '22 at 02:42
Try `.attachFile('itemfile.xlsx').focus().blur()` just to completely explore that avenue. – Fody Jun 14 '22 at 02:51
Other than that, it's a validation error message (see `ng-invalid` class) - do you have access to the source to see what validation is applied to the field. – Fody Jun 14 '22 at 02:52
Display as above – Avishka Perera Jun 14 '22 at 02:55
Also try forcing the click with `cy.get('.p-float-label > [type="submit"]').click({force:true})`. That may allow you to by-pass the validation error if you cannot clear it another way. – Fody Jun 14 '22 at 03:35
cy.blur() can only be called when there is a currently focused element. still being displayed. – Avishka Perera Jun 14 '22 at 03:59
See above `.focus().blur()`. – Fody Jun 14 '22 at 05:51
``` this.uploadItemForm = this.formBuilder.group({ itemListController: ['', Validators.required], file: [] }); ``` this is the source – Avishka Perera Jun 15 '22 at 08:15

score 0 · Answer 2 · answered Jun 15 '22 at 14:43

I was able to perform the file upload by using the below cypress method.

Cypress Documentation on .selectFile() Method

 it.only('Check the item upload file validations', () => {
    cy.get('[icon="fa fa-cloud-upload"]').click()
    cy.get('[id="itemListController"]').selectFile("cypress/fixtures/itemfile.xlsx",{force: true})
    cy.get('.p-float-label > [type="submit"]').click()
})

When trying to click the upload button after uploading the file into the input field internal validation displays as File is Required in Cypress

2 Answers2