如何使用 Cypress 上传 txt 文件以进行 API 测试 - XMLHTTPRequest？

Question

我正在尝试测试将上传文件并在 cypress 中给出 200 响应状态代码的端点。根据一些研究，cy.request 不能用于为 multipart/form-data 上传文件，因此我们需要使用 XMLHttp 来上传此类文件。我创建了以下文件来测试 api 但它不起作用。有人可以帮助我的代码有什么问题吗？谢谢。

在 support/commands.ts 下添加了以下代码（我需要 header 才能从身份验证端点传递令牌）

// Performs an XMLHttpRequest instead of a cy.request (able to send data as FormData - multipart/form-data)
Cypress.Commands.add('multipartFormRequest', (method,URL, formData,headers, done) => {
        const xhr = new XMLHttpRequest();
        xhr.open(method, URL);
        xhr.setRequestHeader("accept", "application/json");
        xhr.setRequestHeader("Content-Type", "multipart/form-data");
    if (headers) {
        headers.forEach(function(header) {
            xhr.setRequestHeader(header.name, header.value);
        });
    }
        xhr.onload = function (){
            done(xhr);
        };
        xhr.onerror = function (){
            done(xhr);
        };
        xhr.send(formData);
})

调用 multipartFormRequest 的测试文件：

const fileName = 'test_file.txt';
                    const method = 'POST';
                    const URL = "https://fakeurl.com/upload-file";
                    const headers = api.headersWithAuth(`${authToken}`);
                    const fileType = "application/text";

                    cy.fixture(fileName, 'binary').then((res) => {
                        const blob = Cypress.Blob.binaryStringToBlob(res, fileType);
                            const formData = new FormData();
                            formData.append('file', blob, fileName);

                            cy.multipartFormRequest(method, URL, headers, formData, function (response) {
                                expect(response.status).to.equal(200);
                            })
                        })

我收到此错误消息：- 现在，我得到的状态代码为 0。

Answer 1

使用

const blob = Cypress.Blob.binaryStringToBlob(res, fileType);

并删除 .then().

见Cypress.Blob

History

Version 5.0.0
Changes:
Return type of arrayBufferToBlob, base64StringToBlob, binaryStringToBlob, and dataURLToBlob methods changed from Promise<Blob> to Blob

Answer 2

describe("Upload image", () => {
it("upload first image", () => {

    const fileName = "image.jpeg";
    const method = "POST";
    const url = "https://api-demo.com/1";
    const fileType = "image/jpeg";
    cy.fixture(fileName, "binary")
        .then((txtBin) => Cypress.Blob.binaryStringToBlob(txtBin))
        .then((blob) => {
            const formData = new FormData();
            formData.append("image_data", blob, fileName);
            formData.append("image_format", "jpeg");
            cy.form_request(method, url, formData, function (response) {
                expect(response.status).to.eq(200)

            }
            );

        })

});

});

Cypress.Commands.add('form_request', (method, url, formData, done) => {
const xhr = new XMLHttpRequest();
xhr.open(method, url);
   xhr.setRequestHeader("device", "331231");
    xhr.setRequestHeader("city", "bangalore");
xhr.onload = function () {
    done(xhr);
};
xhr.onerror = function () {
    done(xhr);
};
xhr.send(formData);

})

如何使用 Cypress 上传 txt 文件以进行 API 测试 - XMLHTTPRequest？

How to Upload txt file with Cypress for API Testing - XMLHTTPRequest?

javascript

blob

file-upload

typescript

cypress