Expand e2e test coverage migrate to API-based data setup

This commit is contained in:
Gregor Vostrak
2026-02-09 15:41:53 +01:00
parent f75a19bccd
commit 125f6f062f
24 changed files with 3043 additions and 819 deletions

View File

@@ -1,2 +1,3 @@
export const PLAYWRIGHT_BASE_URL = process.env.PLAYWRIGHT_BASE_URL ?? 'http://solidtime.test';
export const MAILPIT_BASE_URL = process.env.MAILPIT_BASE_URL ?? 'http://mailpit:8025';
export const TEST_USER_PASSWORD = 'amazingpassword123';

View File

@@ -1,27 +1,83 @@
import { test as baseTest } from '@playwright/test';
import { PLAYWRIGHT_BASE_URL } from './config';
import { PLAYWRIGHT_BASE_URL, TEST_USER_PASSWORD } from './config';
import { type TestContext, setupTestContext } from '../e2e/utils/api';
export * from '@playwright/test';
export const test = baseTest.extend<object, { workerStorageState: string }>({
// Use the same storage state for all tests in this worker.
export type { TestContext };
/**
* API-based authentication fixture - creates a new user via HTTP requests instead of UI interactions.
* This is ~10-25x faster than UI-based authentication (~100-200ms vs ~3-5s).
*
* Uses page.context().request() to ensure cookies are shared between the API request and page.
*/
export const test = baseTest.extend<{ ctx: TestContext }, { workerStorageState: string }>({
page: async ({ page }, use) => {
// Perform authentication steps. Replace these actions with your own.
await page.goto(PLAYWRIGHT_BASE_URL + '/register');
await page.getByLabel('Name').fill('John Doe');
await page.getByLabel('Email').fill(`john+${Math.round(Math.random() * 1000000)}@doe.com`);
await page.getByLabel('Password', { exact: true }).fill('amazingpassword123');
await page.getByLabel('Confirm Password').fill('amazingpassword123');
await page.getByLabel('I agree to the Terms of').click();
await page.getByRole('button', { name: 'Register' }).click();
// Generate unique email for this test
const email = `john+${Date.now()}_${Math.floor(Math.random() * 10000)}@doe.com`;
const password = TEST_USER_PASSWORD;
const name = 'John Doe';
// Wait until the page receives the cookies.
//
// Sometimes login flow sets cookies in the process of several redirects.
// Wait for the final URL to ensure that the cookies are actually set.
await page.waitForURL(PLAYWRIGHT_BASE_URL + '/dashboard');
// Use page.context().request() so cookies are automatically shared with the page
const request = page.context().request;
// End of authentication steps.
// Step 1: Visit the register page to get CSRF token and initial session
const csrfResponse = await request.get(`${PLAYWRIGHT_BASE_URL}/register`, {
maxRedirects: 0,
});
// Extract XSRF-TOKEN from cookies
const cookies = csrfResponse.headers()['set-cookie'];
let xsrfToken = '';
if (cookies) {
const xsrfMatch = cookies.match(/XSRF-TOKEN=([^;]+)/);
if (xsrfMatch) {
xsrfToken = decodeURIComponent(xsrfMatch[1]);
}
}
// Step 2: Register via API (Laravel Fortify web routes)
const registerResponse = await request.post(`${PLAYWRIGHT_BASE_URL}/register`, {
headers: {
'X-XSRF-TOKEN': xsrfToken,
'Content-Type': 'application/x-www-form-urlencoded',
'Accept': 'text/html',
},
form: {
name,
email,
password,
password_confirmation: password,
terms: 'on',
},
maxRedirects: 0,
});
// Check if registration was successful (should redirect to dashboard)
if (registerResponse.status() !== 302) {
console.error('API registration failed, falling back to UI-based registration');
// Fall back to UI-based registration
await page.goto(`${PLAYWRIGHT_BASE_URL}/register`);
await page.getByLabel('Name').fill(name);
await page.getByLabel('Email').fill(email);
await page.getByLabel('Password', { exact: true }).fill(password);
await page.getByLabel('Confirm Password').fill(password);
await page.getByLabel('I agree to the Terms of').click();
await page.getByRole('button', { name: 'Register' }).click();
await page.waitForURL(`${PLAYWRIGHT_BASE_URL}/dashboard`);
} else {
// Registration succeeded - cookies are already set in the context from the request
// Just navigate to dashboard to verify
await page.goto(`${PLAYWRIGHT_BASE_URL}/dashboard`);
await page.waitForLoadState('domcontentloaded');
}
await use(page);
},
ctx: async ({ page }, use) => {
const ctx = await setupTestContext(page);
await use(ctx);
},
});