.eslintrc.js

@@ -24,7 +24,7 @@ module.exports = {
 			extends: ["@html-validate/jest"],
 		},
 		{
-			files: "cypress/**/*.spec.[jt]s",
+			files: ["cypress/**/*.spec.[jt]s", "cypress/**/*.cy.[jt]s"],
 			extends: ["@html-validate/cypress"],
 		},
 	],

.gitignore

 *.tgz
+
+cypress/*/fixtures/
+cypress/*/screenshots/
+
 /coverage
-/cypress/fixtures/
-/cypress/screenshots/
 /dist/
 /node_modules/
 /temp

.gitlab-ci.yml

@@ -46,7 +46,7 @@ Prettier:
 
 Cypress:
   stage: test
-  image: cypress/browsers:node14.17.0-chrome91-ff89
+  image: cypress/browsers:node14.19.0-chrome100-ff99-edge
   before_script:
     - node --version
     - google-chrome --version
@@ -56,7 +56,7 @@ Cypress:
 
 .compat:
   stage: compatibility
-  image: cypress/browsers:node14.17.0-chrome91-ff89
+  image: cypress/browsers:node14.19.0-chrome100-ff99-edge
   needs: ["NPM", "Build"]
   script:
     - npm rebuild cypress
@@ -82,16 +82,14 @@ Cypress compatibility:
   extends: .compat
   parallel:
     matrix:
-      - VERSION:
-          - 4
-          - 5
-          - 6
+      - CYPRESS_MATRIX:
           - 7
           - 8
           - 9
+          - 10
   before_script:
     - npm install -g npm@latest
-    - npm install $(npx -y npm-min-peer cypress --major ${VERSION} --with-name)
+    - npm install $(npx -y npm-min-peer cypress --major ${CYPRESS_MATRIX} --with-name)
     - npm ls cypress
 
 .release:

CHANGELOG.md

 # cypress-html-validate changelog
 
