جافا سكريبت - إرسال النموذج لا يعمل في Webkit Playwright
لدي صفحة تسجيل دخول بسيطة أحاول اختبارها باستخدام 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>
لقد كتبت اختبارًا بسيطًا لإكمال نموذج تسجيل الدخول، والذي يعيد توجيهك إلى لوحة التحكم.
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');
});
يعمل هذا بشكل جيد في كروميوم وفايرفوكس، لكنه يفشل في ويبكيت.
بعد النقر على الزر، لا يزال رابط الصفحة هو تسجيل الدخول وليس لوحة التحكم.
يتم ذلك على أوبونتو (عبر 5.10.16.3-microsoft-standard-WSL2) باستخدام node v16.16.0
نماذج الإخراج
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)
الإجابة رقم 1
هذا ليس ردًا كاملاً لأنه بدون مزيد من السياق أجد صعوبة في التأكد مما يحدث، لكن هل يمكنك محاولة الاستبدال
await submitButton.click({force: true})
await page.waitForLoadState('networkidle')
await expect(page).toHaveURL('/dashboard')
مع
await submitButton.click({force: true})
await page.waitForUrl('/dashboard', {waitUntil: 'networkidle'})
السبب وراء ذلك الاقتراح هو أنني قلق من أنه بحلول الوقت الذي يتم فيه استدعاء الدالة waitForLoadState، لم يبدأ التنقل بعد (أجد أن webkit دائمًا هو الأبطأ مع playwright)، وبالتالي فهو صحيح بالفعل.
هذه ليست إجابة كاملة لأن لديك وقت انتهاء قدره 5000 مللي ثانية ولا أعتقد أن التنقل الخاص بك يجب أن يستغرق كل هذا الوقت، على الرغم من أن القدرة على مشاهدة فيديو npm playwright-report من test-results/tests-auth-Login-page-webkit/video.webm من المرجح أن تساعد في معرفة السبب.
الإجابة رقم 2
حاول الاستبدال:
await page.goto('/login', { waitUntil: 'networkidle' })
مع البحث عن المحدد الذي تتوقعه على الصفحة:
await page.goto('/login')
await page.waitForSelector('input[id="username"]')