1

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

在此处输入图像描述

我需要做什么：

  1. 开放模态
  2. 附上文件
  3. 填写所有字段
  4. 单击提交按钮，但它被禁用，因为未附加失败

以及它在代码中的外观：

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

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

4

2 回答 2

3

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

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()
 }
于 2021-09-10T12:17:16.530 回答
3

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

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

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})
于 2021-09-10T22:12:23.570 回答