Playwright 在本地测试通过，但在 GitLab CI 上失败

Question

我一直在到处搜索，发现其他人也面临类似的问题，但所提供的解决方案都没有解决我的问题。我正在使用 Playwright 测试 Web 文本编辑器，当我使用以下脚本在本地运行测试时，一切都成功通过：

xvfb-run playwright test --ui --ui-port=8001 --ui-host=0.0.0.0

但是，当在 GitLab CI 管道中运行测试时，它们会失败。这是我的 GitLab CI 配置的相关部分：

image: docker:26.0.2

variables:
  DOCKER_TLS_CERTDIR: "/certs"
  DOCKER_CERT_PATH: "/certs/client"
  DOCKER_TLS_VERIFY: "1"
  DOCKER_HOST: "tcp://docker:2376"

services:
  - docker:26.0.2-dind

stages:
  - test
  - build

test:
  stage: test
  script:
    - DEBUG=pw:api docker compose -f docker-compose.test.yaml up --exit-code-from test-runner
    - DEBUG=pw:api docker cp test-runner:/tmp/coverage.xml ./coverage.xml
  coverage: '/TOTAL.*\s+(\d+\%)/'
  artifacts:
    reports:
      coverage_report:
        coverage_format: cobertura
        path: ./coverage.xml

e2e:
  stage: test
  script:
    - DEBUG=pw:api docker compose -f docker-compose.e2e.yaml up --exit-code-from test-runner
  coverage: '/TOTAL.*\s+(\d+\%)/'
  artifacts:
    paths:
      - playwright-report/
    expire_in: 1 week

这是导致问题的测试文件：

test('Add a new job', async ({ page }) => {
    await page.goto('/en/profiles/settings/basic/', { waitUntil: 'commit' });

    // Navigate to 'Jobs' and click 'Add job'
    const navBar = page
      .locator('nav > ul[data-testid=desktop_nav_bar] > li')
      .first()
      .locator('ul');
    await navBar.waitFor({ state: 'visible' });

    // Fill in the job title
    await page.locator('#id_title').fill('Backend developer');

    // Add tasks description
    const tasksEditor = page.locator('#id_tasks');
    const tasksBtnsWrapper = tasksEditor.locator('[data-testid=menu_bar]');
    const boldBtn = tasksBtnsWrapper.getByRole('button', { name: 'Bold' });
    await boldBtn.waitFor();
    await boldBtn.click();
    await tasksEditor
      .locator('.tiptap.ProseMirror')
      .fill('Task details for the Backend Developer position');

    // Select all employment types
    const employmentTypesDropdown = page.locator(
      'div#data_id_employment_types'
    );
    await employmentTypesDropdown.click();
    await page.locator('#id_employment_types_select_all_btn').click();
    await employmentTypesDropdown.click();

    // Submit the form
    const createJobButton = page.getByRole('button', { name: 'Create Job' });
    await createJobButton.click();
  });

运行管道时，遇到以下错误：

Test timeout of 30000ms exceeded.
test-runner        | 
test-runner        | Error: locator.waitFor: Test timeout of 30000ms exceeded.
test-runner        | Call log:
test-runner        | - waiting for locator('#id_tasks').locator('[data-testid=menu_bar]').getByRole('button', { name: 'Bold' }) to be visible
test-runner        | 
test-runner        | at /home/user/app/e2e/tests/jobs.spec.ts:33:19

测试在本地运行得很好，所以这似乎是一个特定于管道的问题。我怀疑这可能与管道环境中的渲染或浏览器行为差异有关。

到目前为止我尝试过的：

1. 增加测试超时，看看问题是否只是时间问题。
2. 在处理任何操作（例如按钮单击（））之前确保元素存在。
3. 确保在 CI 环境中安装并更新所有依赖项。

有人遇到过类似的问题或有解决此问题的建议吗？

Answer 1

从错误消息中，我可以看到有一个 testid“menu_bar”的按钮不在 DOM 上，我建议你检查 /en/profiles/settings/basic/ 是否可以在 gitlab ci 上访问。