在 Playwright 中测试暂存和生产环境

2025-06-07

在 Playwright 中测试暂存和生产环境

在测试网站时，您可能需要在不同的环境中进行测试，例如开发、预发布和生产环境。在本文中，我们将了解如何baseURL在 Playwright 中设置和运行跨不同环境的测试。

设置基本 URL

您可能需要测试导航到网站上的不同页面。通过设置 ，baseURL您可以轻松地使用相对路径导航到不同的页面，而不必page.goto()在测试中每次使用 时都重复输入 URL。

await page.goto("https://example.com/products")
await page.goto("https://example.com/offers")
await page.goto("https://example.com/about")
Enter fullscreen mode Exit fullscreen mode

在Playwright 配置部分baseURL中进行设置。use

use: {
  baseURL: 'https://example.com',
}
Enter fullscreen mode Exit fullscreen mode

使用相对路径导航到您网站上的不同页面。

await page.goto("/")
await page.goto("/products")
await page.goto("/offers")
await page.goto("/about")
Enter fullscreen mode Exit fullscreen mode

设置子路径

如果您想测试网站的子路径，您可以将该路径添加到基本 URL。

use: {
  baseURL: 'https://playwright.dev/docs/',
}
Enter fullscreen mode Exit fullscreen mode

要转到子路径的相对路径，请.在斜杠前添加，否则 Playwright 将导航到网站的根目录而不是子路径。

await page.goto('./intro');
// https://playwright.dev/docs/intro

await page.goto('/intro');
// https://playwright.dev/intro
Enter fullscreen mode Exit fullscreen mode

设置不同的生产环境

要为不同的环境设置 URL，process.env请在 中设置变量baseURL。在下面的示例中，如果“STAGING”设置为“1”，则 URL 将为https://playwright.dev/docs/next/，否则将默认为https://playwright.dev/docs/。

use: {
  baseURL: process.env.STAGING === '1' ? 'https://playwright.dev/docs/next/'
         : 'https://playwright.dev/docs/',
},
Enter fullscreen mode Exit fullscreen mode

使用不同的环境运行测试

让我们编写一个快速测试来看看它是如何工作的。

test('has title', async ({ page }) => {
  await page.goto('./intro');

  await expect(page.getByRole("heading", { name: "Installation"})).toBeVisible();
});
Enter fullscreen mode Exit fullscreen mode

如果您在未设置环境变量的情况下运行测试，它将默认在生产网站上运行。

npx playwright test
Enter fullscreen mode Exit fullscreen mode

要在 STAGING 环境上运行测试，请将其添加STAGING=1到 CLI 命令的开头。此外，还要包含--trace on启用跟踪查看器并验证 URL 的功能。

STAGING=1 npx playwright test --trace on
Enter fullscreen mode Exit fullscreen mode

使用以下命令打开 HTML 报告。

npx playwright show-report
Enter fullscreen mode Exit fullscreen mode

该报告显示了 3 个测试，每个项目一个。要查看 Chromium 项目的详细信息，请点击跟踪图像。在 DOM 快照中，您可以找到测试导航到的 URL，该 URL 对应于暂存 URL。在不使用环境变量的情况下运行此测试将导航到生产 URL。

跟踪查看器

在 CI 上设置基本 URL

在 CI 上运行测试时，最好将其提取baseURL到环境变量中。首先安装dotenv包。

npm install dotenv
Enter fullscreen mode Exit fullscreen mode

然后在 Playwright 配置文件中需要dotenv配置：

require('dotenv').config();
Enter fullscreen mode Exit fullscreen mode

.env接下来，在项目根目录中创建一个文件并添加BASE_URL变量。您可以将其设置为生产环境 URL、暂存环境 URL 或任何您想要在本地测试的 URL，因为该文件不应提交到您的代码库。

BASE_URL=https://playwright.dev/docs/
Enter fullscreen mode Exit fullscreen mode

然后在剧作家配置中将baseURL变量设置BASE_URL为回退到生产 URL，以防未设置此变量。

use: {
  baseURL: process.env.BASE_URL ?? 'https://playwright.dev/docs/'
},
Enter fullscreen mode Exit fullscreen mode

您可以根据测试的环境在本地修改此 URL。

BASE_URL=https://playwright.dev/docs/next/
Enter fullscreen mode Exit fullscreen mode

BASE_URL然后可以在 CI 或 CI 工作流文件中设置环境变量。

   - name: Run Playwright tests
     run: npx playwright test
     env:
      BASE_URL: ${{ github.event.deployment_status.target_url }}
Enter fullscreen mode Exit fullscreen mode

设置不同的项目

如果您定期针对不同的环境进行测试，您可以为暂存和生产设置不同的项目，并为每个项目设置基本 URL。

projects: [
    {
      name: 'staging',
      use: { 
        ...devices['Desktop Chrome'],
        baseURL: 'https://playwright.dev/docs/next/'
       },
    },
    {
      name: 'production',
      use: { 
        ...devices['Desktop Chrome'],
        baseURL: 'https://playwright.dev/docs/'
       },
    },
    ...
]
Enter fullscreen mode Exit fullscreen mode

要在 CLI 中运行这些项目，请将其添加--project=到测试命令的末尾。

npx playwright test --project=staging
npx playwright test --project=production
Enter fullscreen mode Exit fullscreen mode

使用项目让我们能够更自由地添加不同的配置，并进行更多修改，而不仅仅是baseURL使用不同的配置来运行测试，例如colorScheme等等locale。查看测试选项指南了解更多详情。

另外，使用项目意味着您可以在使用VS Code 扩展或在UI 模式下运行测试时轻松地在它们之间切换。

您可以为每个环境创建一个新的配置文件，但我们不建议在跨不同环境进行测试时这样做。如果您在同一应用程序中运行不同的测试（例如针对移动设备仿真和桌面环境的测试），我们建议您使用不同的配置文件。

结论

在 Playwright 配置中设置 URLbaseURL非常有用，这样可以避免整个网站的 URL 重复。当您需要在不同的 URL 上测试您的网站时，请使用环境变量为每个环境指定一个 URL。如果您经常在不同环境中进行测试，请为该环境创建一个新项目，并添加基本 URL 以及您需要的任何其他配置。

测试愉快！🎭

有用的链接

文章来源：https://dev.to/playwright/testing-staging-and- Production-environments-in-playwright-3p8b
Devto 翻译
PREV
Svelte UI 库和组件概述
NEXT
Playwright 中更好的全局设置重用登录，项目依赖项等待 getByPlaceholder('Search')