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 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>
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)
from Form submit not working in Webkit Playwright
No comments:
Post a Comment