如何在cypress-file-upload中配置attachFile支持从downloads目录上传文件

cypress-file-upload的attachFile方法默认会把传入的相对路径自动拼接Cypress的fixtures目录（默认路径为cypress/fixtures）作为最终寻址路径，因此你传入的downloads/img.png会被解析为cypress/fixtures/downloads/img.png，导致找不到目标文件。

方案1：无需修改配置，先读文件再上传（推荐） #

通过cy.readFile直接读取downloads目录的文件，再将文件内容传入attachFile即可，使用Cypress.config('downloadsFolder')可以直接获取Cypress的下载目录路径，适配自定义下载路径的场景：

cy.readFile(`${Cypress.config('downloadsFolder')}/img.png`, 'base64')
  .then(fileContent => {
    cy.get('[data-cy="dropzone"]').attachFile(
      {
        fileContent,
        fileName: 'img.png',
        mimeType: 'image/png'
      },
      { subjectType: 'drag-n-drop' }
    )
  })

如果上传的是其他格式文件，只需对应修改mimeType参数即可，比如CSV文件用text/csv、PDF文件用application/pdf。

方案2：全局配置fixtures搜索路径（适合频繁从downloads上传的场景） #

你可以在cypress.config.js（旧版Cypress对应cypress.json）中修改fixtures目录配置，将项目根目录设为fixtures搜索根路径，之后传入相对项目根目录的路径即可寻址到downloads目录：

// cypress.config.js 配置示例
const { defineConfig } = require('cypress')

module.exports = defineConfig({
  fixturesFolder: '.', // 将fixtures根路径设为项目根目录
  // 其余原有配置保持不变
})

配置修改后，你的原有代码只需调整路径即可正常运行：

cy.get('[data-cy="dropzone"]')
  .attachFile('cypress/downloads/img.png', {subjectType: 'drag-n-drop' });

注意：该方案会修改fixtures的全局寻址规则，原有fixtures目录下的文件引用需要同步调整为cypress/fixtures/xxx的路径格式。

内容的提问来源于stack exchange，提问作者JohnPix