[Snapshot testing] Improve test consistency

e2e/pages/filing-app/uploadFile/completeUploadLogicErrors.spec.ts

@@ -5,6 +5,7 @@ import {
   clickContinueNext,
 } from '../../../utils/navigation.utils';
 import { checkSnapshot } from '../../../utils/snapshotTesting';
+import { TIMEOUT_XS } from '../../../utils/timeoutConstants';
 import { ResultUploadMessage, uploadFile } from '../../../utils/uploadFile';
 import { verifyDownloadableReport } from '../../../utils/verifyDownloadableReport';
 
@@ -70,6 +71,7 @@ test('Resolve Errors (Logic)', async ({ page, navigateToUploadFile }) => {
         await expect(page3row1.getByRole('cell').nth(0)).toHaveText('62');
         await expect(page3row1.getByRole('cell').nth(2)).toHaveText('999');
         await expect(page3row1.getByRole('cell').nth(3)).toHaveText('1');
+        await page.waitForTimeout(2 * TIMEOUT_XS);
         await checkSnapshot(page);
       };
 

e2e/pages/shared-lending-platform/Navigation.spec.ts

@@ -170,7 +170,7 @@ test('Navigation', async ({ page, navigateToFilingHome }) => {
       .getByRole('link', { name: 'Diversity & Inclusion' })
       .click();
     await expect(page.locator('h1')).toContainText(
-      'Diversity and inclusion at the Bureau',
+      'Office of Minority and Women Inclusion at the Bureau',
     );
     await page.goBack();
 

e2e/utils/snapshotModifications.css

@@ -0,0 +1,8 @@
+a {
+  /* 
+  Dotted borders are inconsistently rendered, causing test flake.
+  Since this is a border style defined in the CFPB Design System, 
+  we should be safe not validating this styling as part of our app testing. 
+  */
+  border-style: solid;
+}

e2e/utils/snapshotTesting.ts

@@ -9,8 +9,17 @@ import { expect } from '@playwright/test';
 export const checkSnapshot = async (page: Page, options = {}) => {
   if (process.env.SBL_ENABLE_PLAYWRIGHT_SNAPSHOT_TESTING === 'true') {
     await expect(page).toHaveScreenshot({
-      fullPage: true, // Verify the full page
-      mask: [page.locator('.snapshot-ignore')], // Ignore flagged areas
+      // Verify the full page
+      fullPage: true,
+      mask: [
+        // Ignore flagged areas
+        page.locator('.snapshot-ignore'),
+        // USA flag in header is flaky in very tall snapshots
+        page.locator('.u-usa-flag'),
+      ],
+      // CSS modifications to reduce flake (see CSS file for details)
+      stylePath: 'e2e/utils/snapshotModifications.css',
+      // Any option overrides provided on a test-by-test basis
       ...options,
     });
   }

playwright.config.ts

@@ -60,9 +60,7 @@ const config: PlaywrightTestConfig = {
     timeout: TIMEOUT_EXPECT,
     /* Snapshot testing */
     toHaveScreenshot: {
-      // High enough to ignore dotted border flakiness
-      // but low enough to catch meaningful diffs??
-      maxDiffPixels: 25,
+      maxDiffPixels: 0,
     },
   },
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */