如何在Playwright（TypeScript）中使用相对路径跨平台上传文件？

别担心，这个问题其实挺常见的！你遇到的ENOENT错误，本质是因为Node.js里的相对路径是基于你运行测试命令时的工作目录（CWD），而不是测试文件本身所在的目录。所以换个环境或者运行位置，相对路径就“失效”了。

要实现跨平台的文件路径引用，我们可以借助Node.js的path模块来构建基于当前测试文件的绝对路径，它会自动适配不同操作系统的路径分隔符。下面给你两种常用的实现方式：

方式一：如果你的项目用CommonJS模块（require语法） #

直接用__dirname（它代表当前文件所在的目录）配合path.resolve生成绝对路径：

const path = require('path');
const { test } = require('@playwright/test');

test('上传文件（CommonJS）', async ({ page }) => {
  // 生成基于当前测试文件所在目录的绝对路径
  const fileWithPath = path.resolve(__dirname, './abc.jpg');

  const [fileChooser] = await Promise.all([
    page.waitForEvent('filechooser'),
    page.getByRole('button', { name: 'Add a Photo' }).click(),
  ]);

  await fileChooser.setFiles([fileWithPath]);
  // 这里可以加后续的断言逻辑
});

方式二：如果你的项目用ES模块/TypeScript（import语法） #

因为ES模块里没有__dirname，我们需要借助import.meta.url来手动获取当前文件的路径，再生成目录：

import { test } from '@playwright/test';
import path from 'path';
import { fileURLToPath } from 'url';

// 先获取当前文件的绝对路径，再提取目录
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

test('上传文件（ES模块/TypeScript）', async ({ page }) => {
  const fileWithPath = path.resolve(__dirname, './abc.jpg');

  const [fileChooser] = await Promise.all([
    page.waitForEvent('filechooser'),
    page.getByRole('button', { name: 'Add a Photo' }).click(),
  ]);

  await fileChooser.setFiles([fileWithPath]);
});

为什么这样可行？ #

path.resolve会把你传入的相对路径（./abc.jpg）和当前测试文件的目录（__dirname）拼接成一个绝对路径，而且它会自动处理不同操作系统的路径分隔符（macOS/Linux用/，Windows用\），不管你在哪个平台运行测试，都能准确找到同目录下的abc.jpg文件。

这样你就可以放心把图片文件和测试文件放在一起提交到仓库，跨平台运行测试也不会再出问题啦！

备注：内容来源于stack exchange，提问作者Patrick Kenny