lundberg/porchlight
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(e2e): fix WebAuthn and integration test failures

Browse source 
- Use localhost instead of 127.0.0.1 as TARGET_URL so the WebAuthn RP ID
  is a valid domain (the spec forbids IP addresses)
- Replace request.post('/logout') with page.context().clearCookies() since
  Playwright's request fixture has a separate cookie jar from the page
- Add registerPasskey() helper that waits for 'load' event to reliably
  detect the page reload after successful registration
- Track credential count with getCredentialCount() since credentials
  accumulate across serial tests sharing the same database
- Fix login.spec.js selector from #webauthn-login-form to #webauthn-login-btn
  to match the actual template

All 57 E2E tests now pass (50 migrated + 7 WebAuthn).
This commit is contained in:
Johan Lundberg 2026-02-18 12:45:03 +01:00
parent 71ddf5d8ff
commit 70c97233c5
No known key found for this signature in database
GPG key ID: A6C152738D03C7D1
4 changed files with 70 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

6
tests/e2e/full-flow.spec.js
View file

@ -4,7 +4,7 @@ const { test, expect } = require('@playwright/test');
const fixtures = JSON.parse(process.env.E2E_FIXTURES || '{}');
test.describe('Full user journey', () => {
test('register via magic link, set password, logout, login', async ({ page, request }) => {
test('register via magic link, set password, logout, login', async ({ page }) => {
// Verify fixtures are loaded
expect(fixtures.register_token).toBeTruthy();
@ -40,7 +40,9 @@ test.describe('Full user journey', () => {
await expect(successMsg).toContainText('Password updated');
// ---- Step 3: Logout ----
await request.post('/logout');
// Clear the session cookie via the browser context (the request fixture
// has a separate cookie jar and cannot clear the page's session).
await page.context().clearCookies();
// Navigate to credentials — should redirect to login since we're logged out
await page.goto('/manage/credentials');

4
tests/e2e/login.spec.js
View file

@ -86,8 +86,8 @@ test.describe('Login page', () => {
await expect(page.locator('form[hx-post="/login/password"] button[type="submit"]')).toBeVisible();
});
test('WebAuthn login form exists', async ({ page }) => {
await expect(page.locator('#webauthn-login-form')).toHaveCount(1);
test('WebAuthn login button exists', async ({ page }) => {
await expect(page.locator('#webauthn-login-btn')).toHaveCount(1);
});
});

4
tests/e2e/run.sh
View file

@ -14,7 +14,9 @@ SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
PROJECT_ROOT="$(cd "$SCRIPT_DIR/../.." && pwd)"
PORT="${E2E_PORT:-8099}"
export TARGET_URL="http://127.0.0.1:${PORT}"
# Use "localhost" (not 127.0.0.1) so that the WebAuthn RP ID is a valid
# domain — the spec forbids IP addresses as RP IDs.
export TARGET_URL="http://localhost:${PORT}"
# --- Temp directory for e2e state ---
E2E_TMPDIR="$(mktemp -d)"

99
tests/e2e/webauthn.spec.js
View file

@ -49,6 +49,24 @@ async function loginWithPassword(page, username, password) {
await page.waitForURL('**/manage/credentials', { timeout: 5000 });
}
/**
* Click the "Add security key" button and wait for the registration ceremony
* to complete. The JS calls window.location.reload() on success, so we wait
* for the page navigation event (not just the URL, which is already correct).
*/
async function registerPasskey(page) {
const reloadPromise = page.waitForEvent('load', { timeout: 10000 });
await page.click('#webauthn-register-btn');
await reloadPromise;
}
/**
* Count the current number of credential <li> items in #webauthn-list.
*/
async function getCredentialCount(page) {
return page.locator('#webauthn-list li').count();
}
test.describe('WebAuthn passkey flows', () => {
test.describe('Registration', () => {
test('register a passkey from credentials page', async ({ page }) => {
@ -57,17 +75,15 @@ test.describe('WebAuthn passkey flows', () => {
({ cdpSession, authenticatorId } = await addVirtualAuthenticator(page));
await loginWithPassword(page, fixtures.webauthn_username, fixtures.webauthn_password);
// Before registration, page should show no security keys
await expect(page.locator('#webauthn-list')).toContainText('No security keys registered');
const countBefore = await getCredentialCount(page);
// Click the register button — the virtual authenticator handles the ceremony
await page.click('#webauthn-register-btn');
await registerPasskey(page);
// Registration triggers window.location.reload() on success
await page.waitForURL('**/manage/credentials', { timeout: 10000 });
// After reload the passkey should appear in the list
await expect(page.locator('#webauthn-list li')).toHaveCount(1, { timeout: 5000 });
// After reload one more passkey should appear in the list
await expect(page.locator('#webauthn-list li')).toHaveCount(countBefore + 1, {
timeout: 5000,
});
} finally {
await removeVirtualAuthenticator(cdpSession, authenticatorId);
}
@ -79,16 +95,17 @@ test.describe('WebAuthn passkey flows', () => {
({ cdpSession, authenticatorId } = await addVirtualAuthenticator(page));
await loginWithPassword(page, fixtures.webauthn_username, fixtures.webauthn_password);
const countBefore = await getCredentialCount(page);
// Register a passkey
await page.click('#webauthn-register-btn');
await page.waitForURL('**/manage/credentials', { timeout: 10000 });
await registerPasskey(page);
// Exactly one credential should be listed
// One more credential should be listed
const items = page.locator('#webauthn-list li');
await expect(items).toHaveCount(1, { timeout: 5000 });
await expect(items).toHaveCount(countBefore + 1, { timeout: 5000 });
// The list item should be visible
await expect(items.first()).toBeVisible();
// The last item should be visible (newly added)
await expect(items.last()).toBeVisible();
} finally {
await removeVirtualAuthenticator(cdpSession, authenticatorId);
}
@ -98,7 +115,6 @@ test.describe('WebAuthn passkey flows', () => {
test.describe('Authentication', () => {
test('full round-trip: register passkey, logout, login with passkey', async ({
page,
request,
}) => {
let cdpSession, authenticatorId;
try {
@ -106,14 +122,16 @@ test.describe('WebAuthn passkey flows', () => {
// Step 1: Log in with password and register a passkey
await loginWithPassword(page, fixtures.webauthn_username, fixtures.webauthn_password);
await page.click('#webauthn-register-btn');
await page.waitForURL('**/manage/credentials', { timeout: 10000 });
const countBefore = await getCredentialCount(page);
await registerPasskey(page);
// Verify the passkey is in the list
await expect(page.locator('#webauthn-list li')).toHaveCount(1, { timeout: 5000 });
// Verify a new passkey was added
await expect(page.locator('#webauthn-list li')).toHaveCount(countBefore + 1, {
timeout: 5000,
});
// Step 2: Logout
await request.post('/logout');
await page.context().clearCookies();
// Step 3: Go to login page and authenticate with the passkey (usernameless)
await page.goto('/login');
@ -132,19 +150,21 @@ test.describe('WebAuthn passkey flows', () => {
}
});
test('session established after passkey login', async ({ page, request }) => {
test('session established after passkey login', async ({ page }) => {
let cdpSession, authenticatorId;
try {
({ cdpSession, authenticatorId } = await addVirtualAuthenticator(page));
// Register a passkey via password login first
await loginWithPassword(page, fixtures.webauthn_username, fixtures.webauthn_password);
await page.click('#webauthn-register-btn');
await page.waitForURL('**/manage/credentials', { timeout: 10000 });
await expect(page.locator('#webauthn-list li')).toHaveCount(1, { timeout: 5000 });
const countBefore = await getCredentialCount(page);
await registerPasskey(page);
await expect(page.locator('#webauthn-list li')).toHaveCount(countBefore + 1, {
timeout: 5000,
});
// Logout
await request.post('/logout');
await page.context().clearCookies();
// Login with passkey
await page.goto('/login');
@ -162,23 +182,24 @@ test.describe('WebAuthn passkey flows', () => {
});
test.describe('Deletion', () => {
test('delete a passkey via API after registration', async ({ page, request }) => {
test('delete a passkey via API after registration', async ({ page }) => {
let cdpSession, authenticatorId;
try {
({ cdpSession, authenticatorId } = await addVirtualAuthenticator(page));
await loginWithPassword(page, fixtures.webauthn_username, fixtures.webauthn_password);
const countBefore = await getCredentialCount(page);
// Register a passkey
await page.click('#webauthn-register-btn');
await page.waitForURL('**/manage/credentials', { timeout: 10000 });
await expect(page.locator('#webauthn-list li')).toHaveCount(1, { timeout: 5000 });
await registerPasskey(page);
await expect(page.locator('#webauthn-list li')).toHaveCount(countBefore + 1, {
timeout: 5000,
});
// The credentials template does not expose a delete button in the UI.
// Test the DELETE API endpoint directly instead.
const credResponse = await request.get('/manage/credentials');
const html = await credResponse.text();
// Verify registration was successful by checking the page content directly.
const html = await page.content();
// Extract the credential ID from the page HTML (data attribute or link)
// The template renders <li> items; the API endpoint is DELETE /manage/credentials/webauthn/{id}
// Since the template doesn't include IDs in the HTML, verify registration was successful
// and note that the delete UI is not yet wired up in the template.
@ -212,19 +233,21 @@ test.describe('WebAuthn passkey flows', () => {
await expect(status).not.toBeEmpty();
});
test('server error on authentication complete shows error', async ({ page, request }) => {
test('server error on authentication complete shows error', async ({ page }) => {
let cdpSession, authenticatorId;
try {
({ cdpSession, authenticatorId } = await addVirtualAuthenticator(page));
// First register a passkey so the authenticator has a credential
await loginWithPassword(page, fixtures.webauthn_username, fixtures.webauthn_password);
await page.click('#webauthn-register-btn');
await page.waitForURL('**/manage/credentials', { timeout: 10000 });
await expect(page.locator('#webauthn-list li')).toHaveCount(1, { timeout: 5000 });
const countBefore = await getCredentialCount(page);
await registerPasskey(page);
await expect(page.locator('#webauthn-list li')).toHaveCount(countBefore + 1, {
timeout: 5000,
});
// Logout
await request.post('/logout');
await page.context().clearCookies();
// Go to login page
await page.goto('/login');