Playwright WebKit测试在VS Code失败但终端正常的原因及解决方法

以下是针对该问题的排查和解决步骤：

• 检查环境变量差异
  外部终端和VS Code终端的环境变量可能存在差异，比如DISPLAY、XAUTHORITY这类和图形渲染相关的变量，或者Playwright的专属环境变量。可以在两个终端分别执行printenv | grep -E "(DISPLAY|PLAYWRIGHT|XAUTHORITY)"对比输出，确保VS Code终端的环境变量和外部终端一致。如果发现DISPLAY变量缺失或不一致，可在VS Code终端手动设置（比如export DISPLAY=:0，根据你的实际值调整）后重新运行测试。

• 强制重装Playwright依赖与浏览器
  可能是VS Code环境下的WebKit浏览器文件损坏或版本不匹配，在VS Code终端执行以下命令：

  npx playwright install --force
  npm install
  

  强制重新安装对应版本的WebKit浏览器，并同步项目依赖，排除文件损坏或依赖不一致的问题。

• 调整WebKit启动参数
  给WebKit添加启动参数禁用可能引发内部错误的特性，示例代码如下：

  const { test, expect } = require('@playwright/test');
  
  test.use({
    browserName: 'webkit',
    launchOptions: {
      args: ['--disable-gpu', '--no-sandbox'],
      // 可选：关闭无头模式查看浏览器实际运行状态，便于排查错误
      // headless: false
    }
  });
  
  test('get started link test', async ({ page }) => {
    await page.goto('https://playwright.dev/');
    await page.getByRole('link', { name: 'Get started' }).click({ force: true });
  });
  

  通过--disable-gpu禁用GPU加速，--no-sandbox关闭沙箱模式，这些参数常能解决WebKit在特定环境下的内部错误。

• 排查VS Code扩展冲突
  暂时禁用VS Code中所有非必要扩展（尤其是浏览器调试、测试工具类扩展），然后重新运行测试，确认是否是扩展干扰了Playwright的运行环境。

• 更新VS Code至最新稳定版
  旧版本VS Code可能存在终端环境隔离或进程管理的问题，更新到最新版本后再测试WebKit用例的运行情况。

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