cfa137795b
* refactor: consolidate AGENTS.md and CLAUDE.md files, update tech stack and architecture details - Merged content from CLAUDE.md into AGENTS.md for better organization. - Updated tech stack section to reflect the current technologies used, including Next.js, Supabase, and Tailwind CSS. - Enhanced monorepo structure documentation with detailed directory purposes. - Streamlined multi-tenant architecture explanation and essential commands. - Added key patterns for naming conventions and server actions. - Removed outdated agent files related to Playwright and PostgreSQL, ensuring a cleaner codebase. - Bumped version to 2.23.7 to reflect changes.
3.4 KiB
3.4 KiB
Makerkit E2E Testing Patterns
Page Objects Location
apps/e2e/tests/*.po.ts
Auth Page Object
export class AuthPageObject {
constructor(private readonly page: Page) {}
static MFA_KEY = 'test-mfa-key';
async signIn(params: { email: string; password: string }) {
await this.page.fill('input[name="email"]', params.email);
await this.page.fill('input[name="password"]', params.password);
await this.page.click('button[type="submit"]');
}
async signOut() {
await this.page.click('[data-test="account-dropdown-trigger"]');
await this.page.click('[data-test="account-dropdown-sign-out"]');
}
async bootstrapUser(params: { email: string; password: string; name: string }) {
// Creates user via API
await fetch('/api/test/create-user', {
method: 'POST',
body: JSON.stringify(params),
});
}
async loginAsUser(params: { email: string; password: string }) {
await this.page.goto('/auth/sign-in');
await this.signIn(params);
await this.page.waitForURL('**/home/**');
}
createRandomEmail() {
const value = Math.random() * 10000000000000;
return `${value.toFixed(0)}@makerkit.dev`;
}
}
Common Selectors
// Account dropdown
'[data-test="account-dropdown-trigger"]'
'[data-test="account-dropdown-sign-out"]'
// Navigation
'[data-test="sidebar-menu"]'
'[data-test="mobile-menu-trigger"]'
// Forms
'[data-test="submit-button"]'
'[data-test="cancel-button"]'
// Modals
'[data-test="dialog-confirm"]'
'[data-test="dialog-cancel"]'
Test Setup Pattern
// tests/auth.setup.ts
import { test as setup } from '@playwright/test';
setup('authenticate', async ({ page }) => {
const auth = new AuthPageObject(page);
await auth.bootstrapUser({
email: 'test@example.com',
password: 'password123',
name: 'Test User',
});
await auth.loginAsUser({
email: 'test@example.com',
password: 'password123',
});
// Save authentication state
await page.context().storageState({ path: '.auth/user.json' });
});
Reliability Patterns
OTP/Email Operations
await expect(async () => {
const otpCode = await this.getOtpCodeFromEmail(email);
expect(otpCode).not.toBeNull();
await this.enterOtpCode(otpCode);
}).toPass();
MFA Verification
await expect(async () => {
await auth.submitMFAVerification(AuthPageObject.MFA_KEY);
}).toPass({
intervals: [500, 2500, 5000, 7500, 10_000, 15_000, 20_000]
});
Network Requests
await expect(async () => {
const response = await this.page.waitForResponse(
resp => resp.url().includes('auth/v1/user')
);
expect(response.status()).toBe(200);
}).toPass();
Test Organization
apps/e2e/
├── playwright.config.ts
├── tests/
│ ├── auth.setup.ts
│ ├── authentication/
│ │ ├── sign-in.spec.ts
│ │ └── sign-up.spec.ts
│ ├── billing/
│ │ └── subscription.spec.ts
│ ├── teams/
│ │ └── invitations.spec.ts
│ └── utils/
│ └── auth.po.ts
└── .auth/
└── user.json
Running Tests
# Single file
pnpm --filter web-e2e exec playwright test authentication --workers=1
# With UI
pnpm --filter web-e2e exec playwright test --ui
# Debug mode
pnpm --filter web-e2e exec playwright test --debug