Form submit not working in Webkit Playwright-CodePudding

I have a simple login page that I am trying to test with Playwright.

<form method="POST" name="login">
    <input type="hidden" name="captcha_response">
    <input type="hidden" name="_token" value="token">
    <div >
        <label for="username">Username</label>
        <input id="username" value="" type="text" maxlength="100" name="username"  autofocus autocapitalize="none" autocomplete="username" required />
    </div>
    <div >
        <label for="password">Password</label>
        <input id="password" type="password" maxlength="100" name="password"  autocomplete="current-password" required />
    </div>
    <div >
        <div>
            <p >
                Forgot your <a href="http://localhost:7013/forgot-username" >username</a> or <a href="http://localhost:7013/forgot-password" >password</a>?
            </p>
        </div>
        <button name="loginButton"  type="submit" >Login</button>
    </div>
</form>

I have written a simply test to complete the login form, which redirects you to the dashboard.

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');
});

This works fine in chromium and firefox, but fails in webkit.
After the button click, the page url is still login and not dashboard.

This is being done on Ubunut (via 5.10.16.3-microsoft-standard-WSL2) using node v16.16.0

Sample output

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)

CodePudding user response：

This is not a complete response since without more context I'm having a hard time being certain of what's going on but could you try replacing

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

with

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

The reasoning for that suggestion is that I'm worried by the time the waitForLoadState function is called, navigation hasn't even started yet (I find webkit to always be the slowest with playwright) thus it is already true.

This is not a complete answer because you still have a 5000ms timeout and I don't think your navigation should be taking this long, though being able to see the test-results/tests-auth-Login-page-webkit/video.webm video from npm playwright-report would probably help figuring it out.

CodePudding user response：

Try replacing:

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

With looking for the selector you expect on the page:

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