cypress-file-upload 不要将文件附加到其中一个字段

Question

我正在使用 cypress-file-upload 将文件附加到输入字段。在不同的地方对所有这些输入使用相同的方法（在我的例子中是不同的模态windows）。但是在一个地方文件由于某种原因没有附加，在执行的步骤中附加了文件但在模态中它没有显示（红色区域）。

我需要做的事情：

打开模式
附加文件
填写所有字段
点击提交按钮，但它被禁用，因为没有附加失败

它在代码中的样子：

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()
}

已成功填写所有字段，但未附加文件。有什么想法吗？

Answer 1

这是我用来上传文件的自定义命令，它从未让我失望:)

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
   });
  });
 });

认为这对你有用

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()
}

或者您可以只使用我给出的第一个示例作为自定义命令并执行：

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()
 }

Answer 2

日志告诉您文件实际上已附加。（还要在开发控制台中检查，输入元素将有一个非空文件数组）。

您似乎需要触发更改或输入事件来告诉应用程序已附加某些内容

cy.get('input[type=file]').attachFile(file)
  .trigger('change')

或

cy.get('input[type=file]').attachFile(file)
  .trigger('input')

否则，请尝试强制单击按钮

cy.get(this.modal_proceedButton).click({force:true})

cypress-file-upload 不要将文件附加到其中一个字段

cypress-file-upload do not attach a file to one of the fields

javascript

e2e-testing

cypress

cypress-file-upload