120 lines
4.6 KiB
Markdown
120 lines
4.6 KiB
Markdown
# Login Template
|
|
|
|
Tests email/password login, social login, and remember me functionality.
|
|
|
|
## Prerequisites
|
|
- Valid user account: `{{username}}` / `{{password}}`
|
|
- Social provider configured (Google/GitHub)
|
|
- App running at `{{baseUrl}}`
|
|
|
|
---
|
|
|
|
## TypeScript
|
|
|
|
```typescript
|
|
import { test, expect } from '@playwright/test';
|
|
|
|
test.describe('Login', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('{{baseUrl}}/login');
|
|
});
|
|
|
|
// Happy path: email/password login
|
|
test('logs in with valid credentials', async ({ page }) => {
|
|
await page.getByRole('textbox', { name: /email/i }).fill('{{username}}');
|
|
await page.getByRole('textbox', { name: /password/i }).fill('{{password}}');
|
|
await page.getByRole('button', { name: /sign in/i }).click();
|
|
await expect(page).toHaveURL('{{baseUrl}}/dashboard');
|
|
await expect(page.getByRole('heading', { name: /dashboard/i })).toBeVisible();
|
|
});
|
|
|
|
// Happy path: remember me
|
|
test('persists session with remember me checked', async ({ page, context }) => {
|
|
await page.getByRole('textbox', { name: /email/i }).fill('{{username}}');
|
|
await page.getByRole('textbox', { name: /password/i }).fill('{{password}}');
|
|
await page.getByRole('checkbox', { name: /remember me/i }).check();
|
|
await page.getByRole('button', { name: /sign in/i }).click();
|
|
await expect(page).toHaveURL('{{baseUrl}}/dashboard');
|
|
const cookies = await context.cookies();
|
|
const session = cookies.find(c => c.name === '{{sessionCookieName}}');
|
|
expect(session?.expires).toBeGreaterThan(Date.now() / 1000 + 86400);
|
|
});
|
|
|
|
// Happy path: social login
|
|
test('redirects to social provider', async ({ page }) => {
|
|
await page.getByRole('button', { name: /continue with google/i }).click();
|
|
await expect(page).toHaveURL(/accounts\.google\.com/);
|
|
});
|
|
|
|
// Error case: invalid credentials
|
|
test('shows error for wrong password', async ({ page }) => {
|
|
await page.getByRole('textbox', { name: /email/i }).fill('{{username}}');
|
|
await page.getByRole('textbox', { name: /password/i }).fill('wrong-password');
|
|
await page.getByRole('button', { name: /sign in/i }).click();
|
|
await expect(page.getByRole('alert')).toContainText(/invalid.*credentials/i);
|
|
await expect(page).toHaveURL('{{baseUrl}}/login');
|
|
});
|
|
|
|
// Edge case: empty fields
|
|
test('shows validation for empty submission', async ({ page }) => {
|
|
await page.getByRole('button', { name: /sign in/i }).click();
|
|
await expect(page.getByRole('textbox', { name: /email/i })).toBeFocused();
|
|
await expect(page.getByText(/email is required/i)).toBeVisible();
|
|
});
|
|
|
|
// Edge case: locked account
|
|
test('shows account locked message after multiple failures', async ({ page }) => {
|
|
for (let i = 0; i < {{lockoutAttempts}}; i++) {
|
|
await page.getByRole('textbox', { name: /email/i }).fill('{{username}}');
|
|
await page.getByRole('textbox', { name: /password/i }).fill('wrong');
|
|
await page.getByRole('button', { name: /sign in/i }).click();
|
|
}
|
|
await expect(page.getByRole('alert')).toContainText(/account.*locked/i);
|
|
});
|
|
});
|
|
```
|
|
|
|
---
|
|
|
|
## JavaScript
|
|
|
|
```javascript
|
|
const { test, expect } = require('@playwright/test');
|
|
|
|
test.describe('Login', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
await page.goto('{{baseUrl}}/login');
|
|
});
|
|
|
|
test('logs in with valid credentials', async ({ page }) => {
|
|
await page.getByRole('textbox', { name: /email/i }).fill('{{username}}');
|
|
await page.getByRole('textbox', { name: /password/i }).fill('{{password}}');
|
|
await page.getByRole('button', { name: /sign in/i }).click();
|
|
await expect(page).toHaveURL('{{baseUrl}}/dashboard');
|
|
await expect(page.getByRole('heading', { name: /dashboard/i })).toBeVisible();
|
|
});
|
|
|
|
test('shows error for wrong password', async ({ page }) => {
|
|
await page.getByRole('textbox', { name: /email/i }).fill('{{username}}');
|
|
await page.getByRole('textbox', { name: /password/i }).fill('wrong-password');
|
|
await page.getByRole('button', { name: /sign in/i }).click();
|
|
await expect(page.getByRole('alert')).toContainText(/invalid.*credentials/i);
|
|
});
|
|
|
|
test('shows validation for empty submission', async ({ page }) => {
|
|
await page.getByRole('button', { name: /sign in/i }).click();
|
|
await expect(page.getByText(/email is required/i)).toBeVisible();
|
|
});
|
|
});
|
|
```
|
|
|
|
## Variants
|
|
| Variant | Description |
|
|
|---------|-------------|
|
|
| Happy path | Valid credentials → dashboard redirect |
|
|
| Remember me | Long-lived cookie set |
|
|
| Social login | OAuth redirect to provider |
|
|
| Wrong password | Alert with error message |
|
|
| Empty form | Inline validation shown |
|
|
| Locked account | Lockout message after N failures |
|