Playwright：Azure CI/CD中Firefox的waitForURL超时失败

测试代码 #

import { expect, test } from "@playwright/test"

test.describe("ChooseApp Page", () => {
  test("should display correct content and navigate to app pages", async ({ page }) => {
    await page.goto("./6XDCIRI/choose-app")

    // 检查主标题是否存在
    await expect(page.locator("text=Wählen Sie Ihre App")).toBeVisible()

    // 检查Solar Analytics卡片是否存在
    const solarAnalyticsCard = page.getByTestId("choose-app-0")
    await expect(solarAnalyticsCard).toBeVisible()

    // 测试Solar Analytics的导航功能
    await solarAnalyticsCard.click()
    await page.waitForURL("./6XDCIRI/solar-analytics/electricity-requirements")
  })
})

测试环境表现差异 #

本地环境 #

Azure CI/CD环境 #

该测试在本地环境的Chromium和Firefox浏览器中均可正常通过，但在Azure CI/CD环境中，仅Firefox会出现waitForURL超时失败的问题。

Playwright配置 #

/* eslint-disable lines-around-comment */

/* eslint-disable capitalized-comments */
import { defineConfig, devices } from "@playwright/test"
import dotenv from "dotenv"
import path from "path"

/**
 * 从文件读取环境变量
 * https://github.com/motdotla/dotenv
 */
const envFile = process.env.NODE_ENV === "production" ? ".env.production" : ".env.testing"

dotenv.config({ path: path.resolve(__dirname, envFile) })
/**
 * 参考文档：https://playwright.dev/docs/test-configuration.
 */
// 默认使用process.env.PORT，端口不存在时回退到3000
const PORT = process.env.PORT || 3000

// 根据端口设置webServer.url和use.baseURL
const baseURL = `http://localhost:${PORT}`

export default defineConfig({
  timeout: 180000,

  testDir: path.join(__dirname, "e2e"),

  /* 并行运行文件中的测试 */
  fullyParallel: true,

  /* CI环境下，如果代码中存在test.only则构建失败 */
  forbidOnly: !!process.env.CI,

  /* 仅在CI环境下重试测试 */
  retries: process.env.CI ? 2 : 0,

  /* CI环境下关闭并行测试 */
  workers: process.env.CI ? 1 : undefined,

  /* 使用的测试报告器：https://playwright.dev/docs/test-reporters */
  reporter: "html",

  /* 所有项目的共享设置：https://playwright.dev/docs/api/class-testoptions. */
  use: {
    /* 在page.goto('/')这类操作中使用的基础URL */
    baseURL,

    /* 重试失败测试时收集跟踪信息：https://playwright.dev/docs/trace-viewer */
    trace: "on-first-retry",
  },

  /* 配置主流浏览器测试项目 */
  projects: [
    { name: "setup", testMatch: /.*\.setup\.ts/ },
    {
      name: "chromium",
      use: {
        ...devices["Desktop Chrome"],

        storageState: "playwright/.auth/user.json",
      },
      dependencies: ["setup"],
    },

    {
      name: "firefox",
      use: { ...devices["Desktop Firefox"], storageState: "playwright/.auth/user.json" },
      dependencies: ["setup"],
    },

    // {
    //   name: "webkit",
    //   use: { ...devices["Desktop Safari"] },
    // },

    /* 移动端视口测试 */
    // {
    //   name: 'Mobile Chrome',
    //   use: { ...devices['Pixel 5'] },
    // },
    // {
    //   name: 'Mobile Safari',
    //   use: { ...devices['iPhone 12'] },
    // },

    /* 品牌浏览器测试 */
    // {
    //   name: 'Microsoft Edge',
    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
    // },
    // {
    //   name: 'Google Chrome',
    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
    // },
  ],

  /* 启动测试前运行本地开发服务器 */
  webServer: {
    command: "npm run dev",
    url: baseURL,
    reuseExistingServer: !process.env.CI,
  },
})

内容的提问来源于stack exchange，提问作者Ala Eddine Menai