I am currently in the process of testing a basic login page using Playwright for automation.
<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 created a simple test to fill out and submit the login form, which should direct you to the dashboard upon successful login.
import { test, expect } from '@playwright/test'
test("Automation Login Test", 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 script works seamlessly on Chromium and Firefox browsers but encounters issues on WebKit.
Post button click, the URL remains at the login page instead of redirecting to the dashboard.
The testing environment consists of Ubuntu (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"&...