javascript - שליחת טופס לא עובדת ב-Webkit Playwright

יש לי דף התחברות פשוט שאני מנסה לבדוק עם Playwright.

<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">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">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">
                Forgot your <a href="http://localhost:7013/forgot-username" class="text-gray-600 text-sm">username</a> or <a href="http://localhost:7013/forgot-password" class="text-gray-600 text-sm">password</a>?
            </p>
        </div>
        <button name="loginButton"  type="submit" class="btn btn-primary w-full md:w-auto mb-3 md:mb-0">Login</button>
    </div>
</form>

כתבתי מבחן פשוט להשלים את טופס ההתחברות, שמפנה אותך ללוח המחוונים.

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

test("Ans portal login page", async ({ page }) => {
    await page.goto('/login', { waitUntil: 'networkidle' });
    console.log(page.url())
    // Wait for the page to load


    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('button', 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('Good afternoon Alan');
});

זה עובד בסדר בכרומיום ופיירפוקס, אבל נכשל ב-וובקיט.
אחרי לחיצה על הכפתור, כתובת הדף עדיין היא login ולא dashboard.

זה נעשה על אובונטו (דרך 5.10.16.3-microsoft-standard-WSL2) תוך שימוש ב-node v16.16.0

פלט לדוגמה

Running 3 tests using 1 worker

  ✓  1 [chromium] › tests/auth.spec.ts:3:1 › Login page (12s)
http://localhost:7013/login
button Login
url http://localhost:7013/dashboard
  ✓  2 [firefox] › tests/auth.spec.ts:3:1 › Login page (15s)
http://localhost:7013/login
button Login
url http://localhost:7013/dashboard
  ✘  3 [webkit] › tests/auth.spec.ts:3:1 › Login page (8s)
http://localhost:7013/login
button Login
url http://localhost:7013/login


  1) [webkit] › tests/auth.spec.ts:3:1 › Login page ================================================

    Error: expect(received).toHaveURL(expected)

    Expected string: "http://localhost:7013/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('Good afternoon Alan');
      24 | });
      25 |

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

    attachment #1: video (video/webm) --------------------------------------------------------------
    test-results/tests-auth-Login-page-webkit/video.webm
    ------------------------------------------------------------------------------------------------

    attachment #2: screenshot (image/png) ----------------------------------------------------------
    test-results/tests-auth-Login-page-webkit/test-failed-1.png
    ------------------------------------------------------------------------------------------------


  1 failed
    [webkit] › tests/auth.spec.ts:3:1 › Login page =================================================
  2 passed (40s)

תשובה #1

זה לא מענה מלא כיוון שבלי הקשר נוסף קשה לי להיות בטוח מה קורה, אבל האם תוכל לנסות להחליף

await submitButton.click({force: true})
await page.waitForLoadState('networkidle')
await expect(page).toHaveURL('/dashboard')

עם

await submitButton.click({force: true})
await page.waitForUrl('/dashboard', {waitUntil: 'networkidle'})

הנימוק להצעה הזאת הוא שאני מודאג שבזמן שהפונקציה waitForLoadState נקראת, הניווט אפילו לא התחיל עדיין (אני מוצא ש-webkit תמיד הכי איטי עם playwright) ולכן זה כבר נכון.

זו לא תשובה מלאה מכיוון שעדיין יש לך פסק זמן של 5000ms ואני לא חושב שהניווט שלך אמור לקחת כל כך הרבה זמן, אם כי היכולת לראות את הסרטון test-results/tests-auth-Login-page-webkit/video.webm מ-npm playwright-report יעזור כנראה להבין את זה.

תשובה #2

נסה להחליף:

await page.goto('/login', { waitUntil: 'networkidle' })

עם חיפוש אחר הסלקטור שאתה מצפה לו בעמוד:

await page.goto('/login')
await page.waitForSelector('input[id="username"]')