Improve the UI and tests
This commit is contained in:
@@ -1,26 +1,29 @@
|
||||
import { test, expect } from '@playwright/test';
|
||||
import { login, logout, TEST_USER } from '../helpers/auth';
|
||||
import { acceptCookieConsent } from '../helpers/utils';
|
||||
|
||||
test.describe('Login Flow', () => {
|
||||
test.beforeEach(async ({ page }) => {
|
||||
// Start at login page
|
||||
await page.goto('/login');
|
||||
// Accept cookie consent if present
|
||||
await acceptCookieConsent(page);
|
||||
});
|
||||
|
||||
test('should display login form', async ({ page }) => {
|
||||
// Verify login page elements are visible
|
||||
await expect(page.getByLabel(/email/i)).toBeVisible();
|
||||
await expect(page.getByLabel(/password/i)).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: /log in|sign in|login/i })).toBeVisible();
|
||||
// Verify login page elements are visible (support both English and Spanish)
|
||||
await expect(page.getByLabel(/email|correo/i)).toBeVisible();
|
||||
await expect(page.getByRole('textbox', { name: /password|contraseña/i })).toBeVisible();
|
||||
await expect(page.getByRole('button', { name: /log in|sign in|login|acceder/i })).toBeVisible();
|
||||
});
|
||||
|
||||
test('should successfully login with valid credentials', async ({ page }) => {
|
||||
// Fill in credentials
|
||||
await page.getByLabel(/email/i).fill(TEST_USER.email);
|
||||
await page.getByLabel(/password/i).fill(TEST_USER.password);
|
||||
await page.getByLabel(/email|correo/i).fill(TEST_USER.email);
|
||||
await page.getByRole('textbox', { name: /password|contraseña/i }).fill(TEST_USER.password);
|
||||
|
||||
// Click login button
|
||||
await page.getByRole('button', { name: /log in|sign in|login/i }).click();
|
||||
await page.getByRole('button', { name: /log in|sign in|login|acceder/i }).click();
|
||||
|
||||
// Should redirect to dashboard or app
|
||||
await expect(page).toHaveURL(/\/(app|dashboard)/, { timeout: 10000 });
|
||||
@@ -31,11 +34,11 @@ test.describe('Login Flow', () => {
|
||||
|
||||
test('should show error with invalid email', async ({ page }) => {
|
||||
// Fill in invalid credentials
|
||||
await page.getByLabel(/email/i).fill('invalid@email.com');
|
||||
await page.getByLabel(/password/i).fill('wrongpassword');
|
||||
await page.getByLabel(/email|correo/i).fill('invalid@email.com');
|
||||
await page.getByRole('textbox', { name: /password|contraseña/i }).fill('wrongpassword');
|
||||
|
||||
// Click login button
|
||||
await page.getByRole('button', { name: /log in|sign in|login/i }).click();
|
||||
await page.getByRole('button', { name: /log in|sign in|login|acceder/i }).click();
|
||||
|
||||
// Should show error message
|
||||
await expect(page.locator('body')).toContainText(/invalid|incorrect|error|credenciales/i, {
|
||||
@@ -48,8 +51,8 @@ test.describe('Login Flow', () => {
|
||||
|
||||
test('should show validation error for empty email', async ({ page }) => {
|
||||
// Try to submit without email
|
||||
await page.getByLabel(/password/i).fill('somepassword');
|
||||
await page.getByRole('button', { name: /log in|sign in|login/i }).click();
|
||||
await page.getByRole('textbox', { name: /password|contraseña/i }).fill('somepassword');
|
||||
await page.getByRole('button', { name: /log in|sign in|login|acceder/i }).click();
|
||||
|
||||
// Should show validation error (either inline or toast)
|
||||
const bodyText = await page.locator('body').textContent();
|
||||
@@ -58,8 +61,8 @@ test.describe('Login Flow', () => {
|
||||
|
||||
test('should show validation error for empty password', async ({ page }) => {
|
||||
// Try to submit without password
|
||||
await page.getByLabel(/email/i).fill('test@example.com');
|
||||
await page.getByRole('button', { name: /log in|sign in|login/i }).click();
|
||||
await page.getByLabel(/email|correo/i).fill('test@example.com');
|
||||
await page.getByRole('button', { name: /log in|sign in|login|acceder/i }).click();
|
||||
|
||||
// Should show validation error
|
||||
const bodyText = await page.locator('body').textContent();
|
||||
@@ -67,15 +70,17 @@ test.describe('Login Flow', () => {
|
||||
});
|
||||
|
||||
test('should toggle password visibility', async ({ page }) => {
|
||||
const passwordInput = page.getByLabel(/password/i);
|
||||
const passwordInput = page.getByRole('textbox', { name: /password|contraseña/i });
|
||||
|
||||
// Initially should be password type
|
||||
await expect(passwordInput).toHaveAttribute('type', 'password');
|
||||
|
||||
// Look for toggle button (eye icon, "show password", etc.)
|
||||
const toggleButton = page.locator('button:has-text("Show"), button:has-text("Mostrar"), button[aria-label*="password"]').first();
|
||||
const toggleButton = page.getByRole('button', { name: /show|mostrar.*password|contraseña/i });
|
||||
|
||||
if (await toggleButton.isVisible()) {
|
||||
const isToggleVisible = await toggleButton.isVisible({ timeout: 2000 }).catch(() => false);
|
||||
|
||||
if (isToggleVisible) {
|
||||
await toggleButton.click();
|
||||
|
||||
// Should change to text type
|
||||
@@ -88,11 +93,18 @@ test.describe('Login Flow', () => {
|
||||
});
|
||||
|
||||
test('should have link to registration page', async ({ page }) => {
|
||||
// Look for register/signup link
|
||||
const registerLink = page.getByRole('link', { name: /register|sign up|crear cuenta/i });
|
||||
// Look for register/signup button or link
|
||||
const registerButton = page.getByRole('button', { name: /register|sign up|crear cuenta|registrar/i });
|
||||
const registerLink = page.getByRole('link', { name: /register|sign up|crear cuenta|registrar/i });
|
||||
|
||||
if (await registerLink.isVisible()) {
|
||||
const isButtonVisible = await registerButton.isVisible({ timeout: 2000 }).catch(() => false);
|
||||
const isLinkVisible = await registerLink.isVisible({ timeout: 2000 }).catch(() => false);
|
||||
|
||||
if (isLinkVisible) {
|
||||
await expect(registerLink).toHaveAttribute('href', /\/register/);
|
||||
} else if (isButtonVisible) {
|
||||
// If it's a button, just verify it exists
|
||||
await expect(registerButton).toBeVisible();
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user