Playwright测试在GitLab CI/CD超时失败，本地运行正常的解决

问题现象 #

本地运行Playwright测试用例完全正常，但在GitLab CI/CD流水线执行时，持续出现超时、定位器无法找到的问题。

测试代码 #

const username = process.env.USERNAME as string;
const password = process.env.PASSWORD as string;

test.beforeEach(async ({ page }) => {
    await page.goto(neo_bank_portal_login);
    await page.fill('[name="username"]', username);
    await page.fill('[name="password"]', password);
    const submitBtnSelector = "//button[contains(@class,'MuiButtonBase-root MuiButton-root')]"
    await page.waitForSelector(submitBtnSelector)
    const submitBtn = await page.$(submitBtnSelector)
    const isSubmitBtnEnabled = await submitBtn!.isEnabled()

    if (isSubmitBtnEnabled) {
      await submitBtn!.click()
    }
    await page.waitForLoadState("networkidle");
    await page.click("//p[text()='Artifacts']");
});

test.afterEach(async ({page}) => {
  await page.close();
});

test.describe("Artifacts", () => {
  test.only("Redirect Artifacts", async ({page}) => {
    // Artifacts Url
    const url = page.url();
    expect(url).toEqual(myURL)
  });
}

GitLab CI配置文件（gitlab-ci.yml） #

stages:
  - smoke-test

tests:
  stage: smoke-test
  image: mcr.microsoft.com/playwright:v1.32.0-focal
  script:
    - npm ci
    - npx playwright install --with-deps
    - export const USERNAME=$CI_USERNAME
    - export const PASSWORD=$CI_PASSWORD
    - npx playwright test

排查与解决过程 #

• 尝试添加page.waitForTimeout等待页面加载，未解决问题；
• 切换测试浏览器为Firefox，问题依旧；
• 重构代码逐步排查后发现：CI/CD中登录页能正常渲染，但登录后无法加载首页；
• 使用Playwright Trace工具定位到根因：GitLab后台设置的USERNAME和PASSWORD环境变量被标记为protected，非保护分支的流水线没有权限读取这些变量，导致登录请求实际未携带有效凭据，无法跳转至首页，进而引发后续定位器找不到、超时的问题。

取消GitLab环境变量的protected标记后，非保护分支的流水线可以正常读取登录凭据，测试执行恢复正常。

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