javascript - Hantar borang tidak berfungsi dalam Webkit Playwright
Saya mempunyai halaman log masuk yang mudah yang saya cuba uji dengan 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>
Saya telah menulis ujian mudah untuk melengkapkan borang log masuk, yang akan mengalihkan anda ke papan pemuka.
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');
});
Ini berfungsi dengan baik di chromium dan firefox, tetapi gagal di webkit.
Selepas klik butang, url halaman masih login dan bukan dashboard.
Ini sedang dilakukan di Ubunut (melalui 5.10.16.3-microsoft-standard-WSL2) menggunakan node v16.16.0
Contoh 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)
Jawapan #1
Ini bukan jawapan yang lengkap kerana tanpa konteks tambahan, saya sukar untuk memastikan apa yang sedang berlaku tetapi bolehkah anda cuba menggantikan
await submitButton.click({force: true})
await page.waitForLoadState('networkidle')
await expect(page).toHaveURL('/dashboard')
dengan
await submitButton.click({force: true})
await page.waitForUrl('/dashboard', {waitUntil: 'networkidle'})
Alasan untuk cadangan itu adalah kerana saya bimbang pada masa fungsi waitForLoadState dipanggil, navigasi belum pun bermula (saya mendapati webkit selalu menjadi yang paling perlahan dengan playwright) oleh itu ia sudah benar.
Ini bukan jawapan lengkap kerana anda masih mempunyai waktu tamat 5000ms dan saya rasa navigasi anda tidak sepatutnya mengambil masa selama ini, walaupun dapat melihat video npm playwright-report test-results/tests-auth-Login-page-webkit/video.webm mungkin akan membantu dalam mencari penyelesaiannya.
Jawapan #2
Cuba gantikan:
await page.goto('/login', { waitUntil: 'networkidle' })
Dengan mencari penentu yang anda jangkakan di halaman:
await page.goto('/login')
await page.waitForSelector('input[id="username"]')