如何在Playwright测试时打开浏览器？解决命令行运行不弹窗问题

问题描述 #

我正在对某URL进行E2E测试，测试过程中需要人工点击某个元素。使用Playwright编写的测试代码如下：

test("advanced order", async ({ browser }) => {
  const context = await browser.newContext({
    storageState: "./auth.json",
  });

  const pageOrigin = await context.newPage();
  //   await pageOrigin.goto("http://localhost:5500/#view/login.html");
  await pageOrigin.goto("https://sina.exirbroker.com/mobile/#view/login.html");
  await pageOrigin.getByLabel("user").click();
  await pageOrigin.getByLabel("user").fill("ab23");
  await pageOrigin.getByLabel("user").press("Tab");
  await pageOrigin.getByLabel("pass").click();
  await pageOrigin.getByLabel("pass").fill("csds");
  await pageOrigin.getByText("btn").click();
  await pageOrigin.waitForTimeout(3000);
  await pageOrigin.waitForURL("**/OnlineTrades/newOrder.html?**");
  await pageOrigin.waitForTimeout(3000);
  await pageOrigin
    .locator("header")
    .filter({ hasText: "submit order" })
    .locator("span")
    .click();
  await pageOrigin
    .locator("#orderSettingsHolder > div > .km-switch > .km-switch-container")
    .first()
    .click();

  await pageOrigin.getByLabel("Close").click();

  await pageOrigin.waitForTimeout(3000);
  await pageOrigin.waitForTimeout(5000);
  await expect(pageOrigin).toHaveScreenshot();
});

在VS Code中运行该测试时浏览器会正常打开，但通过npx playwright test命令行运行时浏览器不会打开，如何解决此问题？

解决方法 #

Playwright默认在命令行运行测试时启用无头模式（headless），所以浏览器窗口不会显示。要让浏览器打开，可通过以下几种方式设置：

1. 命令行添加参数 #

执行测试时加上--headed参数，强制以有头模式启动浏览器：

npx playwright test --headed

若需指定特定浏览器，可搭配--browser参数：

npx playwright test --headed --browser chromium

2. 全局配置默认有头模式 #

修改项目根目录下的playwright.config.js（或playwright.config.ts），在use配置项中将headless设为false，所有测试默认都会打开浏览器：

module.exports = {
  use: {
    headless: false,
    // 其他原有配置...
  },
};

3. 单个测试用例单独设置 #

如果只想让当前这个测试用例打开浏览器，可在创建context时指定headless: false：

test("advanced order", async ({ browser }) => {
  const context = await browser.newContext({
    storageState: "./auth.json",
    headless: false, // 添加这一行
  });
  // 后续测试代码不变
});

另外，若需要在测试过程中暂停，让你进行人工点击操作，可以在需要暂停的位置添加await pageOrigin.pause();，Playwright会打开调试界面，允许你手动操作页面，完成后可继续执行后续测试步骤。

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