Question

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

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

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

Answer 1

使用这种方法/黑客你可以实际做到： https://github.com/javieraviles/cypress-upload-file-post-form

它基于前述线程https://github.com/cypress-io/cypress/issues/170

的不同答案

第一种情况（upload_file_to_form_spec.js）：

我想测试一个必须在之前选择/上传文件的UI 提交表格。在＆＃34; commands.js＆＃34;中包含以下代码柏树内的文件支持文件夹，因此命令cy.upload_file（）可以在任何测试中使用：

Cypress.Commands.add('upload_file', (fileName, fileType, selector) => {
    cy.get(selector).then(subject => {
        cy.fixture(fileName, 'hex').then((fileHex) => {

            const fileBytes = hexStringToByte(fileHex);
            const testFile = new File([fileBytes], fileName, {
                type: fileType
            });
            const dataTransfer = new DataTransfer()
            const el = subject[0]

            dataTransfer.items.add(testFile)
            el.files = dataTransfer.files
        })
    })
})

// UTILS
function hexStringToByte(str) {
    if (!str) {
        return new Uint8Array();
    }

    var a = [];
    for (var i = 0, len = str.length; i < len; i += 2) {
        a.push(parseInt(str.substr(i, 2), 16));
    }

    return new Uint8Array(a);
}

然后，如果你想上传一个excel文件，填写其他输入并提交表格，测试将是这样的：

describe('Testing the excel form', function () {
    it ('Uploading the right file imports data from the excel successfully', function() {

    const testUrl = 'http://localhost:3000/excel_form';
    const fileName = 'your_file_name.xlsx';
    const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
    const fileInput = 'input[type=file]';

    cy.visit(testUrl);
    cy.upload_file(fileName, fileType, fileInput);
    cy.get('#other_form_input2').type('input_content2');
    .
    .
    .
    cy.get('button').contains('Submit').click();

    cy.get('.result-dialog').should('contain', 'X elements from the excel where successfully imported');
})

}）

Answer 2

赛普拉斯尚不支持测试文件输入元素。测试文件输入的唯一方法是：

发布原生事件（赛普拉斯在其Roadmap上）。
了解您的应用程序如何使用File API处理文件上传，然后将其存根。它可能但不够通用，无法提供任何具体的建议。

See this open issue for more detail

Answer 3

对我来说，更简单的方法是使用此cypress file upload package

安装：

npm install --save-dev cypress-file-upload

然后将此行添加到项目的cypress/support/commands.js：

import 'cypress-file-upload';

现在您可以这样做：

const fixtureFile = 'photo.png';
cy.get('[data-cy="file-input"]').attachFile(fixtureFile);

photo.png必须位于cypress/fixtures/

有关更多示例，请查看Usage section on README of the package.

Answer 4

也基于先前提到的github issue，非常感谢那里的人们。

最初被我接受的答案是有效的，但是在尝试处理JSON文件时遇到了字符串解码问题。还感觉到必须处理十六进制需要额外的工作。

下面的代码对JSON文件的处理略有不同，以防止编码/解码问题，并使用赛普拉斯内置的Cypress.Blob.base64StringToBlob：

/**
 * Converts Cypress fixtures, including JSON, to a Blob. All file types are
 * converted to base64 then converted to a Blob using Cypress
 * expect application/json. Json files are just stringified then converted to
 * a blob (prevents issues with invalid string decoding).
 * @param {String} fileUrl - The file url to upload
 * @param {String} type - content type of the uploaded file
 * @return {Promise} Resolves with blob containing fixture contents
 */
function getFixtureBlob(fileUrl, type) {
  return type === 'application/json'
    ? cy
        .fixture(fileUrl)
        .then(JSON.stringify)
        .then(jsonStr => new Blob([jsonStr], { type: 'application/json' }))
    : cy.fixture(fileUrl, 'base64').then(Cypress.Blob.base64StringToBlob)
}

/**
 * Uploads a file to an input
 * @memberOf Cypress.Chainable#
 * @name uploadFile
 * @function
 * @param {String} selector - element to target
 * @param {String} fileUrl - The file url to upload
 * @param {String} type - content type of the uploaded file
 */
Cypress.Commands.add('uploadFile', (selector, fileUrl, type = '') => {
  return cy.get(selector).then(subject => {
    return getFixtureBlob(fileUrl, type).then(blob => {
      return cy.window().then(win => {
        const el = subject[0]
        const nameSegments = fileUrl.split('/')
        const name = nameSegments[nameSegments.length - 1]
        const testFile = new win.File([blob], name, { type })
        const dataTransfer = new win.DataTransfer()
        dataTransfer.items.add(testFile)
        el.files = dataTransfer.files
        return subject
      })
    })
  })
})

Answer 5

以下功能对我有用，

A11:B11

Answer 6

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

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

注意：testPicture.png必须在柏树的夹具文件夹中

Answer 7

在我的情况下，我进行了客户端和服务器端文件验证，以检查文件是JPEG还是PDF。因此，我必须创建一个上传命令，该命令将从Fixtures中读取二进制文件，并准备一个带有文件扩展名的Blob。

Cypress.Commands.add('uploadFile', { prevSubject: true }, (subject, fileName, fileType = '') => {
  cy.fixture(fileName,'binary').then(content => {
    return Cypress.Blob.binaryStringToBlob(content, fileType).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.wrap(subject).trigger('change', { force: true });
    });
  });
});

然后将其用作

cy.get('input[type=file]').uploadFile('smiling_pic.jpg', 'image/jpeg');

smiling_pic.jpg将在装置文件夹中

Answer 8

在测试文件夹中的commands.ts文件中添加：

//this is for typescript intellisense to recognize new command
declare namespace Cypress {
  interface Chainable<Subject> {
   attach_file(value: string, fileType: string): Chainable<Subject>;
  }
}

//new command
Cypress.Commands.add(
  'attach_file',
{
  prevSubject: 'element',
},
(input, fileName, fileType) => {
    cy.fixture(fileName)
      .then((content) => Cypress.Blob.base64StringToBlob(content, fileType))
      .then((blob) => {
        const testFile = new File([blob], fileName);
        const dataTransfer = new DataTransfer();

        dataTransfer.items.add(testFile);
        input[0].files = dataTransfer.files;
        return input;
      });
  },
);

用法：

cy.get('[data-cy=upload_button_input]')
      .attach_file('./food.jpg', 'image/jpg')
      .trigger('change', { force: true });

另一种选择是使用cypress-file-upload，该版本在4.0.7版中存在错误（两次上传文件）

Answer 9

class Repository {

    suspend fun fetchNameValue(nameValue: String) {
    NameNetworkDataSource.fetchCurrentValue(valueCode = nameValue)
    val value = NameNetworkDataSource.fetchCurrentValue(valueCode = nameValue)
}
}

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

9 个答案: