Playwright登录按钮点击不稳定问题求助与排查记录

我知道Playwright自带auto-wait特性，但自动化测试点击Log in按钮时，操作时灵时不灵。执行初始代码后，页面未跳转到预期的登录URL，报错显示当前URL仍为首页。

初始测试代码 #

import { test, expect } from '@playwright/test';

test('test', async ({ page }) => {
 await page.goto('https://website.com');
  await page.getByRole('link', { name: 'Log in' }).click();
  await expect(page).toHaveURL('https://website.com/login/');
});

报错信息 #

expect(received).toHaveURL(expected)
Expected string: "https://website.com/login/"
Received string: "https://website.com"

登录按钮HTML代码片段 #

<span data-v-154d6ddf="" class="absolute-top-right">
  <div class="row justify-end q-gutter-x-sm q-pt-lg q-px-sm">
    <div class="col-auto">
      <a tabindex="0" type="button" href="/login/potential" role="link" class="q-btn q-btn-item non-selectable no-outline q-btn--flat q-btn--rectangle text-white q-btn--actionable q-focusable q-hoverable q-btn--no-uppercase q-btn--wrap">
        <span class="q-focus-helper" tabindex="-1"></span>
        <span class="q-btn__wrapper col row q-anchor--skip">
          <span class="q-btn__content text-center col items-center q-anchor--skip justify-center row">
            <span>Log in</span>
          </span>
        </span>
      </a>
    </div>
    <div class="col-auto">
      <a tabindex="0" type="button" href="/signup" role="link" class="q-btn q-btn-item non-selectable no-outline q-btn--standard q-btn--rectangle bg-primary text-white q-btn--actionable q-focusable q-hoverable q-btn--no-uppercase q-btn--wrap">
        <span class="q-focus-helper"></span>
        <span class="q-btn__wrapper col row q-anchor--skip">
          <span class="q-btn__content text-center col items-center q-anchor--skip justify-center row">
            <span>Sign up</span>
          </span>
        </span>
      </a>
    </div>
    ...
  </div>
</span>

已尝试的解决方案（均未彻底解决） #

• 添加元素连接状态检查：失败频率降低，但偶尔仍会出现问题

  import { test, expect } from '@playwright/test';
  
  test('test', async ({ page }) => {
  await page.goto('https://website.com');
  const loginBtn = page.getByRole('link', { name: 'Log in' });
  expect(await loginBtn.evaluate(node => node.isConnected)).toBe(true);
    await page.getByRole('link', { name: 'Log in' }).click();
    await expect(page).toHaveURL('https://website.com/login/');
  });
  

• 使用.click({force: true})：第3次运行时失败
• 用Promise.all同步点击与导航等待：问题未解决

  test('test2', async ({ page }) => {
        await page.goto('https://website.com/');
        const [response] = await Promise.all([
          page.getByRole('link', { name: 'Log in' }).click(),
          page.waitForNavigation({ url: 'https://website.com/login' }),
        ]);
        await expect(page).toHaveURL('https://website/login');
      ...
      });
  

Cypress测试情况 #

在Cypress中执行同类测试，更换多种定位器后，报错提示元素被其他元素覆盖，但在DOM中无法找到该覆盖元素。测试代码如下：

describe("Login", () => {
beforeEach(() => {
    cy.visit(baseUrl);
});

it.only("Login page should open", () => {
    cy.get('a[href*="login"]').click();
    cy.url().should("eq", authUrl.replace("env", env) + "/login/potential");
});
});

Trace Viewer排查结果 #

通过Playwright Trace Viewer查看日志，显示Playwright已等待元素可见且稳定，但实际页面中登录、注册按钮仍处于加载状态，导致点击无效。

现求问如何添加额外等待，确保元素完全加载并稳定可用？

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