通过请求通过Cypress.io上传文件

Question

鉴于这种简单的形式

<form action="/upload_file" method="POST" enctype="multipart/form-data" id="upload_file_form">
    <input type="file" name="file" required>
    <input type="text" placeholder="Select file" disabled>
    <input type="submit" value="upload">
</form>

由于cypress.io不支持本机事件（无法选择文件），因此我必须使用后请求。

cypress.io中的请求结构如下所示

cy.request({
    method: 'POST',
    url: '/some/url',
    form: true,
    body: { ... },
    headers:{ ... }
})

我想知道如何发送简单的* .txt

任何建议表示赞赏！

Answer 1

如果它可以帮助某人 https://github.com/javieraviles/cypress-upload-file-post-form

第二种情况（send_form_data_with_file_in_post_request_spec.js）：

我想自己构建 FormData（ new FormData(), formData.append/formData.set ）并直接将它与 POST 请求一起发送到后端或使用我创建的 FormData 提交表单。对于这种情况，传输的数据必须与表单的 submit() 格式相同，其类型设置为“multipart/form-data”。查看 MDN 网络文档以了解如何构建 FormData：使用 FormData 对象，并知道此时（Cypress 2.1.0）cy.request 不支持 FormData（multipart/form-data）所以我们将需要一个 XMLHttpRequest，测试可以执行如下。将以下代码包含在 cypress 支持文件夹内的“commands.js”文件中，以便可以在任何测试中使用命令 cy.form_request()：

// Performs an XMLHttpRequest instead of a cy.request (able to send data as 
// FormData - multipart/form-data)
Cypress.Commands.add('form_request', (method, url, formData, done) => {
    const xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
        done(xhr);
    };
    xhr.onerror = function () {
        done(xhr);
    };
    xhr.send(formData);
})

然后，如果您想发送与以前相同的表单（包含 excel 文件和其他普通输入的表单）但自己构建它并将其直接发送到服务器，则测试将是这样的：

describe('Testing the API', function () {

    it('Receives valid FormData and proccesses the information correctly', 
        function () {

    /*
    The reason why this test may look a bit tricky is because the backend endpoint is expecting the 
    submission of a web Form (multipart/form-data), not just data within a POST. The "cy.request()" 
    command doesn't support sending a web Form as a body in a POST request, so the test uses a support 
    command that has been created to perform a genuine XMLHttpRequest where a web Form can be placed.
    */

    //Declarations
    const fileName = 'your_excel_file.xlsx';
    const method = 'POST';
    const url = 'http://localhost:3000/api/excel_form';
    const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
    const inputContent2 = 'input_content2';
    const expectedAnswer = '{"msg":"X elements from the excel where successfully imported"}';

    // Get file from fixtures as binary
    cy.fixture(fileName, 'binary').then( (excelBin) => {

        // File in binary format gets converted to blob so it can be sent as Form data
        Cypress.Blob.binaryStringToBlob(excelBin, fileType).then((blob) => {

            // Build up the form
            const formData = new FormData();
            formData.set('file', blob, fileName); //adding a file to the form
            formData.set('input2', inputContent2); //adding a plain input to the form
            .
            .
            .
            // Perform the request
            cy.form_request(method, url, formData, function (response) {
                expect(response.status).to.eq(200);
                expect(expectedAnswer).to.eq(response.response);
            });

        })

    })

})

})