@forsakringskassan/cypress-config 1.5.0 → 1.6.0

package/README.md

@@ -15,9 +15,10 @@ npm rm mocha-multi-reporter
 ```
 
 - [Usage](#usage)
-- [Axe](#axe)
-- [docs-generator](#docs-generator)
-- [HTML-Validate](#html-validate)
+- [Commands](#commands)
+- [Axe plugin](#axe-plugin)
+- [docs-generator plugin](#docs-generator-plugin)
+- [HTML-Validate plugin](#html-validate-plugin)
 
 ## Usage
 
@@ -51,6 +52,7 @@ A configuration function is available for usage in `cypress/support/e2e.ts` and/
 import { configure } from "@forsakringskassan/cypress-config/support";
 
 configure({
+    resetEmulatedMedia: true,
     afterEach: {
         htmlvalidate: true,
     },
@@ -62,9 +64,42 @@ configure({
 > If the call is omitted some functionality will not work as expected.
 > Calling it multiple times is undefined behaviour.
 
-See the various components for details.
+- `resetEmulatedMedia` - When enabled, any emulated CSS media features will be reset between runs.
+- `afterEach` - Enables features to automatically run after each test. See the various components for details.
 
-### Axe
+### Commands
+
+This preset adds new custom commands:
+
+#### forcedColors
+
+- Syntax: `cy.forcedColors(value)`
+- Parameters:
+    - `value: "active" | "none"` - `"active"`" enables forced colors, `"none"` disables it.
+
+Emulate CSS media feature [`forced-colors`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/forced-colors) for testing High Contrast mode.
+
+Unless `resetEmulatedMedia` is enabled, this modifies browser settings that persist until the next `cy.forcedColors()` call.
+It is independent from `cy.prefersColorScheme()`, e.g. if you want to use forced colors with dark mode you need to call both functions.
+
+> [!TIP]
+> Enable `resetEmulatedMedia` in `configure()` to automatically reset emulated media features, including forced color mode, between tests.
+
+### prefersColorScheme
+
+- Syntax: `cy.prefersColorScheme(value)`
+- Parameters
+    - `value: "light" | "dark" | "none"` - Sets the preferred color scheme or `none` to disable it (use system default).
+
+Emulate CSS media feature [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme) for testing light/dark mode themes.
+
+Unless `resetEmulatedMedia` is enabled, this modifies browser settings that persist until the next `cy.prefersColorScheme()` call.
+It is independent from `cy.forcedColors()`, e.g. if you want to use forced colors with dark mode you need to call both functions.
+
+> [!TIP]
+> Enable `resetEmulatedMedia` in `configure()` to automatically reset emulated media features, including the color scheme, between tests.
+
+### Axe plugin
 
 A preconfigured [Axe](https://github.com/dequelabs/axe-core) plugin ([@forsakringskassan/cypress-axe](https://github.com/Forsakringskassan/cypress-axe/)) is exported as `axePlugin`:
 
@@ -83,7 +118,7 @@ export default defineConfig(import.meta.dirname, {
 
 Automatic validation after each test cannot currently be disabled.
 
-### docs-generator
+### docs-generator plugin
 
 A plugin to get all pages and examples generated by `@forsakringskassan/docs-generator`.
 This is typically only useful in E2E testing.
@@ -119,7 +154,7 @@ for (const page of pages) {
 
 See [manifest documentation](https://forsakringskassan.github.io/docs-generator/latest/processors/manifest.html) for details about what each page entry contains.
 
-### HTML-Validate
+### HTML-Validate plugin
 
 A preconfigured [HTML-validate](https://html-validate.org/) plugin ([cypress-html-validate](https://gitlab.com/html-validate/cypress-html-validate/)) is exported as `htmlValidatePlugin`:
 
@@ -145,6 +180,7 @@ To automatically run validation after each test configure it using the configura
 import { configure } from "@forsakringskassan/cypress-config/support";
 
 configure({
+    resetEmulatedMedia: true,
     afterEach: {
         htmlvalidate: true,
     },

package/dist/index.mjs

@@ -133,40 +133,7 @@ var require_cjs = __commonJS({
 
 // src/plugins/axe.ts
 import "cypress";
-
-// node_modules/@forsakringskassan/cypress-axe/dist/esm/plugins.js
-import fs from "node:fs";
-import { createRequire } from "node:module";
-var localConfig = null;
-var tasks = {
-  // Allows access to regular log output
-  axeReportLog(message) {
-    console.log(message);
-    return null;
-  },
-  axeGetInjectorSource() {
-    const require4 = createRequire(import.meta.url);
-    const scriptPath = require4.resolve("axe-core/axe.min.js");
-    return fs.readFileSync(scriptPath, "utf8");
-  },
-  getLocalConfig() {
-    return localConfig;
-  }
-};
-function init(on, config, userOptions = void 0) {
-  on("task", tasks);
-  if (userOptions !== void 0) {
-    localConfig = userOptions;
-    return config;
-  }
-  try {
-    localConfig = JSON.parse(fs.readFileSync("fk-cypress-axe.json", {
-      encoding: "utf8"
-    }));
-  } catch {
-  }
-  return config;
-}
+import { init as install } from "@forsakringskassan/cypress-axe/plugins";
 
 // src/utils/merge-config.ts
 var import_deepmerge = __toESM(require_cjs(), 1);
@@ -191,7 +158,7 @@ var defaultOptions = {
 };
 function axePlugin(on, config, userOptions) {
   const options = mergeConfig(defaultOptions, userOptions);
-  config = init(on, config, options);
+  config = install(on, config, options);
   return Promise.resolve(config);
 }
 
@@ -206,10 +173,10 @@ async function docsGeneratorPlugin(_on, config, docs, sourceFiles) {
 }
 
 // src/plugins/html-validate.ts
-import { createRequire as createRequire2 } from "node:module";
+import { createRequire } from "node:module";
 import "cypress";
-import { install } from "cypress-html-validate/plugin";
-var require2 = createRequire2(import.meta.url);
+import { install as install2 } from "cypress-html-validate/plugin";
+var require2 = createRequire(import.meta.url);
 var exclude = [];
 try {
   exclude = require2("@fkui/vue/htmlvalidate/cypress");
@@ -253,13 +220,13 @@ var htmlValidateOptions = () => {
 function htmlValidatePlugin(on, cypressConfig, userConfig, userOptions) {
   const config = mergeConfig(htmlValidateConfig(), userConfig);
   const options = mergeConfig(htmlValidateOptions(), userOptions);
-  install(on, config, options);
+  install2(on, config, options);
   return Promise.resolve(cypressConfig);
 }
 
 // src/default-config.ts
-import { createRequire as createRequire3 } from "node:module";
-var require3 = createRequire3(import.meta.url);
+import { createRequire as createRequire2 } from "node:module";
+var require3 = createRequire2(import.meta.url);
 var isGithub = Boolean(process.env["GITHUB_ACTION"]);
 var versionConfig = Object.freeze({
   "15": {

package/dist/support.d.ts

@@ -8,9 +8,50 @@ import "cypress-html-validate/commands";
  * @since v1.1.0
  */
 export declare function configure(options: {
+    /** When enabled, any emulated CSS media features will be reset between runs */
+    resetEmulatedMedia: boolean;
     afterEach: {
         htmlvalidate: boolean;
     };
 }): void;
 
 export { }
+
+
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            /**
+             * Emulate CSS media feature `forced-colors`.
+             *
+             * @example
+             * ```ts
+             * cy.forcedColors("active");
+             * ```
+             *
+             * @since v1.6.0
+             * @param mode - "active" to enable, "none" to disable.
+             */
+            forcedColors(mode: "none" | "active"): Cypress.Chainable<void>;
+        }
+    }
+}
+
+declare global {
+    namespace Cypress {
+        interface Chainable {
+            /**
+             * Emulate CSS media feature `prefers-color-scheme`.
+             *
+             * @example
+             * ```ts
+             * cy.prefersColorScheme("dark");
+             * ```
+             *
+             * @since v1.6.0
+             * @param value - "light" or "dark" color mode, "none" will disable.
+             */
+            prefersColorScheme(value: "none" | "dark" | "light"): Cypress.Chainable<void>;
+        }
+    }
+}

package/dist/support.mjs

@@ -1,476 +1,98 @@
-// node_modules/@forsakringskassan/cypress-axe/dist/esm/support.js
-var defaultConfig = {
-  axe: {
-    rules: [
-      //Disable color contrast rule
-      {
-        id: "color-contrast",
-        enabled: false
-      }
-    ]
-  },
-  /**
-   * Context object to pass to axe. If not set `window.document` is passed.
-   *
-   * Can be set to:
-   *
-   *   - CSS selector with root element.
-   *   - An object `{include: string[][], exclude: string[][]}`
-   *
-   * Example:
-   *
-   * "context": {
-   *   "include": [["#app"]],
-   *   "exclude": [[".selector1"], [".selector2"]]
-   * }
-   *
-   * See
-   * https://www.deque.com/axe/axe-for-web/documentation/api-documentation/#context-parameter
-   * for a longer description.
-   */
-  context: null,
-  assertOnViolation: true,
-  // Stoppar resterande tester så fort ett misslyckas. (Annars rapporteras även felaktiga testfall som lyckade).
-  displayHelpUrl: true,
-  // Visar aXe help URL tillsammans med felet. Default true.
-  displayContext: true,
-  // Visar sammanhang (CSS selector, HTML, Förslag till rättelse, osv.)
-  displayPasses: false,
-  // Visar även passes. Default false
-  displayViolations: true,
-  // Visar felen. Default true.
-  standardsToReport: ["wcag2a", "wcag2aa"],
-  // Lista med standarder som kontrolleras. Om listan är tom visas valideras samtliga standarder.
-  ignoreAxeFailures: false,
-  // Ignorera Axe-valideringsfel. Default false
-  displayWhen: "both",
-  // När felen ska visas ("immediate", "end", "both")
-  excludeSelectorsList: []
-  // Lista med eventuella CSS selectorer som ska undantas från tillgänglighetskontrollerna
-};
-var Attribute = {
-  ColorCodes: {
-    red: "\x1B[31m",
-    grey: "\x1B[37m",
-    white: "\x1B[37;1m",
-    normalColor: "\x1B[39m",
-    indent: "",
-    green: "\x1B[32m",
-    yellow: "\x1B[33m",
-    magenta: "\x1B[35m",
-    cyan: "\x1B[36m",
-    resetColor: "\x1B[0m",
-    bold: "\x1B[1m",
-    underline: "\x1B[4m",
-    reversed: "\x1B[7m"
-  },
-  red(message) {
-    return `${this.ColorCodes.red}${message}${this.ColorCodes.resetColor}`;
-  },
-  grey(message) {
-    return `${this.ColorCodes.grey}${message}${this.ColorCodes.resetColor}`;
-  },
-  white(message) {
-    return `${this.ColorCodes.white}${message}${this.ColorCodes.resetColor}`;
-  },
-  green(message) {
-    return `${this.ColorCodes.green}${message}${this.ColorCodes.resetColor}`;
-  },
-  yellow(message) {
-    return `${this.ColorCodes.yellow}${message}${this.ColorCodes.resetColor}`;
-  },
-  magenta(message) {
-    return `${this.ColorCodes.magenta}${message}${this.ColorCodes.resetColor}`;
-  },
-  cyan(message) {
-    return `${this.ColorCodes.cyan}${message}${this.ColorCodes.resetColor}`;
-  },
-  bold(message) {
-    return `${this.ColorCodes.bold}${message}${this.ColorCodes.resetColor}`;
-  },
-  underline(message) {
-    return `${this.ColorCodes.underline}${message}${this.ColorCodes.resetColor}`;
-  },
-  reversed(message) {
-    return `${this.ColorCodes.reversed}${message}${this.ColorCodes.resetColor}`;
-  }
-};
-var cachedLocalConfig = null;
-var globalResults = {
-  passes: { enabled: [], disabled: [] },
-  violations: { enabled: [], disabled: [] }
+// src/support/axe.ts
+import "@forsakringskassan/cypress-axe/support";
+
+// src/support/html-validate.ts
+import "cypress-html-validate/commands";
+
+// src/utils/use-emulated-media.ts
+var state = {
+  prefersColorScheme: "none",
+  forcedColors: "none"
 };
-function nodeLog(message) {
-  cy.task("axeReportLog", message, { log: false });
-}
-function getInjectorSource() {
-  return cy.task("axeGetInjectorSource", null, { log: false });
-}
-function validateConfig(config) {
-  const errors = [];
-  for (const key of Object.keys(config)) {
-    if (defaultConfig[key] === void 0) {
-      errors.push(`- The field "${key}" is not a valid configuration option.`);
-    }
-  }
-  if (config.displayWhen !== "immediate" && config.displayWhen !== "end" && config.displayWhen !== "both") {
-    errors.push(`- "displayWhen" can only be set to "immediate", "end", or "both" (was: ${config.displayWhen}).`);
-  }
-  if (errors.length > 0) {
-    nodeLog(Attribute.reversed(Attribute.red(`Invalid fk-cypress-axe configuration!`)));
-    for (const error of errors) {
-      nodeLog(Attribute.red(error));
-    }
-    nodeLog(Attribute.red(`As a result, some tests may be omitted or displayed when they shouldn't be!`));
-  }
-}
-function getConfig() {
-  const localConfig = cachedLocalConfig;
-  if (!localConfig) {
-    return defaultConfig;
-  }
-  const finalConfig = { ...defaultConfig, ...localConfig };
-  if (localConfig.axe) {
-    finalConfig.axe = {
-      ...defaultConfig.axe,
-      ...localConfig.axe
+function* getFeatures() {
+  if (state.prefersColorScheme !== "none") {
+    yield {
+      name: "prefers-color-scheme",
+      value: state.prefersColorScheme
     };
-    if (localConfig.axe.rules) {
-      finalConfig.axe.rules = [
-        ...defaultConfig.axe.rules.filter((defaultRule) => {
-          return localConfig.axe.rules.every((parsedRule) => {
-            return parsedRule.id !== defaultRule.id;
-          });
-        }),
-        ...localConfig.axe.rules
-      ];
-    }
   }
-  validateConfig(finalConfig);
-  return finalConfig;
-}
-function prepareAxe() {
-  getInjectorSource().then((source) => cy.window({ log: false }).then((window) => {
-    window.eval(source);
-    if (!window.axe) {
-      nodeLog(Attribute.red(Attribute.reversed("AXE COULD NOT BE LOADED")) + Attribute.red("\nAxe was likely injected before cy.visit or incorrectly processed"));
-    }
-  }));
-}
-function filterResultsByStandardTags(results, standardTags) {
-  const filteredResults = {
-    enabled: [],
-    disabled: []
-  };
-  if (standardTags.length === 0) {
-    filteredResults.enabled = results;
-    return filteredResults;
-  }
-  const isStandardTag2 = (tag) => {
-    return standardTags.includes(tag);
-  };
-  filteredResults.enabled = results.filter((result) => {
-    return result.tags.some(isStandardTag2);
-  });
-  filteredResults.disabled = results.filter((result) => {
-    return !result.tags.some(isStandardTag2);
-  });
-  return filteredResults;
-}
-function filterResultsByExcludedSelectors(results, excludedSelectors) {
-  const filteredResults = {
-    enabled: [],
-    disabled: []
-  };
-  const isExcluded = (selector) => {
-    return excludedSelectors.includes(selector);
-  };
-  filteredResults.enabled = results.filter((result) => {
-    return result.nodes.some((node) => {
-      return !node.target.some(isExcluded);
-    });
-  });
-  filteredResults.disabled = results.filter((result) => {
-    return result.nodes.some((node) => {
-      return node.target.some(isExcluded);
-    });
-  });
-  return filteredResults;
-}
-function impactToPriority(impact) {
-  switch (impact) {
-    case "minor":
-      return 3;
-    case "moderate":
-      return 2;
-    case "serious":
-      return 1;
-    case "critical":
-      return 0;
-    default:
-      return 4;
-  }
-}
-function formatSuggestions(suggestions) {
-  return suggestions.reduce((msg, line) => {
-    return `${msg}
-					* ${line.replace("\n", "").trim()}`;
-  });
-}
-function formatHTML(html) {
-  return html.reduce((msg, line) => {
-    return `${msg}
-			  ${line.replace("\n", "")}`;
-  });
-}
-function formatTarget(target) {
-  return target.reduce((msg, target2) => {
-    return `${msg} ${target2}`;
-  });
-}
-var isStandardTag = (tag) => {
-  const config = getConfig();
-  return config.standardsToReport.includes(tag);
-};
-function formatTags(tags) {
-  return tags.reduce((msg, tag) => {
-    if (isStandardTag(tag)) {
-      return `${msg}, ${Attribute.green(tag)}`;
-    }
-    return `${msg}, ${tag}`;
-  });
-}
-function printContextField(name, value, withBullet) {
-  name = `${name}:`.padEnd(14);
-  let bullet = ``;
-  if (withBullet) {
-    bullet = `*`;
-  }
-  nodeLog(`		${bullet}	${name}${value}`);
-}
-function displayContext(violation, config) {
-  cy.wrap(violation.nodes, { log: false }).each((node) => {
-    const context = {
-      ["CSS Selector"]: formatTarget(node.target),
-      ["HTML"]: formatHTML(node.html.split("\n")),
-      ["Suggestions"]: formatSuggestions(node.failureSummary.split("\n")),
-      ["Standards"]: formatTags(violation.tags)
+  if (state.forcedColors !== "none") {
+    yield {
+      name: "forced-colors",
+      value: state.forcedColors
     };
-    let withBullet = true;
-    for (const [key, value] of Object.entries(context)) {
-      if (config.displayContext !== true) {
-        continue;
-      }
-      printContextField(key, value, withBullet);
-      withBullet = false;
-    }
-    const log = Cypress.log({
-      name: `(${violation.impact}) ACCESSIBILITY VIOLATION`,
-      consoleProps: () => context,
-      message: violation.help
-    });
-    cy.get(context["CSS Selector"], { log: false }).then(($el) => {
-      log.set({ $el }).snapshot().end();
-    });
-  });
-}
-function printPass(pass, config) {
-  let messageTemplate = ` ${pass.help}`;
-  if (config.displayHelpUrl) {
-    messageTemplate += `
-		${pass.helpUrl}`;
-  }
-  nodeLog(`	${Attribute.green(Attribute.reversed(" PASS "))}${Attribute.green(messageTemplate)}: [${pass.id}]`);
-}
-function printViolation(violation, config) {
-  const impactPriority = impactToPriority(violation.impact);
-  let messageTemplate = ` (${violation.impact}) ${violation.help}`;
-  if (config.displayHelpUrl) {
-    messageTemplate += `
-		${violation.helpUrl}`;
-  }
-  if (impactPriority <= 1) {
-    nodeLog(`	${Attribute.red(Attribute.reversed(" FAIL "))}${Attribute.red(messageTemplate)}: [${violation.id}]`);
-  } else if (impactPriority <= 2) {
-    nodeLog(`	${Attribute.yellow(Attribute.reversed(` FAIL `))}${Attribute.yellow(messageTemplate)}: [${violation.id}]`);
-  } else {
-    nodeLog(`	${Attribute.magenta(Attribute.reversed(` FAIL `))}${Attribute.magenta(messageTemplate)}: [${violation.id}]`);
   }
 }
-var impactComparator = (a, b) => {
-  const aImpact = impactToPriority(a.impact);
-  const bImpact = impactToPriority(b.impact);
-  return Math.sign(aImpact - bImpact);
-};
-function processResults(results, config) {
-  results.sort(impactComparator);
-  const postPass1 = filterResultsByStandardTags(results, config.standardsToReport);
-  const postPass2 = filterResultsByExcludedSelectors(postPass1.enabled, config.excludeSelectorsList);
+function useEmulatedMedia() {
   return {
-    enabled: postPass2.enabled,
-    disabled: [...postPass1.disabled, ...postPass2.disabled]
-  };
-}
-function displayPasses(passes, config) {
-  if (!config.displayPasses || passes.enabled.length === 0) {
-    return;
-  }
-  for (const pass of passes.enabled) {
-    printPass(pass, config);
-  }
-}
-function displayViolations(violations, config, withTitle) {
-  if (!config.displayViolations || violations.enabled.length === 0) {
-    return;
-  }
-  if (violations.enabled.length > 0) {
-    if (withTitle) {
-      const testName = Cypress.mocha.getRunner()?.suite?.ctx?.currentTest?.title ?? "";
-      nodeLog(Attribute.red(`	[${violations.enabled.length} Accessibility violation(s) were detected after `) + Attribute.red(Attribute.underline(`"${testName}"`)) + Attribute.red(`]`));
-    }
-    for (const violation of violations.enabled) {
-      printViolation(violation, config);
-      if (config.displayContext) {
-        displayContext(violation, config);
-      }
-    }
-  } else {
-    nodeLog(Attribute.green(`	All enabled tests passed!`));
-  }
-}
-function anythingToDisplay(config, passes, violations) {
-  const { displayPasses: displayPasses2, displayViolations: displayViolations2 } = config;
-  const numPasses = passes.enabled.length;
-  const numViolations = violations.enabled.length;
-  const anyPasses = displayPasses2 && numPasses > 0;
-  const anyViolations = displayViolations2 && numViolations > 0;
-  return anyPasses || anyViolations;
-}
-function runAxe() {
-  Cypress.log({
-    name: "fk-cypress-axe",
-    displayName: "Axe",
-    message: ["Running accessibility tests"]
-  });
-  const config = getConfig();
-  if (config.ignoreAxeFailures === true) {
-    return;
-  }
-  cy.window({ log: false }).then((window) => {
-    window.axe.configure(config.axe);
-    return window.axe.run(config.context || window.document);
-  }).then(({ passes, violations }) => {
-    passes = processResults(passes, config);
-    violations = processResults(violations, config);
-    const displayNow = config.displayWhen === "immediate" || config.displayWhen === "both";
-    globalResults.passes.enabled = globalResults.passes.enabled.concat(passes.enabled);
-    globalResults.passes.disabled = globalResults.passes.disabled.concat(passes.disabled);
-    globalResults.violations.enabled = globalResults.violations.enabled.concat(violations.enabled);
-    globalResults.violations.disabled = globalResults.violations.disabled.concat(violations.disabled);
-    if (displayNow && anythingToDisplay(config, passes, violations)) {
-      nodeLog("	Accessibility results:");
-      displayPasses(passes, config);
-      displayViolations(violations, config, true);
-      nodeLog("");
-    }
-    return cy.wrap(violations, { log: false });
-  }).then((violations) => {
-    if (config.assertOnViolation) {
-      assert.equal(violations.enabled.length, 0, `${violations.enabled.length} A11y problems were detected`, { log: false });
-    }
-  });
-}
-function removeDuplicates(results) {
-  let finalResults = JSON.parse(JSON.stringify(results));
-  for (const [index, result] of finalResults.entries()) {
-    const foundIndex = finalResults.findIndex((v) => {
-      return v.help === result.help;
-    });
-    if (foundIndex !== index) {
-      finalResults[foundIndex].nodes = finalResults[foundIndex].nodes.concat(result.nodes);
-      finalResults[index].toBeRemoved = true;
-    }
-  }
-  finalResults = finalResults.filter((result) => {
-    return !result.toBeRemoved;
-  });
-  for (const result of finalResults) {
-    for (const [index, node] of result.nodes.entries()) {
-      const foundIndex = result.nodes.findIndex((n) => {
-        return n.html === node.html;
-      });
-      if (foundIndex !== index) {
-        result.nodes[index].toBeRemoved = true;
-      }
+    forcedColors(value) {
+      state.forcedColors = value;
+    },
+    prefersColorScheme(value) {
+      state.prefersColorScheme = value;
+    },
+    cdp() {
+      const features = Array.from(getFeatures());
+      return {
+        command: "Emulation.setEmulatedMedia",
+        params: {
+          media: "screen",
+          features
+        }
+      };
+    },
+    isEnabled() {
+      return state.prefersColorScheme !== "none" || state.forcedColors !== "none";
+    },
+    reset() {
+      state.prefersColorScheme = "none";
+      state.forcedColors = "none";
     }
-    result.nodes = result.nodes.filter((n) => {
-      return !n.toBeRemoved;
-    });
-  }
-  return finalResults;
+  };
 }
-Cypress.Commands.add("getAxeConfigThisFile", () => {
-  const config = getConfig();
-  return cy.wrap(config);
-});
-Cypress.Commands.add("setAxeConfigThisFile", (userConfig) => {
-  cachedLocalConfig = userConfig;
-  return cy.wrap(userConfig);
-});
-Cypress.Commands.add("enableAxeFailures", () => {
-  const config = getConfig();
-  config.ignoreAxeFailures = false;
-  cachedLocalConfig = config;
-});
-Cypress.Commands.add("disableAxeFailures", () => {
-  const config = getConfig();
-  config.ignoreAxeFailures = true;
-  cachedLocalConfig = config;
-});
-Cypress.Commands.add("axe", () => {
-  prepareAxe();
-  runAxe();
-});
-before(() => {
-  cy.task("getLocalConfig", null, { log: false }).then((config) => {
-    cachedLocalConfig = config;
-  });
-});
-afterEach(() => {
-  cy.axe();
-});
-after(() => {
-  const config = getConfig();
-  const displayNow = config.displayWhen === "end" || config.displayWhen === "both";
-  if (config.ignoreAxeFailures === false && displayNow) {
-    globalResults.passes.enabled = removeDuplicates(globalResults.passes.enabled);
-    globalResults.passes.disabled = removeDuplicates(globalResults.passes.disabled);
-    globalResults.violations.enabled = removeDuplicates(globalResults.violations.enabled);
-    globalResults.violations.disabled = removeDuplicates(globalResults.violations.disabled);
-    globalResults.passes.enabled = globalResults.passes.enabled.filter((pass) => {
-      return globalResults.violations.enabled.every((violation) => {
-        return pass.id !== violation.id;
-      });
-    });
-    const { passes, violations } = globalResults;
-    if (anythingToDisplay(config, passes, violations)) {
-      nodeLog(Attribute.reversed(Attribute.yellow("---------------Accessibility Summary----------------")));
-      displayPasses(passes, config);
-      displayViolations(violations, config, false);
-    }
-  }
+
+// src/commands/forced-colors.ts
+var emulatedMedia = useEmulatedMedia();
+Cypress.Commands.add("forcedColors", (mode) => {
+  emulatedMedia.forcedColors(mode);
+  const event = "remote:debugger:protocol";
+  cy.wrap(Cypress.automation(event, emulatedMedia.cdp()), { log: false });
 });
 
-// src/support/html-validate.ts
-import "cypress-html-validate/commands";
+// src/commands/prefers-color-scheme.ts
+var emulatedMedia2 = useEmulatedMedia();
+Cypress.Commands.add("prefersColorScheme", (value) => {
+  emulatedMedia2.prefersColorScheme(value);
+  const event = "remote:debugger:protocol";
+  cy.wrap(Cypress.automation(event, emulatedMedia2.cdp()), { log: false });
+});
 
 // src/support/configure.ts
+function resetEmulatedMedia(emulatedMedia3) {
+  if (!emulatedMedia3.isEnabled()) {
+    return;
+  }
+  emulatedMedia3.reset();
+  const event = "remote:debugger:protocol";
+  cy.wrap(Cypress.automation(event, emulatedMedia3.cdp()), {
+    log: false
+  });
+}
 function configure(options) {
   if (options.afterEach.htmlvalidate) {
     afterEach(() => {
       cy.htmlvalidate();
     });
   }
+  if (options.resetEmulatedMedia) {
+    const emulatedMedia3 = useEmulatedMedia();
+    afterEach(() => {
+      resetEmulatedMedia(emulatedMedia3);
+    });
+    beforeEach(() => {
+      resetEmulatedMedia(emulatedMedia3);
+    });
+  }
 }
 export {
   configure

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@forsakringskassan/cypress-config",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Sharable Cypress configuration building blocks for Försäkringskassan",
   "keywords": [
     "cypress"
@@ -17,8 +17,8 @@
   "author": "Försäkringskassan",
   "sideEffects": [
     "./dist/support.mjs",
-    "./src/support/axe.ts",
-    "./src/support/html-validate.ts"
+    "./src/commands/*",
+    "./src/support/*"
   ],
   "type": "module",
   "imports": {
@@ -40,6 +40,7 @@
     "dist"
   ],
   "dependencies": {
+    "@forsakringskassan/cypress-axe": "5.1.5",
     "cypress-html-validate": "9.1.0",
     "mocha-multi-reporters": "1.5.1"
   },