Fix a11y failing tets on PDP

e2e/scripts/pageHelpers.js

@@ -25,6 +25,9 @@ export const answerConsentTrackingForm = async (page, dnt = false) => {
         await expect(answerButton).toBeVisible()
         await answerButton.click()
         await expect(answerButton).not.toBeVisible()
+        // after clicking an answering button, the tracking consent should not stay in the DOM
+        const consentElements = await page.locator('text=Tracking Consent').count()
+        expect(consentElements).toBe(0)
     }
 }
 
@@ -599,9 +602,6 @@ export const wishlistFlow = async ({page, registeredUserCredentials, a11y = {}})
     await answerConsentTrackingForm(page)
     await page.waitForLoadState()
 
-    await expect(page.getByRole('heading', {name: /Account Details/i})).toBeVisible({
-        timeout: 20000
-    })
     // Navigate to PDP
     await navigateToPDPDesktop({page})
 

e2e/scripts/utils.js

@@ -86,10 +86,22 @@ function sanitizeHtml(html) {
  *
  * @param {Page} page - Playwright page object
  * @param {string|string[]} snapshotName - Name for the snapshot file
+ * @param {Object} options - Optional configuration
+ * @param {string[]} options.exclude - CSS selectors to exclude from scan
  */
-async function runAccessibilityTest(page, snapshotName) {
+async function runAccessibilityTest(page, snapshotName, options = {}) {
+    const {exclude = []} = options
+
+    // Create AxeBuilder instance
+    let axeBuilder = new AxeBuilder({page})
+
+    // Add exclusions if provided
+    if (exclude.length > 0) {
+        axeBuilder = axeBuilder.exclude(exclude)
+    }
+
     // Run the accessibility audit
-    const accessibilityScanResults = await new AxeBuilder({page}).analyze()
+    const accessibilityScanResults = await axeBuilder.analyze()
 
     // console.log(`Found ${accessibilityScanResults.violations.length} accessibility violations`)
 

e2e/tests/a11y/desktop/a11y-snapshot-test-guest.spec.js

@@ -52,11 +52,46 @@ test.describe('Accessibility Tests with Snapshots for guest user', () => {
     test('Product Detail Page should not have new accessibility issues', async ({page}) => {
         await navigateToPDPDesktop({page})
 
+        const getProductPromise = page.waitForResponse(
+            '**/shopper-products/v1/organizations/**/products/25518241M**',
+            {timeout: 10000}
+        )
+
+        await getProductPromise
+        const getProductRes = await getProductPromise
+        expect(getProductRes.status()).toBe(200)
         // ensure that the page is fully loaded before starting a11y scan
         await expect(page.getByRole('heading', {name: /Cotton Turtleneck Sweater/i})).toBeVisible()
         await expect(page.getByText(/From \$39\.99/i).nth(1)).toBeVisible()
 
-        await page.waitForLoadState()
+        const addToWishlistButton = page.getByRole('button', {name: /Add to Wishlist/i})
+        await expect(addToWishlistButton).toBeVisible()
+        await expect(addToWishlistButton).toBeEnabled()
+        // NOTE: Chakra Skeleton has animation when it is visible in the DOME,
+        // sometimes axe can't detect if the transition from skeleton to element is completed or not
+        // which cause the a11y scan to detect false positive violations
+        // here, we want to ensure skeleton is completely gone before running a11y scan
+        await page
+            .waitForFunction(
+                () => {
+                    const skeletons = Array.from(document.querySelectorAll('.chakra-skeleton'))
+                    return skeletons.every((skeleton) => {
+                        // Check if skeleton has data-loaded attribute (Chakra UI sets this when loaded)
+                        const hasDataLoaded = skeleton.hasAttribute('data-loaded')
+
+                        // Check if skeleton animation has stopped
+                        const computedStyle = getComputedStyle(skeleton)
+                        const hasNoAnimation = computedStyle.animationName === 'none'
+
+                        // Consider it loaded if either condition is met
+                        return hasDataLoaded || hasNoAnimation
+                    })
+                },
+                {timeout: 10000}
+            )
+            .catch(() => {
+                console.warn('Skeleton loading wait timed out, proceeding with test')
+            })
 
         // Run the a11y test
         await runAccessibilityTest(page, ['guest', 'pdp-a11y-violations.json'])

e2e/tests/a11y/desktop/a11y-snapshot-test-registered.spec.js

@@ -61,13 +61,10 @@ test.describe('Registered Account pages', () => {
                 userCredentials: registeredUserCredentials
             })
         }
-        // The consent form does not stick after registration
+
+        // The consent form shows up again after registration
         await answerConsentTrackingForm(page)
-        await page.waitForLoadState()
 
-        await expect(page.getByRole('heading', {name: /Account Details/i})).toBeVisible({
-            timeout: 20000
-        })
         await runAccessibilityTest(page, ['registered', 'account-details-a11y-violations.json'])
 
         await page.getByRole('link', {name: 'Addresses'}).click()