Question

我目前正在深入研究Cypress，并为应用程序编写e2e测试。在测试文件上传功能时，我似乎遇到了障碍。由于我是质量检查工程师的初学者身份，并且在此特定问题上缺乏互联网流量，因此我已经陷入僵局。我在文档中遇到了Cypres.Blob。不幸的是，没有太多的文档记录，并且我无法将示例应用于我需要学习的东西。

describe（'File Upload Test'，（）=> {

it('should upload a file', () => {
    let testfile = cy.fixture('../fixtures/cypresstest.txt')
    cy.get('input[type=file]').then(($input) => {
    return Cypress.Blob.base64StringToBlob(testfile, 'file/txt')
        .then((blob) => {
        $input.fileupload('add', { files: blob })
        })
    })
})

}）;

Answer 1

我正在像这样测试我们的文件上传服务：

Cypress.Commands.add('uploadFile', (fileNamePath, fileName, fileType = ' ', selector) => {
cy.get(selector).then(subject => {
    cy.fixture(fileNamePath, 'base64')
        .then(Cypress.Blob.base64StringToBlob)
        .then(blob => {
            const el = subject[0]
            const testFile = new File([blob], fileName, {
                type: fileType
            })
            const dataTransfer = new DataTransfer()
            dataTransfer.items.add(testFile)
            el.files = dataTransfer.files
        })
})

}）

然后进入规格文件。点击上传按钮，然后等待文件加载：

cy.server().route('POST', api-upload-url).as('loadUp')
        cy.uploadFile('./pathToFile/' + fileName, fileName, fileType, fileInput);
        cy.get('.btn-upload.mat-raised-button.mat-primary').click()
        cy.wait('@loadUp').then((response) => {
            expect(response.method).to.eq('POST')
            expect(response.status).to.eq(200)
            expect(response.response.body.status).to.eq('OK')
        })

还会检查所需的响应。

这不是超级幻想和优化。但是它可以在3.1.5和3.2.0中使用。它可以使用无头和无头电子59

Answer 2

引起我注意的是，赛普拉斯3.1.5尚不支持测试文件上传功能。

Answer 3

我最近在Laravel + React项目中遇到了这个问题，我发现一个NPM模块对于处理此问题非常有用，该模块称为cypress-file-upload。

用法

NPM安装cypress-file-upload
导入/support/commands.js中：import'cypress-file-upload';
阅读cypress-file-upload Recipes，了解如何使用插件测试文件上传：

希望这对其他人有帮助！非常感谢该模块的作者。

如何在赛普拉斯中测试文件上传功能？

3 个答案: