Working cypress perf tests

.gitignore

@@ -25,3 +25,4 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+**/cypress/screenshots/**

web-testing-2022/cypress.config.js

@@ -1,9 +1,17 @@
 const { defineConfig } = require('cypress');
+const { lighthouse, prepareAudit } = require('cypress-audit');
 
 module.exports = defineConfig({
   e2e: {
     setupNodeEvents(on, config) {
       // implement node event listeners here
+        on('before:browser:launch', (browser = {}, launchOptions) => {
+          prepareAudit(launchOptions);
+        });
+
+        on('task', {
+          lighthouse: lighthouse(),
+        });
     },
     baseUrl: 'http://localhost:3000',
   },

web-testing-2022/cypress/e2e/perf.cy.js

@@ -0,0 +1,21 @@
+/// <reference types="cypress" />
+
+describe('The App', () => {
+  it('meets performance and accessibility standards', () => {
+    const thresholds = {
+      performance: 100,
+      accessibility: 100,
+      seo: 100,
+      pwa: 100,
+    };
+
+    // https://github.com/GoogleChrome/lighthouse/blob/main/docs/emulation.md
+    // const lighthouseConfig = {
+    //   formFactor: 'desktop',
+    //   screenEmulation: { disabled: true },
+    // };
+
+    cy.visit('/');
+    cy.lighthouse(thresholds);
+  });
+});

web-testing-2022/cypress/support/commands.js

@@ -23,3 +23,4 @@
 //
 // -- This will overwrite an existing command --
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+import 'cypress-audit/commands';

web-testing-2022/package.json

@@ -15,7 +15,8 @@
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
-    "cypress": "^10.4.0"
+    "cypress": "^10.4.0",
+    "cypress-audit": "^1.1.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -26,6 +27,7 @@
     "eject": "react-scripts eject",
     "test:cy:ci": "npx cypress run --spec '**/**/solution.cy.js' --browser=chrome",
     "test:cy:sanity": "npx cypress run --spec '**/**/sanity.cy.js' --browser=chrome",
+    "test:perf": "npx cypress run --spec '**/**/perf.cy.js' --browser=chrome --headed",
     "test:visual": "npx happo-e2e -- npx cypress run --spec 'cypress/e2e/visual.cy.js'",
     "test:sanity": "npm run test:cy:sanity && npm run test:visual"
   },