Save snapshots on e2e test failures (#11786)

.github/workflows/tests-e2e.yml

@@ -204,6 +204,14 @@ jobs:
         env:
           COMPOSE_INTERACTIVE_NO_CLI: true
 
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: failures-artifacts
+          path: build/e2e-artifacts
+          if-no-files-found: ignore
+
   percy:
     name: Percy
     runs-on: ubuntu-latest

jest-puppeteer.config.cjs

@@ -32,4 +32,5 @@ module.exports = {
     product: PUPPETEER_PRODUCT,
     args: ['--window-size=1600,1000'], // Same as in percy.config.yml.
   },
+  exitOnPageError: false,
 };

packages/e2e-tests/package.json

@@ -33,6 +33,7 @@
     "@wordpress/jest-puppeteer-axe": "^4.0.2",
     "babel-jest": "^28.1.0",
     "expect-puppeteer": "^6.0.2",
+    "jest-environment-puppeteer": "^6.0.3",
     "jest-extended": "^2.0.0",
     "jest-json-schema": "^6.1.0",
     "jest-puppeteer": "^6.1.0"

packages/e2e-tests/src/jest.config.js

@@ -32,6 +32,7 @@ export default {
   rootDir: '../../../',
   resolver: '@web-stories-wp/jest-resolver',
   preset: 'jest-puppeteer',
+  testEnvironment: '<rootDir>/packages/e2e-tests/src/puppeteerEnvironment.js',
   testMatch: ['**/specs/**/*.[jt]s', '**/?(*.)spec.[jt]s'],
   testPathIgnorePatterns: [
     '<rootDir>/.git',

packages/e2e-tests/src/puppeteerEnvironment.js

@@ -0,0 +1,62 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import { mkdir, writeFile } from 'fs/promises';
+import OriginalEnvironment from 'jest-environment-puppeteer';
+
+const ARTIFACTS_PATH =
+  process.env.E2E_ARTIFACTS_PATH ||
+  (process.env.GITHUB_WORKSPACE || process.cwd()) + '/build/e2e-artifacts';
+
+class PuppeteerEnvironment extends OriginalEnvironment {
+  async setup() {
+    await super.setup();
+
+    try {
+      await mkdir(ARTIFACTS_PATH, { recursive: true });
+    } catch (err) {
+      if (err.code !== 'EEXIST') {
+        throw err;
+      }
+    }
+  }
+
+  async handleTestEvent(event, state) {
+    if (event.name === 'test_fn_failure') {
+      const testName = state.currentlyRunningTest.name;
+      await this.storeArtifacts(testName);
+    }
+  }
+
+  async storeArtifacts(testName) {
+    const datetime = new Date().toISOString().split('.')[0];
+    const fileName = `${testName} ${datetime}`.replaceAll(/[ :"/\\|?*]+/g, '-');
+
+    await writeFile(
+      `${ARTIFACTS_PATH}/${fileName}-snapshot.html`,
+      await this.global.page.content()
+    );
+
+    await this.global.page.screenshot({
+      path: `${ARTIFACTS_PATH}/${fileName}.jpg`,
+    });
+  }
+}
+
+export default PuppeteerEnvironment;