@@ -2,18 +2,19 @@ import { test, expect } from '@playwright/test';
22
33test . describe ( 'Authentication' , ( ) => {
44 test . beforeEach ( async ( { page } ) => {
5- // Clear all storage (localStorage stores auth state, not cookies)
5+ // Clear ALL auth state: cookies (HTTP-only auth token) + localStorage (cached state)
6+ await page . context ( ) . clearCookies ( ) ;
67 await page . goto ( '/login' ) ;
78 await page . evaluate ( ( ) => {
89 localStorage . clear ( ) ;
910 sessionStorage . clear ( ) ;
1011 } ) ;
11- await page . reload ( ) ;
1212 } ) ;
1313
1414 test ( 'shows login page with form elements' , async ( { page } ) => {
1515 await page . goto ( '/login' ) ;
16- await page . waitForLoadState ( 'networkidle' ) ;
16+ // Wait for the login form to render
17+ await page . waitForSelector ( '#username' ) ;
1718
1819 await expect ( page . locator ( 'h2' ) ) . toContainText ( 'Sign in to your account' ) ;
1920 await expect ( page . locator ( '#username' ) ) . toBeVisible ( ) ;
@@ -23,27 +24,26 @@ test.describe('Authentication', () => {
2324
2425 test ( 'shows validation when submitting empty form' , async ( { page } ) => {
2526 await page . goto ( '/login' ) ;
26- await page . waitForLoadState ( 'networkidle ') ;
27+ await page . waitForSelector ( '#username ') ;
2728
2829 const usernameInput = page . locator ( '#username' ) ;
2930 await expect ( usernameInput ) . toHaveAttribute ( 'required' , '' ) ;
3031 } ) ;
3132
3233 test ( 'shows error with invalid credentials' , async ( { page } ) => {
3334 await page . goto ( '/login' ) ;
34- await page . waitForLoadState ( 'networkidle ') ;
35+ await page . waitForSelector ( '#username ') ;
3536
3637 await page . fill ( '#username' , 'invaliduser' ) ;
3738 await page . fill ( '#password' , 'wrongpassword' ) ;
3839 await page . click ( 'button[type="submit"]' ) ;
3940
40- // Wait for error message to appear
4141 await expect ( page . locator ( 'p.text-red-600, p.text-red-400' ) ) . toBeVisible ( ) ;
4242 } ) ;
4343
4444 test ( 'redirects to editor on successful login' , async ( { page } ) => {
4545 await page . goto ( '/login' ) ;
46- await page . waitForLoadState ( 'networkidle ') ;
46+ await page . waitForSelector ( '#username ') ;
4747
4848 await page . fill ( '#username' , 'user' ) ;
4949 await page . fill ( '#password' , 'user123' ) ;
@@ -54,55 +54,41 @@ test.describe('Authentication', () => {
5454
5555 test ( 'shows loading state during login' , async ( { page } ) => {
5656 await page . goto ( '/login' ) ;
57- await page . waitForLoadState ( 'networkidle ') ;
57+ await page . waitForSelector ( '#username ') ;
5858
5959 await page . fill ( '#username' , 'user' ) ;
6060 await page . fill ( '#password' , 'user123' ) ;
6161
6262 const submitButton = page . locator ( 'button[type="submit"]' ) ;
6363 await submitButton . click ( ) ;
6464
65- // Button should show loading text or sign in
6665 await expect ( submitButton ) . toContainText ( / L o g g i n g i n | S i g n i n / ) ;
6766 } ) ;
6867
6968 test ( 'redirects unauthenticated users from protected routes' , async ( { page } ) => {
70- // Ensure clean state
71- await page . goto ( '/login' ) ;
72- await page . evaluate ( ( ) => localStorage . clear ( ) ) ;
73-
74- // Try to access protected route
7569 await page . goto ( '/editor' ) ;
76- await page . waitForLoadState ( 'networkidle' ) ;
77-
78- // Should redirect to login
70+ // Should redirect to login and show login form
71+ await page . waitForSelector ( '#username' ) ;
7972 await expect ( page ) . toHaveURL ( / \/ l o g i n / ) ;
8073 } ) ;
8174
8275 test ( 'preserves redirect path after login' , async ( { page } ) => {
83- // Ensure clean state
84- await page . goto ( '/login' ) ;
85- await page . evaluate ( ( ) => localStorage . clear ( ) ) ;
86-
87- // Try to access specific protected route
8876 await page . goto ( '/settings' ) ;
89- await page . waitForLoadState ( 'networkidle' ) ;
90-
9177 // Should redirect to login
78+ await page . waitForSelector ( '#username' ) ;
9279 await expect ( page ) . toHaveURL ( / \/ l o g i n / ) ;
9380
9481 // Login
9582 await page . fill ( '#username' , 'user' ) ;
9683 await page . fill ( '#password' , 'user123' ) ;
9784 await page . click ( 'button[type="submit"]' ) ;
9885
99- // Should redirect back to settings
10086 await expect ( page ) . toHaveURL ( / \/ s e t t i n g s / ) ;
10187 } ) ;
10288
10389 test ( 'has link to registration page' , async ( { page } ) => {
10490 await page . goto ( '/login' ) ;
105- await page . waitForLoadState ( 'networkidle ') ;
91+ await page . waitForSelector ( '#username ') ;
10692
10793 const registerLink = page . locator ( 'a[href="/register"]' ) ;
10894 await expect ( registerLink ) . toBeVisible ( ) ;
@@ -111,7 +97,7 @@ test.describe('Authentication', () => {
11197
11298 test ( 'can navigate to registration page' , async ( { page } ) => {
11399 await page . goto ( '/login' ) ;
114- await page . waitForLoadState ( 'networkidle ') ;
100+ await page . waitForSelector ( '#username ') ;
115101
116102 await page . click ( 'a[href="/register"]' ) ;
117103
@@ -121,14 +107,14 @@ test.describe('Authentication', () => {
121107
122108test . describe ( 'Logout' , ( ) => {
123109 test . beforeEach ( async ( { page } ) => {
124- // Clear state first
110+ // Clear all state first
111+ await page . context ( ) . clearCookies ( ) ;
125112 await page . goto ( '/login' ) ;
126113 await page . evaluate ( ( ) => {
127114 localStorage . clear ( ) ;
128115 sessionStorage . clear ( ) ;
129116 } ) ;
130- await page . reload ( ) ;
131- await page . waitForLoadState ( 'networkidle' ) ;
117+ await page . waitForSelector ( '#username' ) ;
132118
133119 // Login
134120 await page . fill ( '#username' , 'user' ) ;
0 commit comments