[#29] Add support for cypress 13

.github/workflows/test.yml

@@ -32,7 +32,8 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        version: ["9.x", "10.x", "12.x"]
+        version: ["9.x", "10.x", "12.x", "13.x"]
+
     container: cypress/browsers:node18.12.0-chrome107
     steps:
       - uses: actions/checkout@v3

README.md

@@ -78,7 +78,7 @@ _Note: this example is making use of the [Cypress Testing Library](https://testi
 
 ## Examples
 
-Example Cypress test setups with a variety of tests using `cypress-web-vitals` for Cypress 9.x, 10.x, and 12.x are available in the [`./examples` directory](./examples).
+Example Cypress test setups with a variety of tests using `cypress-web-vitals` for Cypress 9.x, 10.x, 12.x and 13.x are available in the [`./examples` directory](./examples).
 
 ## API
 

examples/13.x/README.md

@@ -0,0 +1,38 @@
+# cypress-web-vitals-examples
+
+## Getting started
+
+### Install the dependencies
+
+In your terminal:
+
+```console
+$ npm install
+# or
+$ yarn install --frozen-lockfile
+```
+
+### Running the tests
+
+You can run all the tests headlessly using:
+
+```console
+$ npm run cy:run
+# or
+$ yarn cy:run
+```
+
+You can start the Cypress IDE using:
+
+```console
+$ npm run cy:open
+# or
+$ yarn cy:open
+```
+
+## Tests
+
+There are two test files under `./cypress/integration`:
+
+1. `custom.test.js` - invokes `cy.vitals()` with custom configuration.
+1. `default.test.js` - invokes `cy.vitals()` without custom configuration.

examples/13.x/cypress.config.js

@@ -0,0 +1,8 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  screenshotOnRunFailure: false,
+  e2e: {
+    setupNodeEvents(_on, _config) {},
+  },
+});

examples/13.x/cypress/e2e/custom.cy.js

@@ -0,0 +1,25 @@
+describe("cy.vitals() command not using the defaults", () => {
+  it("should meet the custom provided Web Vitals thresholds", () => {
+    cy.vitals({
+      url: "https://www.google.com/",
+      firstInputSelector: "body",
+      thresholds: {
+        lcp: 2500,
+        fid: 100,
+        cls: 0.1,
+        fcp: 1800,
+        ttfb: 600,
+        inp: 500,
+      },
+    });
+  });
+
+  it("should meet the custom provided Web Vitals thresholds for a subset of vitals", () => {
+    cy.vitals({
+      url: "https://www.google.com/",
+      thresholds: {
+        lcp: 2500,
+      },
+    });
+  });
+});

examples/13.x/cypress/e2e/defaults.cy.js

@@ -0,0 +1,9 @@
+describe("cy.vitals() command using the defaults", () => {
+  beforeEach(() => {
+    cy.visit("https://www.google.com/");
+  });
+
+  it("should meet the Web Vitals default thresholds", () => {
+    cy.vitals();
+  });
+});

examples/13.x/cypress/e2e/journey.cy.js

@@ -0,0 +1,35 @@
+describe("cy.startVitalsCapture() and cy.reportVitals() journey", () => {
+  it("should meet the custom provided Web Vitals thresholds including INP", () => {
+    cy.startVitalsCapture({
+      url: "https://www.google.com/",
+    });
+
+    // Handle CI vs local having differences in whether cookie banner is
+    // present (the problem with testing against a site you don't own!)
+    cy.get("body").then(($body) => {
+      const $button = $body.find("button:contains('Accept all')");
+
+      if ($button.length) {
+        cy.wrap($button, { log: false }).realClick();
+      }
+    });
+
+    cy.findByRole("button", { name: "Google apps" }).realClick();
+    cy.findByText("Gmail").should("be.visible");
+    cy.findByRole("button", { name: "Google apps" }).realClick();
+    cy.findByRole("combobox", { name: "Search" }).realClick().realClick();
+    cy.findByRole("listbox").should("be.visible");
+
+    cy.reportVitals({
+      thresholds: {
+        lcp: 2500,
+        fid: 100,
+        cls: 0.1,
+        fcp: 1800,
+        ttfb: 600,
+        // Google doesn't pass their own Good consistently
+        inp: 500,
+      },
+    });
+  });
+});

examples/13.x/cypress/e2e/report.cy.js

@@ -0,0 +1,27 @@
+const customThresholds = {
+  lcp: 2500,
+  fid: 100,
+  cls: 0.1,
+};
+
+describe("cy.vitals() command not using the defaults", () => {
+  it("should meet the custom provided Web Vitals thresholds", () => {
+    cy.vitals({
+      url: "https://www.google.com/",
+      thresholds: customThresholds,
+      onReport(report) {
+        expect(report.thresholds).to.equal(customThresholds);
+        expect(report.results).to.have.property("lcp");
+        expect(report.results).to.have.property("fid");
+        expect(report.results).to.have.property("cls");
+        expect(report.results).to.have.property("fcp");
+        expect(report.results).to.have.property("ttfb");
+        expect(report.results).to.have.property("inp");
+
+        cy.log("------ onReport values ------");
+        cy.log(JSON.stringify(report, undefined, 2));
+        cy.log("-----------------------------");
+      },
+    });
+  });
+});

examples/13.x/cypress/support/commands.js

@@ -0,0 +1,28 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+
+import "@testing-library/cypress/add-commands";
+import "../../../../commands";

examples/13.x/cypress/support/e2e.js

@@ -0,0 +1,24 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+Cypress.on("uncaught:exception", () => {
+  return false;
+});

examples/13.x/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "cypress-web-vitals-examples-13.x",
+  "version": "1.0.0",
+  "description": "Web Vitals command examples for Cypress 13.x",
+  "author": "Craig Morten <[email protected]>",
+  "license": "MIT",
+  "main": "index.js",
+  "scripts": {
+    "cy:open": "cypress open",
+    "cy:run": "cypress run --headless --browser chrome"
+  },
+  "devDependencies": {
+    "@testing-library/cypress": "^10.0.0",
+    "cypress": "^13.0.0",
+    "cypress-real-events": "^1.10.3"
+  }
+}