在现代 Web 开发中，测试是一个至关重要的部分。自动化测试可以帮助开发人员和测试人员验证应用程序的正确性，并确保在构建过程中不会引入新的问题。Playwright 是一个流行的自动化测试工具，它支持 Headless 和非 Headless 两种模式。

在本文中，田辛老师将探讨这两种模式的优点和缺点，以及它们最适合的场景。田辛老师还将为每个模式提供示例代码，以帮助您更好地理解它们的工作原理。

1 Headless 模式 无头模式

Headless 模式是指在没有 UI 界面的情况下运行浏览器。这意味着浏览器将在后台运行，用户无法看到浏览器窗口。Headless 模式具有以下优点：

• 快速：由于没有浏览器窗口，Headless 模式的浏览器运行速度更快。这使得测试运行更快，并且可以更快地提供反馈。
• 可靠性高：由于没有 UI 界面，Headless 模式通常比非 Headless 模式更稳定。这是因为许多 UI 相关问题（例如窗口大小或位置）会导致测试失败。

Headless 模式最适合在以下场景下使用：

• 持续集成（CI）环境：由于 Headless 模式可以快速运行，这使得它成为 CI 环境的理想选择。这样，测试可以在构建期间运行，而不会在 UI 界面中显式出现。
• 无头浏览器操作：Headless 模式还可以用于执行无头浏览器操作，例如网络爬虫或自动化测试。在这些情况下，没有必要在浏览器窗口中显示结果。

以下是一个使用 Playwright 的 Headless 模式运行测试的示例：

const { chromium } = require('playwright');(async () => {const browser = await chromium.launch();const context = await browser.newContext();const page = await context.newPage();await page.goto('https://example.com');const title = await page.title();console.log(title); // 输出 "Example Domain"await browser.close();
})();

2 非 Headless 模式

非 Headless 模式是指在有 UI 界面的情况下运行浏览器。这意味着用户可以看到浏览器窗口，并且可以与页面进行交互。非 Headless 模式的优点包括：

• 可视化：由于浏览器窗口可见，非 Headless 模式可以提供更好的可视化反馈。这使得它成为交互式测试的理想选择。
• 调试：在非 Headless模式下，您可以轻松地通过浏览器的开发工具进行调试。这对于查找问题和识别错误非常有用。

非 Headless 模式最适合在以下场景下使用：

• 手动测试：非 Headless 模式可以提供更好的可视化反馈，使其成为手动测试的理想选择。
• 交互式测试：如果您需要与页面进行交互并测试用户交互，则非 Headless 模式是一个更好的选择。

以下是一个使用 Playwright 的非 Headless 模式运行测试的示例：

const { chromium } = require('playwright');(async () => {const browser = await chromium.launch({ headless: false });const context = await browser.newContext();const page = await context.newPage();await page.goto('https://example.com');const title = await page.title();console.log(title); // 输出 "Example Domain"await browser.close();
})();

在这个示例中，我们将 headless 参数设置为 false，以启用非 Headless 模式。

3 结论

Headless 模式和非 Headless 模式都有自己的优点和缺点，并且最适合不同的场景。如果您需要快速运行测试并且不需要可视化反馈，则应该选择 Headless 模式。如果您需要与页面进行交互或进行手动测试，则应该选择非 Headless 模式。Playwright 提供了易于使用的 API，可以轻松地在这两种模式下运行测试。