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("https://neo-bank-portal.dev.dcx.apps.piestory.net/dcx/artifacts")
  });
}

这里的问题是,当我在本地机器中运行这个测试用例时,它总是通过,并且它完美地工作,我还尝试了player的代码生成,只是为了确保我得到了正确的xpath或它的定位器,但当我运行Gitlab的Pipeline时,总是会超时,找不到定位器。

这是我的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,只是为了确保页面在与元素交互之前加载

我还将测试浏览器从chrome切换到了firefox,但运气不好

暂时我将creds.env存储在此处

更新:

因此,为了简化我一直在尝试做的事情,我重构了代码

test.beforeEach(async ({ page }) => {
    await page.goto(neo_bank_portal_login);
    const username_field = await page.waitForSelector("//input[@class='MuiInputBase-input MuiInput-input']");
    await username_field.fill(username);
    const password_field = await page.waitForSelector("(//input[contains(@class,'MuiInputBase-input MuiInput-input')])[2]");
    await password_field.fill(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()
    }
  });

  test.only("Redirect Artifacts", async ({page}) => {
    const artifacts_sec = await page.waitForSelector("(//div[@class='MuiListItemText-root']//p)[12]")
    await artifacts_sec.click();
    const url = page.url();
    expect(url).toEqual("link");
  });

我注意到它只呈现登录页面 await page.goto(portal_login);

beforeEach内部的代码可以工作,但当我尝试提交或登录时,测试失败了,我认为它甚至在登录后都没有呈现主页,我不知道为什么会发生这种情况,代码执行得很完美,但在CI/CD中只超时,知道为什么会出现这种情况吗?

test.beforeEach(async ({ page }) => {
  await page.goto(portal_login);
});
        
test.only("Redirect Artifacts", async ({page}) => {
  // Test in portal_login interface
});

我测试了portal_login,它是页面的url,我只是通过测试小接口来验证它,它在不到10秒内成功地通过了CI/CD

但是,当执行登录场景时,它总是超时,而且不应该超时,因为它在本地的时间不到5秒。我还尝试将超时设置为比默认值长,所以这意味着它并不慢,但它根本不会渲染。

总之,它成功地呈现了登录页面,但在成功登录后却无法呈现主页?

更新:

我通过剧作家追踪解决了这个问题,并在Gitlab的CI中下载了结果。

这里的问题是Gitlab变量i集 protected 我忘了取消选中它,这就是为什么在未受保护的分支中无法访问它的原因。