+## [5.0.0](https://gitlab.com/html-validate/cypress-html-validate/compare/v4.0.0...v5.0.0) (2022-06-20)
+
+### ⚠ BREAKING CHANGES
+
+- require Cypress v7 or later
+
+### Features
+
+- cypress 10 compatibility ([d126e2c](https://gitlab.com/html-validate/cypress-html-validate/commit/d126e2cb2b8a996d42ccd04c1ba68ce2f5ffa2af)), closes [html-validate#156](https://gitlab.com/html-validate/html-validate/issues/156)
+- require Cypress v7 or later ([2cd4809](https://gitlab.com/html-validate/cypress-html-validate/commit/2cd4809894cf51fe2f5ea38ae09512377e6678c3))
+- support node exports field ([55b4f10](https://gitlab.com/html-validate/cypress-html-validate/commit/55b4f10543a4d7144d4ed984f09d8c5f3157f6b3))
+
 ## [4.0.0](https://gitlab.com/html-validate/cypress-html-validate/compare/v3.0.0...v4.0.0) (2022-05-16)
 
 ### ⚠ BREAKING CHANGES

LICENCE → LICENSE

 MIT License
 
-Copyright (c) 2018 David Sveningsson <ext@sidvind.com>
+Copyright (c) 2018-2022 David Sveningsson <ext@sidvind.com>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

README.md

@@ -3,6 +3,12 @@
 Validates HTML using [`html-validate`](https://html-validate.org).
 It automatically fetches the active source markup from the browser and validates, failing the test if any validation errors is encountered.
 
+## Prerequisites
+
+- NodeJS 14.17 or later.
+- `html-validate@2.17` or later.
+- `cypress@7.0.1` or later.
+
 ## Installation
 
     npm install --save-dev html-validate cypress-html-validate
@@ -12,23 +18,51 @@ With NPM 7 or later it will be satisfied by the peer dependency but for a more c
 
 ## Usage
 
-### In `cypress/plugins/index.js`:
+### With Cypress 10 or later
+
+Import the plugin:
+
+```ts
+import htmlvalidate from "cypress-html-validate/plugin";
+```
+
+Add the `setupNodeEvents` if it doesnt already exist (either in the `e2e` or `component` block):
+
+```ts
+export default defineConfig({
+  e2e: {
+    setupNodeEvents(on) {
+      htmlvalidate.install(on);
+    },
+  },
+});
+```
+
+Import the command in the support file (default `cypress/support/e2e.[jt]s` for E2E-tests and `cypress/support/component.[jt]s` for component tests):
+
+```ts
+import "cypress-html-validate/commands";
+```
+
+### With earlier versions (pre v10)
+
+Install the plugin in `cypress/plugins/index.js`:
 
 ```js
-const htmlvalidate = require("cypress-html-validate/dist/plugin");
+const htmlvalidate = require("cypress-html-validate/plugin");
 
 module.exports = (on) => {
   htmlvalidate.install(on);
 };
 ```
 
-### In `cypress/support/index.js`:
+Import the command in the support file `cypress/support/index.js`:
 
 ```js
-import "cypress-html-validate/dist/commands";
+import "cypress-html-validate/commands";
 ```
 
-### In specs:
+### In test files:
 
 ```js
 it("should be valid", () => {
@@ -85,7 +119,7 @@ it("should be valid", () => {
 
 ## Configuration
 
-`html-validate` and the plugin can configured globally in `cypress/plugins/index.js`:
+`html-validate` and the plugin can configured globally in the `install` function:
 
 ```js
 /* html-validate configuration */
@@ -94,6 +128,7 @@ const config = {
     foo: "error",
   },
 };
+
 /* plugin options */
 const options = {
   exclude: [],
@@ -102,6 +137,7 @@ const options = {
     console.log(messages);
   },
 };
+
 htmlvalidate.install(on, config, options);
 ```
 

cypress/support/index.js

-import "../../dist/commands";

cypress/v10/cypress.config.ts

+import * as path from "path";
+import { defineConfig } from "cypress";
+import htmlvalidate from "../../dist/plugin";
+
+export default defineConfig({
+	fixturesFolder: path.join(__dirname, "cypress/fixtures"),
+	screenshotsFolder: "temp/screenshots",
+	reporter: "mocha-spec-json-output-reporter",
+	reporterOptions: {
+		fileName: "results.json",
+		filePath: "tests",
+	},
+	screenshotOnRunFailure: false,
+	video: false,
+	e2e: {
+		setupNodeEvents(on) {
+			htmlvalidate.install(on, null, {
+				exclude: [".excluded"],
+				include: ["#app"],
+			});
+		},
+		baseUrl: "http://localhost:8080",
+		specPattern: path.join(__dirname, "cypress/integration/**/*.cy.{js,jsx,ts,tsx}"),
+		supportFile: path.join(__dirname, "cypress/support/index.js"),
+	},
+});

cypress/v10/cypress/support/index.js

+import "../../../../dist/commands";

cypress.json → cypress/v7/cypress.json

 {
   "baseUrl": "http://localhost:8080",
+  "fixturesFolder": "cypress/v7/cypress/fixtures",
+  "integrationFolder": "cypress/v7/cypress/integration",
+  "pluginsFile": "cypress/v7/cypress/plugins/index.js",
+  "supportFile": "cypress/v7/cypress/support/index.js",
+  "screenshotsFolder": "temp/screenshots",
   "reporter": "mocha-spec-json-output-reporter",
   "reporterOptions": {
     "fileName": "results.json",

cypress/v7/cypress/integration/test.spec.js

+/* eslint-disable sonarjs/no-duplicate-string */
+
+describe("cypress-html-validate", () => {
+	it("[PASS] should not report error when a valid page is loaded", () => {
+		cy.visit("/valid.html");
+		cy.htmlvalidate();
+	});
+
+	it("[FAIL] should report error when invalid page is loaded", () => {
+		cy.visit("/invalid.html");
+		cy.htmlvalidate();
+	});
+
+	it("[PASS] should support passing custom configuration", () => {
+		cy.visit("/invalid.html");
+		cy.htmlvalidate({
+			rules: {
+				"wcag/h32": "off",
+			},
+		});
+	});
+
+	it("[PASS] should support passing custom options", () => {
+		cy.visit("/invalid.html");
+		cy.htmlvalidate({
+			exclude: ["form"],
+		});
+	});
+
+	it("[FAIL] should support passing both config and options", () => {
+		cy.visit("/invalid.html");
+		cy.htmlvalidate(
+			{
+				rules: {
+					"id-pattern": ["error", { pattern: "foo-.*" }],
+				},
+			},
+			{
+				exclude: ["form"],
+			}
+		);
+	});
+
+	it("[FAIL] should report error when an action causes document to be invalid", () => {
+		cy.visit("/valid.html");
+		cy.htmlvalidate();
+		cy.get("#insert-invalid").click();
+		cy.htmlvalidate();
+	});
+
+	it("[PASS] should not report excluded errors", () => {
+		cy.visit("/excluded.html");
+		cy.htmlvalidate();
+	});
+
+	it("[PASS] should not report errors outside included elements", () => {
+		cy.visit("/included.html");
+		cy.htmlvalidate();
+	});
+
+	describe("with subject", () => {
+		it("[PASS] should not report error when selecting valid element", () => {
+			cy.visit("/invalid.html");
+			cy.get("h1").htmlvalidate();
+		});
+
+		it("[FAIL] should report error when selecting invalid element", () => {
+			cy.visit("/invalid.html");
+			cy.get("form").htmlvalidate();
+		});
+
+		it("[FAIL] should fail if subject is inside globally excluded element", () => {
+			cy.visit("/excluded.html");
+			cy.get("p").htmlvalidate();
+		});
+
+		it("[FAIL] should fail if subject is outside globally included element", () => {
+			cy.visit("/excluded.html");
+			cy.get("title").htmlvalidate();
+		});
+
+		it("[PASS] should pass if subject is included and not excluded", () => {
+			cy.visit("/excluded.html");
+			cy.get("h1").htmlvalidate();
+		});
+
+		it("[FAIL] should fail if subject is invalid", () => {
+			cy.visit("/invalid.html");
+			cy.get("form").htmlvalidate();
+		});
+
+		it("[FAIL] should fail if descendant of subject is invalid", () => {
+			cy.visit("/invalid.html");
+			cy.get("body").htmlvalidate();
+		});
+	});
+});

cypress/plugins/index.js → cypress/v7/cypress/plugins/index.js

@@ -11,7 +11,7 @@
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
-const htmlvalidate = require("../../dist/plugin");
+const htmlvalidate = require("../../../../dist/plugin");
 
 module.exports = (on) => {
 	htmlvalidate.install(on, null, {

cypress/v7/cypress/support/index.js

+import "../../../../dist/commands";

package.json

 {
   "name": "cypress-html-validate",
-  "version": "4.0.0",
+  "version": "5.0.0",
   "description": "Cypress plugin for html-validate",
   "keywords": [
     "html",
@@ -18,6 +18,12 @@
   },
   "license": "MIT",
   "author": "David Sveningsson <ext@sidvind.com>",
+  "exports": {
+    ".": "./dist/index.js",
+    "./plugin": "./dist/plugin.js",
+    "./commands": "./dist/commands.js",
+    "./package.json": "./package.json"
+  },
   "main": "dist/index.js",
   "files": [
     "dist",
@@ -26,15 +32,24 @@
     "!**/__fixtures__/**"
   ],
   "scripts": {
-    "build": "tsc",
-    "cypress:open": "cypress open",
-    "cypress:run": "cypress run || true",
+    "prebuild": "tsc",
+    "build": "node scripts/build.js",
+    "postbuild": "run-s postbuild:*",
+    "postbuild:plugin": "dts-bundle-generator src/plugin.ts -o dist/plugin.d.ts",
+    "postbuild:commands": "dts-bundle-generator src/commands.ts -o dist/commands.d.ts",
+    "postbuild:index": "dts-bundle-generator src/index.ts -o dist/index.d.ts",
+    "cypress:open": "node scripts/cypress-wrapper open",
+    "cypress:run": "node scripts/cypress-wrapper run || true",
     "digest": "scripts/digest",
     "eslint": "eslint .",
     "eslint:fix": "eslint --fix .",
+    "prepack": "release-prepack package.json --bundle",
+    "postpack": "release-postpack package.json",
     "prepare": "husky install",
+    "prepublishOnly": "release-prepublish package.json --bundle",
     "prettier:check": "prettier --check .",
     "prettier:write": "prettier --write .",
+    "postpublish": "release-postpublish package.json",
     "server": "node server.js",
     "start": "start-server-and-test server http://localhost:8080 cypress:open",
     "test": "start-server-and-test server http://localhost:8080 cypress:run && jest"
@@ -67,41 +82,46 @@
     "kleur": "^4.0.0"
   },
   "devDependencies": {
-    "@html-validate/commitlint-config": "3.0.0",
-    "@html-validate/eslint-config": "5.4.6",
+    "@html-validate/commitlint-config": "3.0.3",
+    "@html-validate/eslint-config": "5.4.12",
     "@html-validate/eslint-config-cypress": "5.4.0",
-    "@html-validate/eslint-config-jest": "5.4.5",
-    "@html-validate/eslint-config-typescript": "5.4.7",
+    "@html-validate/eslint-config-jest": "5.4.11",
+    "@html-validate/eslint-config-typescript": "5.4.11",
     "@html-validate/eslint-config-typescript-typeinfo": "5.4.1",
-    "@html-validate/jest-config": "3.3.1",
-    "@html-validate/prettier-config": "2.2.0",
+    "@html-validate/jest-config": "3.3.2",
+    "@html-validate/prettier-config": "2.2.1",
+    "@html-validate/release-scripts": "3.5.1",
     "@types/estree": "0.0.51",
-    "@types/jest": "27.5.1",
-    "@types/node": "14.18.18",
+    "@types/jest": "28.1.2",
+    "@types/node": "14.18.21",
     "@types/stream-buffers": "3.0.4",
-    "cypress": "9.6.1",
+    "cypress": "10.1.0",
+    "dts-bundle-generator": "6.12.0",
+    "esbuild": "0.14.46",
     "express": "4.18.1",
-    "html-validate": "7.1.0",
+    "html-validate": "7.1.1",
     "husky": "8.0.1",
-    "jest": "28.1.0",
-    "jest-environment-jsdom": "28.1.0",
-    "lint-staged": "12.4.1",
+    "jest": "28.1.1",
+    "jest-environment-jsdom": "28.1.1",
+    "lint-staged": "13.0.2",
     "mocha": "10.0.0",
     "mocha-spec-json-output-reporter": "1.1.7",
-    "npm-pkg-lint": "1.11.0",
-    "prettier": "2.6.2",
+    "npm-pkg-lint": "1.11.1",
+    "npm-run-all": "4.1.5",
+    "prettier": "2.7.1",
+    "semver": "7.3.7",
     "serve-static": "1.15.0",
     "start-server-and-test": "1.14.0",
     "stream-buffers": "3.0.2",
-    "ts-jest": "28.0.2",
-    "typescript": "4.6.4"
+    "ts-jest": "28.0.5",
+    "typescript": "4.7.4"
   },
   "peerDependencies": {
-    "cypress": "^4 || ^5 || ^6 || ^7.0.1 || ^8 || ^9",
+    "cypress": "^7.0.1 || ^8 || ^9 || ^10",
     "html-validate": "^2.17 || ^3 || ^4 || ^5 || ^6 || ^7"
   },
   "engines": {
-    "node": ">= 14.0"
+    "node": ">= 14.19"
   },
   "renovate": {
     "extends": [

scripts/build.js

+const path = require("path");
+const esbuild = require("esbuild");
+
+/** @type {import("esbuild").BuildOptions} */
+const common = {
+	logLevel: "info",
+	bundle: true,
+	platform: "node",
+	target: "node14.19",
+	sourcemap: true,
+	external: ["html-validate", path.join(__dirname, "../package.json")],
+};
+
+esbuild.buildSync({
+	...common,
+	entryPoints: ["src/plugin.ts"],
+	outfile: "dist/plugin.js",
+});
+
+esbuild.buildSync({
+	...common,
+	entryPoints: ["src/commands.ts"],
+	outfile: "dist/commands.js",
+});
+
+esbuild.buildSync({
+	...common,
+	entryPoints: ["src/index.ts"],
+	outfile: "dist/index.js",
+});

scripts/cypress-wrapper.js

+const { spawn } = require("child_process"); // eslint-disable-line security/detect-child-process
+const semver = require("semver");
+const pkg = require("../package.json");
+
+/** @type {Record<string, string>} */
+const configFiles = {
+	7: `cypress/v7/cypress.json`,
+	8: `cypress/v7/cypress.json`,
+	9: `cypress/v7/cypress.json`,
+	10: `cypress/v10/cypress.config.ts`,
+};
+
+const version = process.env.CYPRESS_MATRIX || semver.major(pkg.devDependencies.cypress);
+const configFile = configFiles[version]; // eslint-disable-line security/detect-object-injection
+
+/* eslint-disable-next-line no-console */
+console.log(`Using Cypress v${version} (${configFile})`);
+
+const command = process.argv[2];
+const builtinArgs = ["--config-file", configFile];
+const userArgs = process.argv.slice(3);
+
+spawn("./node_modules/.bin/cypress", [command, ...builtinArgs, ...userArgs], {
+	stdio: "inherit",
+}).on("exit", (code) => {
+	/* eslint-disable-next-line no-process-exit */
+	process.exit(code);
+});

src/plugin.ts

@@ -76,3 +76,7 @@ export function install(
 		},
 	});
 }
+
+export default {
+	install,
+};

tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "./tsconfig.base.json",
   "compilerOptions": {
     "rootDir": "./src",
+    "noEmit": true,
     "declaration": true,
     "outDir": "dist",
     "types": ["node"]