Playwright UI中setInputFiles文件上传失败问题求助

针对Mac M1环境下，Playwright UI运行图片上传测试失败的问题，给出以下实用方案：

• 用绝对路径替换相对路径
  Playwright UI的工作目录可能和VS Code运行时不同，相对路径会导致文件定位失败。借助Node.js的path模块生成绝对路径：

  const path = require('path');
  const imageAbsolutePath = path.resolve(__dirname, './test-utils/image.png');
  await page.setInputFiles('input[data-test-id="front-file"]', imageAbsolutePath);
  

• 核对Playwright UI的工作目录
  打开Playwright UI的设置面板，确认默认工作目录与项目根目录一致。若不一致，手动调整到项目根目录，确保相对路径能正确解析。

• 禁用Blob代理
  错误日志里的异常Blob URL（https://pw-blob--http//localhost:...）表明Playwright UI的Blob代理逻辑可能出了问题。可以通过两种方式禁用：

  1. 启动Playwright UI时添加参数：

     playwright test --ui --no-blob-proxy
     

  2. 在playwright.config.ts中配置：

     import { defineConfig } from '@playwright/test';
     
     export default defineConfig({
       use: {
         blobProxy: false,
       },
     });
     

• 检查文件权限
  确保test-utils/image.png拥有可读权限，避免Playwright UI进程无法访问文件。终端执行以下命令查看并设置权限：

  # 查看权限
  ls -l ./test-utils/image.png
  # 添加读权限（如果需要）
  chmod +r ./test-utils/image.png
  

• 更新Playwright至最新版本
  这类环境兼容性问题可能已在新版本修复，执行以下命令更新：

  npm install @playwright/test@latest
  npx playwright install
  

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