如何使用赛普拉斯测试文件输入？

Question

如何编写需要与文件输入 DOM 元素交互的 e2e 流测试？

如果它是文本输入，我可以将其作为 DOM 组件与其交互（检查值、设置值）等。但是如果我有一个文件输入元素，我猜测在我可以打开对话框选择一个文件之前，交互是有限的。我无法继续前进并选择我要上传的文件，因为对话框是本地的，而不是某些浏览器元素。

那么我该如何测试用户是否可以从我的站点正确上传文件呢？我正在使用 Cypress 编写我的 e2e 测试。

原文由 sidoshi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

从 9.3.0 开始，您可以使用 selectFile 。

 cy.get('input[type=file]').selectFile('cypress/fixtures/file.json')

看：

• https://github.com/cypress-io/cypress/issues/170
• https://cypress.io/blog/2022/01/18/uploading-files-with-selectfile/
• https://docs.cypress.io/guides/references/migration-guide#Migrating-from-cypress-file-upload-to-selectFile

原文由 thisismydesign 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

it('Testing picture uploading', () => {
    cy.fixture('testPicture.png').then(fileContent => {
        cy.get('input[type="file"]').attachFile({
            fileContent: fileContent.toString(),
            fileName: 'testPicture.png',
            mimeType: 'image/png'
        });
    });
});

使用cypress文件上传包： https ://www.npmjs.com/package/cypress-file-upload

注意：testPicture.png 必须在 cypress 的 fixture 文件夹中

原文由 Muhammad Bilal 发布，翻译遵循 CC BY-SA 4.0 许可协议