使用 Cypress.io 进行 E2E 测试的文件上传错误 API

Question

我正在测试带有 Cypress.io 的门户，它具有文件上传功能。

但是我的文件总是上传失败，因为API调用出错了。

正确API调用：
**

POST 200 /etl/v1.0.0/datauploaderetl/spaces/etl_jyddc0tx/data-files

**

但是通过Cypress上传时，下面是URL： **

POST 404 /etl/v1.0.0/datauploaderetl/data-files

** 您可以清楚地看到，API 是不正确的。我在这里添加了等待，但它仍然不起作用。以下是一段代码：

cy.fixture(fileName1).then(fileContent => {
        cy.get('input[type="file"]').attachFile({
            fileContent: fileContent.toString(),
            fileName: fileName1,
            mimeType: fileType
        })
    });
    cy.waitUntil(() => cy.get(":nth-child(98) > .modal > .modal-lg > .modal-content > .modal-body")
        .should('contain.text', 'Status: completed')
    );

请帮忙！

Answer 1

根据文档，这是上传文件的方式：

cy.fixture('filepath').as('filetoupload')
cy.get('input[type=file]').then(function($input) {
  // convert the logo base64 string to a blob
  const blob = Cypress.Blob.base64StringToBlob(this.filetoupload, fileType)
  $input.fileupload('add', { files: blob })
})

或

cy.fixture('filepath').as('filetoupload')

cy.get('input[type=file]').then(function(el) {
  // convert the logo base64 string to a blob
  const blob = Cypress.Blob.base64StringToBlob(this.filetoupload,fileType )

  const file = new File([blob], '<path>', { type: fileType })
  const list = new DataTransfer()

  list.items.add(file)
  const myFileList = list.files

  el[0].files = myFileList
  el[0].dispatchEvent(new Event('change', { bubbles: true }))
})

https://docs.cypress.io/api/utilities/blob.html#Image-Fixture

Answer 2

在 Command.js，添加以下代码：

let LOCAL_STORAGE_MEMORY = {};

Cypress.Commands.add("saveLocalStorage", () => {
    Object.keys(localStorage).forEach(key => {
        LOCAL_STORAGE_MEMORY[key] = localStorage[key];
    });
});

Cypress.Commands.add("restoreLocalStorage", () => {
    Object.keys(LOCAL_STORAGE_MEMORY).forEach(key => {
        localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key]);
    });
});

然后在测试用例文件中，分别在 beforeEach 和 afterEach 块下面添加：

 beforeEach(() => {
        cy.restoreLocalStorage();
    })

    afterEach(() => {
        cy.saveLocalStorage();
    })

这将解决 Cypress 在浏览器中清除“本地存储”的问题。

使用 Cypress.io 进行 E2E 测试的文件上传错误 API

Wrong API on file-upload using Cypress.io for E2E testing

browser-automation

ui-automation

node.js

e2e-testing

cypress