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

Question

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

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

正确的API调用：

**

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

POST

**

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

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

**您可以清楚地看到，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

在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在浏览器中清除“本地存储”的问题。

Answer 2

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

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