@@ -14,6 +14,37 @@ async function waitForConsentBannerHidden(page: BasePage): Promise<void> {
1414 await expect ( getConsentBanner ( page ) ) . toBeHidden ( { timeout : 5000 } )
1515}
1616
17+ async function removeViteErrorOverlay ( page : BasePage ) : Promise < void > {
18+ await page . evaluate ( ( ) => {
19+ const styleId = 'disable-vite-overlay-style'
20+ if ( ! document . getElementById ( styleId ) ) {
21+ const style = document . createElement ( 'style' )
22+ style . id = styleId
23+ style . textContent = `
24+ vite-error-overlay {
25+ pointer-events: none !important;
26+ opacity: 0 !important;
27+ display: none !important;
28+ }
29+ `
30+ document . head . append ( style )
31+ }
32+
33+ document . querySelectorAll ( 'vite-error-overlay' ) . forEach ( element => {
34+ element . remove ( )
35+ } )
36+ } )
37+ }
38+
39+ async function acceptAllCookies ( page : BasePage ) : Promise < void > {
40+ await removeViteErrorOverlay ( page )
41+ const cookieBanner = getConsentBanner ( page )
42+ const acceptButton = cookieBanner . locator ( 'button:has-text("Allow All")' )
43+
44+ await acceptButton . click ( )
45+ await waitForConsentBannerHidden ( page )
46+ }
47+
1748
1849test . describe ( 'Consent Banner' , ( ) => {
1950 /**
@@ -37,18 +68,26 @@ test.describe('Consent Banner', () => {
3768 // Clear all cookies and storage before navigation
3869 await context . clearCookies ( )
3970
40- // Navigate to page and clear storage
41- await page . goto ( '/' )
71+ // Navigate to page without auto-dismissing the consent banner and clear storage
72+ await page . goto ( '/' , { skipCookieDismiss : true , timeout : 15000 } )
4273 await page . evaluate ( ( ) => {
4374 localStorage . clear ( )
4475 sessionStorage . clear ( )
76+
77+ const expirations = 'Thu, 01 Jan 1970 00:00:00 GMT'
78+ document . cookie = `consent_analytics=; expires=${ expirations }
79+ document . cookie = `consent_marketing=; expires=${ expirations }
80+ document . cookie = `consent_functional=; expires=${ expirations }
81+ document . cookie = `consent_banner=; expires=${ expirations }
4582 } )
4683
4784 // Wait for consent banner custom element to be initialized
4885 await page . waitForFunction ( ( ) => {
4986 const element = document . querySelector < HTMLElement & { isInitialized ?: boolean } > ( 'consent-banner' )
5087 return element ?. isInitialized === true
5188 } , { timeout : 5000 } )
89+
90+ await removeViteErrorOverlay ( page )
5291 } )
5392
5493 test ( '@ready consent banner displays on first visit' , async ( { page : playwrightPage } ) => {
@@ -80,24 +119,18 @@ test.describe('Consent Banner', () => {
80119 test ( '@ready clicking allow all hides banner' , async ( { page : playwrightPage } ) => {
81120 const page = await BasePage . init ( playwrightPage )
82121 // Expected: Consent banner should disappear after accepting
83- const cookieBanner = getConsentBanner ( page )
84- const acceptButton = cookieBanner . locator ( 'button:has-text("Allow All")' )
85-
86- await acceptButton . click ( )
87- await waitForConsentBannerHidden ( page )
122+ await acceptAllCookies ( page )
88123 } )
89124
90125 test ( '@ready accept choice persists across page reloads' , async ( { page : playwrightPage } ) => {
91126 const page = await BasePage . init ( playwrightPage )
92127 // Expected: After accepting, banner should not reappear
93128 const cookieBanner = getConsentBanner ( page )
94- const acceptButton = cookieBanner . locator ( 'button:has-text("Allow All")' )
95-
96- await acceptButton . click ( )
97- await waitForConsentBannerHidden ( page )
129+ await acceptAllCookies ( page )
98130
99131 await page . reload ( { waitUntil : 'domcontentloaded' } )
100132 await page . waitForLoadState ( 'networkidle' )
133+ await removeViteErrorOverlay ( page )
101134
102135 await expect ( cookieBanner ) . toBeHidden ( )
103136 } )
@@ -106,13 +139,11 @@ test.describe('Consent Banner', () => {
106139 const page = await BasePage . init ( playwrightPage )
107140 // Expected: After accepting, banner should not appear on other pages
108141 const cookieBanner = getConsentBanner ( page )
109- const acceptButton = cookieBanner . locator ( 'button:has-text("Allow All")' )
110-
111- await acceptButton . click ( )
112- await waitForConsentBannerHidden ( page )
142+ await acceptAllCookies ( page )
113143
114- await page . goto ( '/about' )
144+ await page . goto ( '/about' , { timeout : 15000 } )
115145 await page . waitForLoadState ( 'networkidle' )
146+ await removeViteErrorOverlay ( page )
116147
117148 await expect ( cookieBanner ) . toBeHidden ( )
118149 } )
@@ -132,11 +163,22 @@ test.describe('Consent Banner', () => {
132163 const cookieBanner = getConsentBanner ( page )
133164 await expect ( cookieBanner ) . toBeVisible ( )
134165
135- // Tab to first interactive element (close button)
166+ const closeButton = cookieBanner . getByRole ( 'button' , { name : / c l o s e c o o k i e c o n s e n t d i a l o g / i} )
167+ const allowAllButton = cookieBanner . locator ( 'button:has-text("Allow All")' )
168+
169+ await cookieBanner . focus ( )
170+
171+ // Tab to the close button and verify focus follows the keyboard
136172 await page . keyboard . press ( 'Tab' )
173+ await expect . poll ( async ( ) => {
174+ return await closeButton . evaluate ( node => document . activeElement === node )
175+ } ) . toBe ( true )
137176
138177 // Tab to Allow All button
139178 await page . keyboard . press ( 'Tab' )
179+ await expect . poll ( async ( ) => {
180+ return await allowAllButton . evaluate ( node => document . activeElement === node )
181+ } ) . toBe ( true )
140182
141183 // Should be able to press Enter to activate
142184 await page . keyboard . press ( 'Enter' )
0 commit comments