javascript - 如何使用 Cypress 测试文件输入？

Question

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

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

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

Answer 1

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文件夹下