javascript - Gửi biểu mẫu không hoạt động trong Webkit Playwright
Tôi có một trang đăng nhập đơn giản mà tôi đang cố gắng kiểm tra bằng 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>
Tôi đã viết một bài kiểm tra đơn giản để hoàn thành biểu mẫu đăng nhập, bài kiểm tra này sẽ chuyển hướng bạn đến bảng điều khiển.
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');
});
Điều này hoạt động tốt trên Chromium và Firefox, nhưng thất bại trên Webkit.
Sau khi nhấn nút, URL của trang vẫn là login chứ không phải dashboard.
Điều này đang được thực hiện trên Ubunut (thông qua 5.10.16.3-microsoft-standard-WSL2) sử dụng node v16.16.0
Kết quả mẫu
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)
Câu trả lời #1
Đây không phải là câu trả lời đầy đủ vì không có nhiều ngữ cảnh, tôi khó có thể chắc chắn điều gì đang xảy ra, nhưng bạn có thể thử thay thế
await submitButton.click({force: true})
await page.waitForLoadState('networkidle')
await expect(page).toHaveURL('/dashboard')
với
await submitButton.click({force: true})
await page.waitForUrl('/dashboard', {waitUntil: 'networkidle'})
Lý do cho đề xuất đó là tôi lo lắng rằng khi hàm waitForLoadState được gọi, việc điều hướng thậm chí còn chưa bắt đầu (tôi thấy webkit luôn là chậm nhất với playwright) nên nó đã đúng rồi.
Đây không phải là một câu trả lời đầy đủ vì bạn vẫn có thời gian chờ 5000ms và tôi không nghĩ việc điều hướng của bạn nên mất lâu như vậy, mặc dù có thể xem video npm playwright-report từ test-results/tests-auth-Login-page-webkit/video.webm sẽ giúp tìm ra vấn đề.
Câu trả lời #2
Hãy thử thay thế:
await page.goto('/login', { waitUntil: 'networkidle' })
Với việc tìm kiếm bộ chọn mà bạn mong đợi trên trang:
await page.goto('/login')
await page.waitForSelector('input[id="username"]')