✅ Add tests for ignored regions in test archiver.

Note: This will have to be run through chromatic, since it's a change to the way the capture system works. Refs CAP-1291.
chromaui · Nov 21, 2023 · ad9ba90 · ad9ba90
1 parent 53ad89c
commit ad9ba90
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 0 deletions.
diff --git a/__playwright-tests__/fixtures/dynamic-content.html b/__playwright-tests__/fixtures/dynamic-content.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+    <head>
+        <title>Dynamic Content E2E Tests</title>
+        <style>
+            * {
+                color: white;
+            }
+            body {
+                background-color: teal;
+            }
+
+            #time-e2e-test-ignore {
+                font-size: 16pt;
+                width: 100vw;
+            }
+
+        </style>
+    </head>
+    <body>
+        <div class="container" style="background-color: teal">
+            <h1>Hello There! The current time is:</h1>
+            <div data-chromatic="ignore" class="chromatic-ignore" id="time-e2e-test-ignore"></div>
+        </div>
+
+        <script>
+            let date = new Date();
+            document.getElementById('time-e2e-test-ignore').innerText = date.toTimeString();
+        </script>
+    </body>
+</html>
diff --git a/__playwright-tests__/ignored-regions.spec.ts b/__playwright-tests__/ignored-regions.spec.ts
@@ -0,0 +1,9 @@
+import { test, expect } from '../src';
+
+// NOTE: This is a test that is meant to be run through Chromatic, so it doesn't actually work
+//       with the automated test suite.
+test('ignored regions work with chromatic', async ({ page }) => {
+  test.setTimeout(2000);
+  await page.goto('/ignore');
+  await setTimeout(() => {}, 1000);
+});
diff --git a/__playwright-tests__/server.js b/__playwright-tests__/server.js
@@ -18,6 +18,10 @@ app.get('/asset-paths', (req, res) => {
   res.sendFile(path.join(__dirname, 'fixtures/asset-paths.html'));
 });
 
+app.get('/ignore', (req, res) => {
+  res.sendFile(path.join(__dirname, 'fixtures/dynamic-content.html'));
+});
+
 app.get('/forms', (req, res) => {
   res.sendFile(path.join(__dirname, 'fixtures/forms.html'));
 });