test: refactor to use toHaveScreenshot (#1314)

Author: liamdebeasi

.github/workflows/actions/test-e2e/action.yml

@@ -55,10 +55,8 @@ runs:
         npx playwright test --shard=${{ inputs.shard }}/${{ inputs.totalShards }} --update-snapshots
         git add src/\*.png --force
         mkdir updated-screenshots
-        echo 'made dir'
         rsync -R --progress $(git diff --name-only --cached) updated-screenshots
-        echo 'copied images'
-        if [ -d updated-screenshots ]; then
+        if [ "$(ls -A updated-screenshots)" ]; then
           echo "hasUpdatedScreenshots=$(echo 'true')" >> $GITHUB_OUTPUT
           cd updated-screenshots
           ls

playwright.config.ts

@@ -52,14 +52,7 @@ const config: PlaywrightTestConfig = {
      * Maximum time expect() should wait for the condition to be met.
      * For example in `await expect(locator).toHaveText();`
      */
-    timeout: 5000,
-    toMatchSnapshot: {
-      /**
-       * Increases the maximum allowed pixel difference to account
-       * for slight browser rendering inconsistencies.
-       */
-      maxDiffPixelRatio: 0.02
-    }
+    timeout: 5000
   },
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,

src/components/icon/test/icon.e2e.ts

@@ -8,7 +8,7 @@ test.describe('icon: basic', () => {
     // Wait for all SVGs to be lazily loaded before taking screenshots
     await page.waitForLoadState('networkidle');
 
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot(`icon-diff.png`);
+    await expect(page).toHaveScreenshot(`icon-diff.png`, { fullPage: true });
   });
 
   test('some icons should flip when rtl', async ({ page }) => {

src/components/icon/test/icon.e2e.ts-snapshots/icon-diff-Mobile-Chrome-linux.png

@@ -13,7 +13,7 @@ test.describe('icon: dynamic type', () => {
 
     const icons = page.locator('#icons');
 
-    expect(await icons.screenshot()).toMatchSnapshot(`icon-dynamic-type-diff.png`);
+    await expect(icons).toHaveScreenshot(`icon-dynamic-type-diff.png`);
   });
 
 });