Fix screenshot resolutions

.github/workflows/e2e.yaml

@@ -28,8 +28,8 @@ jobs:
         run: echo "TERMINUS_FETCH_API_KEY=$TERMINUS_FETCH_API_KEY" > .env
       - name: Run Playwright tests
         run: |
-          npm run test | tee output.log
-          if grep -q -e "Error: A snapshot doesn't exist at" -e "Screenshot comparison failed" output.log; then
+          npm run test | tee >(sed $'s/\033[[][^A-Za-z]*[A-Za-z]//g' > output.log)
+          if grep -q -F -e "Error: A snapshot doesn't exist at" -e "Screenshot comparison failed" -e "Error: expect(locator).toHaveScreenshot(expected)" output.log; then
             echo "Playwright tests failed due to a snapshot issue."
             echo "SNAPSHOT_DIFFERENCES=true" >> $GITHUB_ENV
             exit 1

e2e/visual.spec.js

@@ -66,31 +66,28 @@ ARTICLES.forEach(([article, { targets }]) => {
           // which would be otherwise invisible.
           // page.on('console', msg => console.log(msg.text(), msg.location(), msg.args()));
           await page.goto(url);
+          await page.mainFrame().waitForFunction(() => window.__ODYSSEY__);
         });
 
         RESOLUTIONS.forEach(resolution => {
-          test.use({ viewport: { width: resolution[0], height: resolution[1] } });
-
           // TODO: Add resolution tag
           test.describe(`${resolution.join(',')}`, () => {
             test.beforeEach(async ({ page }) => {
-              await page.mainFrame().waitForFunction(() => window.__ODYSSEY__);
-              await page.waitForTimeout(1000);
+              await page.setViewportSize({ width: resolution[0], height: resolution[1] });
             });
 
-            test('above the fold', async ({ page }) => {
-              await expect(page).toHaveScreenshot({
-                stylePath: join(__dirname, 'screenshots.css')
-              });
-            });
+            // Above the fold is being troublesome and doesn't add much
+            // test('above the fold', async ({ page }) => {
+            //   await expect(page).toHaveScreenshot({ timeout: 30000, stylePath: join(__dirname, 'screenshots.css') });
+            // });
 
             targets.forEach(target => {
               test(`${target}`, { tag: `@${target}` }, async ({ page }) => {
                 const locator = page.locator(target).first();
                 await expect(locator).toHaveCount(1);
                 await locator.scrollIntoViewIfNeeded();
-                await page.waitForTimeout(500);
                 await expect(locator).toHaveScreenshot({
+                  timeout: 30000,
                   stylePath: join(__dirname, 'screenshots.css')
                 });
               });