Playwright中WebKit浏览器表单提交失效问题排查

我有一个简单的登录页面，使用Playwright做自动化测试。该测试在Chromium和Firefox中运行正常，但在WebKit中失败——点击登录按钮后页面停留在登录页，无法跳转到仪表盘。

登录页面HTML代码 #

<form method="POST" name="login">
    <input type="hidden" name="captcha_response">
    <input type="hidden" name="_token" value="token">
    <div class="form-group">
        <label for="username">用户名</label>
        <input id="username" value="" type="text" maxlength="100" name="username" class="form-control" autofocus autocapitalize="none" autocomplete="username" required />
    </div>
    <div class="form-group">
        <label for="password">密码</label>
        <input id="password" type="password" maxlength="100" name="password" class="form-control" autocomplete="current-password" required />
    </div>
    <div class="form-group flex flex-col-reverse md:flex-row flex-wrap justify-between items-center">
        <div>
            <p class="text-gray-600 text-sm">
                忘记<a href="http://localhost:7013/forgot-username" class="text-gray-600 text-sm">用户名</a>或<a href="http://localhost:7013/forgot-password" class="text-gray-600 text-sm">密码</a>？
            </p>
        </div>
        <button name="loginButton" type="submit" class="btn btn-primary w-full md:w-auto mb-3 md:mb-0">登录</button>
    </div>
</form>

测试代码 #

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

test("Ans portal 登录页面", async ({ page }) => {
    await page.goto('/login', { waitUntil: 'networkidle' });
    console.log(page.url())
    // 等待页面加载完成

    await page.click('input[id="username"]')
    await page.fill('#username', 'test')

    await page.click('input[id="password"]')
    await page.fill('#password', '12345')

    const submitButton = await page.locator('button[name="loginButton"]')
    console.log('按钮文本', await submitButton.innerText())
    await expect(submitButton).toHaveCount(1)
    await submitButton.click({force: true})

    await page.waitForLoadState('networkidle')
    console.log('当前URL', page.url())
    await expect(page).toHaveURL('/dashboard')
    await expect(page.locator('h1#page_title')).toHaveText('下午好，Alan');
});

测试环境与失败结果 #

测试环境：Ubuntu（基于5.10.16.3-microsoft-standard-WSL2），Node.js v16.16.0

测试输出：

Running 3 tests using 1 worker

  ✓  1 [chromium] › tests/auth.spec.ts:3:1 › 登录页面 (12s)
http://localhost:7013/login
按钮文本 登录
当前URL http://localhost:7013/dashboard
  ✓  2 [firefox] › tests/auth.spec.ts:3:1 › 登录页面 (15s)
http://localhost:7013/login
按钮文本 登录
当前URL http://localhost:7013/dashboard
  ✘  3 [webkit] › tests/auth.spec.ts:3:1 › 登录页面 (8s)
http://localhost:7013/login
按钮文本 登录
当前URL http://localhost:7013/login


  1) [webkit] › tests/auth.spec.ts:3:1 › 登录页面 ================================================

    Error: expect(received).toHaveURL(expected)

    Expected string: "/dashboard"
    Received string: "http://localhost:7013/login"
    Call log:
      - expect.toHaveURL with timeout 5000ms
      - waiting for selector ":root"
      -   selector resolved to <html lang="en">…</html>
      -   unexpected value "http://localhost:7013/login"
      -   selector resolved to <html lang="en">…</html>
      -   unexpected value "http://localhost:7013/login"
      -   selector resolved to <html lang="en">…</html>
      -   unexpected value "http://localhost:7013/login"
      -   selector resolved to <html lang="en">…</html>
      -   unexpected value "http://localhost:7013/login"
      -   selector resolved to <html lang="en">…</html>
      -   unexpected value "http://localhost:7013/login"
      -   selector resolved to <html lang="en">…</html>
      -   unexpected value "http://localhost:7013/login"
      -   selector resolved to <html lang="en">…</html>
      -   unexpected value "http://localhost:7013/login"
      -   selector resolved to <html lang="en">…</html>
      -   unexpected value "http://localhost:7013/login"


      20 |     await page.waitForLoadState('networkidle')
      21 |     console.log('当前URL', page.url())
    > 22 |     await expect(page).toHaveURL('/dashboard')
         |                        ^
      23 |     await expect(page.locator('h1#page_title')).toHaveText('下午好，Alan');
      24 | });
      25 |

        at /home/projects/playwright/tests/auth.spec.ts:22:24

    attachment #1: video (video/webm) --------------------------------------------------------------
    test-results/tests-auth-登录页面-webkit/video.webm
    ------------------------------------------------------------------------------------------------

    attachment #2: screenshot (image/png) ----------------------------------------------------------
    test-results/tests-auth-登录页面-webkit/test-failed-1.png
    ------------------------------------------------------------------------------------------------


  1 failed
    [webkit] › tests/auth.spec.ts:3:1 › 登录页面 =================================================
  2 passed (40s)

排查方向 #

• 换用表单提交方式：WebKit对按钮点击的表单触发逻辑可能有差异，尝试直接提交表单：await page.locator('form[name="login"]').submit()
• 优化等待策略：替换page.waitForLoadState('networkidle')，改用导航等待：await Promise.all([page.waitForNavigation(), submitButton.click()])
• 移除强制点击：去掉{force: true}，确保按钮处于可点击状态再触发点击，避免跳过前端验证
• 检查CSRF Token：页面中_token为固定值，WebKit可能存在缓存或处理差异，确保每次请求获取最新的token

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