0
559
Visualizaçõescypress-file-upload do not attach a file to one of the fields
I'm using cypress-file-upload for attaching files to input fields. Using the same approach for all of these inputs in different places (in different modal windows in my case). But in one place files do not attach for some reason, in executed steps file is attached but in modal it isn't shown (red zone).
What I need to do:
- open modal
- attach a file
- fill all fields
- click on the Submit button, but it's disabled because fails isn't attached
And how it looks in code:
addUpdates(name, family, version, notes, file) {
cy.get(this.topMenu_addButton).click()
cy.get('.upload-field').should('be.visible')
cy.get('input[type=file]').attachFile(file)
cy.get(this.modal_field).should('be.visible').fill(name)
cy.get(this.modal_familyField).fill(family)
cy.get(this.modal_versionField).fill(version)
cy.get(this.modal_notesField).fill(notes)
cy.get(this.modal_proceedButton).should('be.enabled').click()
}
All fields successfully filled, but file not attached. Any ideas?
2 Respostas
Responde à pergunta0
The log is telling you the file is actually attached. (Inspect also in dev console, the input element will have a non-empty files array).
It looks like you need to trigger a change or input event to tell the app something has been attached
cy.get('input[type=file]').attachFile(file)
.trigger('change')
or
cy.get('input[type=file]').attachFile(file)
.trigger('input')
Failing that, try to force the button click
cy.get(this.modal_proceedButton).click({force:true})
0
This is a custom command that I use to upload files and it has never failed me :)
Cypress.Commands.add("UploadFile", function () {
cy.fixture("somefile", "binary")
.then(Cypress.Blob.binaryStringToBlob)
.then((fileContent) => {
cy.get('someelement').attachFile({
fileContent,
filePath: "somefile",
fileName: "somefile",
do more stuff here
});
});
});
Think this should work for you
addUpdates(name, family, version, notes, file) {
cy.get(this.topMenu_addButton).click()
cy.get('.upload-field').should('be.visible')
cy.fixture("somefile", "binary")
.then(Cypress.Blob.binaryStringToBlob)
.then((fileContent) => {
cy.get('input[type=file]').attachFile({
fileContent,
filePath: "somefile",
fileName: "somefile",
cy.get(this.modal_field).should('be.visible').fill(name)
cy.get(this.modal_familyField).fill(family)
cy.get(this.modal_versionField).fill(version)
cy.get(this.modal_notesField).fill(notes)
cy.get(this.modal_proceedButton).should('be.enabled').click()
}
Or you can just use the first example I gave as a custom command and do:
addUpdates(name, family, version, notes, file) {
cy.get(this.topMenu_addButton).click()
cy.get('.upload-field').should('be.visible')
cy.UploadFile();
cy.get(this.modal_field).should('be.visible').fill(name)
cy.get(this.modal_familyField).fill(family)
cy.get(this.modal_versionField).fill(version)
cy.get(this.modal_notesField).fill(notes)
cy.get(this.modal_proceedButton).should('be.enabled').click()
}