赛普拉斯：如何测试上传包含文件和子文件夹的文件夹？答案

【问题标题】：Cypress: How to test upload a folder with files and subfolders?赛普拉斯：如何测试上传包含文件和子文件夹的文件夹？
【发布时间】：2021-03-30 09:17:17
【问题描述】：

我在测试上传包含文件和子文件夹的文件夹时遇到问题。如果我将文件夹结构添加到夹具，则 cy.fixture() 命令无法识别这是我要上传的目录，但它会在目录中查找文件。我也尝试使用 cy.readFile() 但我无法使其工作。

我曾尝试创建这样的拖放命令：

Cypress.Commands.add('dragAndDropFolder', (fileUrl, type = '') => {
  return cy.readFile(fileUrl, 'binary')
    .then(Cypress.Blob.binaryStringToArrayBuffer)
    .then(blob => {
      const nameSegments = fileUrl.split('/');
      const name = nameSegments[nameSegments.length - 1];
      const testFile = new File([blob], name, { type });
      const event = {
        dataTransfer: {
          isDirectory: true,
          isFile: false,
          fullPath: `#${fileUrl}`,
          files: [testFile],
          items: [{ kind: 'file', type }],
          types: ['Files'],
        },
      };
      return cy
        .get('[data-test-dropzone="true"]')
        .first()
        .trigger('dragenter', event)
        .trigger('drop', event);
    });
});

另一件事我尝试使用我们不同的功能，即简单的上传按钮和 attachFile() 插件：

cy.readFile('client/testfolder', 'binary').then(file => {
          cy.get('#multiple_file_uploads_input').attachFile(file)
        });

拖放功能是用 Elixir 编写的，这就是数据传输的样子：

{
      isDirectory: true,
      isFile: false,
      fullPath: '#{path}',
      createReader() {
        return {
          sentEntries: false,
          readEntries(callback) {
            if (!this.sentEntries) {
              this.sentEntries = true;
              callback([#{Enum.join(entries, ",")}]);
            } else {
              callback([]);
            }
          },
        };
      },
    }

【问题讨论】：

标签： javascript testing upload cypress directory-structure

【解决方案1】：

至少在 Elixir 方面，fullPath: '#{path}', 将被fullPath: '/some/path', 之类的真实路径替换，因此您需要从 JavaScript 方面的路径中删除哈希 (#) fullPath: '#${fileUrl}',，可能只是fullPath: fileUrl,

【讨论】：