Add automation run button and status banner (#1738)

jonathanKingston · web-flow · commit 36b184f8d447 · 2025-06-12T13:20:21.000+01:00
* Add automation run button and status banner

* Fix lint formatting

* Upload all subdirectories for snapshots

* Remove shared utils as it's not one?
diff --git a/.github/workflows/snapshots.yml b/.github/workflows/snapshots.yml
@@ -59,8 +59,8 @@ jobs:
               with:
                   name: playwright-report-pages
                   path: |
-                      special-pages/playwright-report
-                      special-pages/test-results
-                      injected/playwright-report
-                      injected/test-results
+                      special-pages/playwright-report/**
+                      special-pages/test-results/**
+                      injected/playwright-report/**
+                      injected/test-results/**
                   retention-days: 5
diff --git a/injected/integration-test/test-pages/duckplayer-native/pages/player.html b/injected/integration-test/test-pages/duckplayer-native/pages/player.html
@@ -107,7 +107,6 @@
     </style>
 </head>
 <body>
-<script src="../../shared/utils.js"></script>
 <p><a href="../index.html">[Duck Player]</a></p>
 
 <div class="controls">
diff --git a/injected/integration-test/test-pages/duckplayer/pages/player.html b/injected/integration-test/test-pages/duckplayer/pages/player.html
@@ -67,7 +67,6 @@
     </style>
 </head>
 <body>
-<script src="../../shared/utils.js"></script>
 <p><a href="../index.html">[Duck Player]</a></p>
 
 <div class="controls">
diff --git a/injected/integration-test/test-pages/shared/utils.js b/injected/integration-test/test-pages/shared/utils.js
@@ -4,7 +4,6 @@
  * @property {any} result The result of the test.
  * @property {any} expected The expected result.
  */
-
 function buildTableCell(value, tagName = 'td') {
     const td = document.createElement(tagName);
     td.textContent = value;
@@ -58,13 +57,36 @@ const isReadyPromise = new Promise((resolve) => {
     isReadyPromiseResolve = resolve;
 });
 const url = new URL(window.location.href);
+createResultsHeader();
 if (url.searchParams.get('automation')) {
+    createRunButton();
     isInAutomation = true;
     window.addEventListener('content-scope-init-complete', () => {
         isReadyPromiseResolve();
     });
 }
 
+function createResultsHeader() {
+    const summary = document.createElement('summary');
+    summary.textContent = 'Test suite status: ';
+    const output = document.createElement('output');
+    output.id = 'test-status';
+    output.textContent = 'pending';
+    summary.appendChild(output);
+    document.body.appendChild(summary);
+}
+
+function createRunButton() {
+    const button = document.createElement('button');
+    button.textContent = 'Run Tests';
+    button.id = 'run-tests';
+    button.addEventListener('click', () => {
+        button.disabled = true;
+        window.dispatchEvent(new Event('content-scope-init-complete'));
+    });
+    document.body.appendChild(button);
+}
+
 // @ts-expect-error - ongoingTests is not defined in the type definition
 window.ongoingTests = [];
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -73,6 +95,15 @@ function test(name, test) {
     window.ongoingTests.push({ name, test });
 }
 
+function updateResultsHeader(results) {
+    const totalTests = Object.values(results).flat().length;
+    const passed = Object.values(results)
+        .flat()
+        .filter((result) => result.result === result.expected).length;
+    const output = document.getElementById('test-status');
+    output.textContent = totalTests > 0 && passed === totalTests ? 'pass' : 'fail';
+}
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 async function renderResults() {
     const results = {};
@@ -84,6 +115,7 @@ async function renderResults() {
         const result = await test.test().catch((e) => console.error(`${test.name} threw`, e));
         results[test.name] = result;
     }
+    updateResultsHeader(results);
     // @ts-expect-error - buildResultTable is not defined in the type definition
     document.body.appendChild(buildResultTable(results));
     // @ts-expect-error - results is not defined in the type definition
