Playwright测试中非无头模式Chromium仅显示边框问题求助

问题描述 #

Windows 11的WSL2 Ubuntu环境中使用Playwright编写网站测试，配置Chromium为非无头（headless: false）模式后，浏览器仅显示边框、内容区域透明，生成的截图也无内容。但以下场景可正常工作：

• Chromium无头模式
• Firefox无论是否无头模式
• Playwright安装的Chromium单独运行（路径/xxx/xxxx/.cache/ms-playwright/chromium-1028/chrome-linux/chrome）

当前使用的playwright.config.ts配置：

import type { PlaywrightTestConfig } from '@playwright/test';
import dotenv from 'dotenv';
import path from 'path';

// Read from default ".env" file.
dotenv.config();

// Alternatively, read from "../my.env" file.
dotenv.config({ path: path.resolve('./my.env') });

const config: PlaywrightTestConfig = {
    use: {
        browserName: 'chromium',
        // channel: 'chrome',
        headless: false
    },
    webServer: {
        command: ' ~/.yarn/bin/netlify dev',
        port: 8888
    },
    testDir: './tests'
};

export default config;

解决方法 #

1. 校验WSL2的XServer配置 #

WSL2中GUI应用依赖XServer（如VcXsrv、GWSL），需确保：

• XServer处于运行状态，启动时勾选Disable access control选项
• 正确设置DISPLAY环境变量，执行以下命令并可将其添加到~/.bashrc或~/.zshrc中：

  export DISPLAY=$(cat /etc/resolv.conf | grep nameserver | awk '{print $2}'):0.0
  

2. 为Chromium添加启动参数 #

修改playwright.config.ts的use配置，添加绕过渲染限制的参数：

use: {
    browserName: 'chromium',
    // channel: 'chrome',
    headless: false,
    launchOptions: {
        args: [
            '--disable-gpu',
            '--no-sandbox',
            '--disable-dev-shm-usage',
            '--disable-web-security'
        ]
    }
},

3. 更新Playwright及Chromium版本 #

旧版本可能存在WSL2兼容性问题，执行以下命令更新：

npx playwright install --with-deps chromium
npm update @playwright/test

4. 切换到软件渲染后端 #

设置环境变量强制使用软件渲染，运行测试前执行：

export LIBGL_ALWAYS_SOFTWARE=1

也可将该命令添加到shell配置文件中持久生效。

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