@forsakringskassan/cypress-config

为Försäkringskassan设计的可扩展 Cypress配置构件.

安装

npm install --save-dev @forsakringskassan/cypress-config

如果您以前安装过这些软件包, 它们可以被卸载 :

npm rm \
  @forsakringskassan/cypress-axe \
  cypress-html-validate \
  mocha-multi-reporters

• 使用量
• 图标
• 轴插件
• docs 生成器插件
• HTML 虚拟插件

使用量

单位 cypress.config.ts,替换香草 defineConfig() 助手从 cypress 与 @forsakringskassan/cypress-config 传入 import.meta.dirname 作为第一个参数 :

-import { defineConfig } from "cypress";
+import { defineConfig } from "@forsakringskassan/cypress-config";

-export default defineConfig({
+export default defineConfig(import.meta.dirname, {
   /* ... */
 });

它的工作原理相同,但预设了新的默认.

[TIP] 这个 defineConfig() 帮助不需要配置对象作为第二个参数. 除非您明确覆盖默认配置,否则建议调用 defineConfig() 没有它.

export default defineConfig(import.meta.dirname);

这确保了与未来发行的最大兼容性.

配置功能可用于 cypress/support/e2e.ts 和(或) cypress/support/component.ts数字 :

import { configure } from "@forsakringskassan/cypress-config/support";

await configure({
    resetEmulatedMedia: true,
    afterEach: {
        htmlvalidate: true,
    },
});

[注]
这个 configure() 函数将被精确调用一次. 如果忽略了调用,一些功能将无法如预期的那样工作. 称它多次是未定义的行为.

• resetEmulatedMedia - 一旦启用,任何模拟的 CSS 媒体功能都会被重置在运行间.
• afterEach - 允许每次测试后自动运行特性。 详情见各组成部分.

组件测试预配置 mount 函数可用. 它添加了来自以下 Vue 插件 @fkui/vue数字 :

• FormatPlugin
• TestPlugin
• TranslationPlugin
• ValidationPlugin

此外,它还:

• 处理 警告为错误 .

要使用,请编辑 cypress/support/component.ts数字 :

-import { mount } from "cypress/mount";
-import { configure } from "@forsakringskassan/cypress-config/support";
+import { configure, mount } from "@forsakringskassan/cypress-config/support";

 Cypress.Commands.add("mount", mount);

如果您需要进一步定制,请在自定义功能中包扎:

Cypress.Commands.add("mount", (component, options = {}) => {
    /* modify options as needed */
    return mount(component, options);
});

对于高级用途,请使用 createMount() 创建 mount() 手动函数 :

import { createMount } from "@forsakringskassan/cypress-config/support";

const mount = await createMount({/* options */});

Cypress.Commands.add("mount", mount);

图标

此预设添加了新的自定义命令 :

强制颜色

• 语法 cy.forcedColors(value)
• 参数:
  • value: "active" | "none" - 说吧 "active"" 允许强迫颜色, "none" 关闭它.

模拟 CSS 媒体特性 forced-colors 用于测试高对比度模式.

除非我们.. resetEmulatedMedia 启用,此修改了浏览器设置,该设置将持续到下一个 cy.forcedColors() 电话. 它独立于 cy.prefersColorScheme(),例如,如果想要使用带有暗模式的强制颜色,则需要调用两个函数.

[TIP] 启用 resetEmulatedMedia 内 configure() 以在测试之间自动重置模拟媒体功能,包括强制颜色模式.

首选颜色方案

• 语法 cy.prefersColorScheme(value)
• 参数
  • value: "light" | "dark" | "none" - 设置首选颜色方案或 none 以禁用它(使用系统默认值).

模拟 CSS 媒体特性 prefers-color-scheme 用于测试光/暗模式主题.

除非我们.. resetEmulatedMedia 启用,此修改了浏览器设置,该设置将持续到下一个 cy.prefersColorScheme() 电话. 它独立于 cy.forcedColors(),例如,如果想要使用带有暗模式的强制颜色,则需要调用两个函数.

[TIP] 启用 resetEmulatedMedia 内 configure() 以在测试之间自动重置模拟媒体特性,包括颜色方案.

轴插件

预设 轴 插件 (e)@forsakringskassan/cypress-axe (英语)导出为 axePlugin数字 :

import { defineConfig, axePlugin } from "@forsakringskassan/cypress-config";

export default defineConfig(import.meta.dirname, {
    component: {
        async setupNodeEvents(on, config) {
            config = await axePlugin(on, config);
            return config;
        },
    },
});

每次测试后自动验证目前无法禁用 .

docs 生成器插件

获取全部页面和实例的插件 @forsakringskassan/docs-generator。 。 。 . 这通常只在E2E测试中有用.

import {
    defineConfig,
    docsGeneratorPlugin,
} from "@forsakringskassan/cypress-config";
/
const docs = new Generator(import.meta.url, {});
const sourceFiles = [];

export default defineConfig(import.meta.dirname, {
    e2e: {
        async setupNodeEvents(on, config) {
            config = await docsGeneratorPlugin(on, config, docs, sourceFiles);
            return config;
        },
    },
});

网页检索使用 Cypress.expose("pages") 包含补充信息:

const pages = Cypress.expose("pages") ?? [];
for (const page of pages) {
    const { path, examples } = page;
    /* ... */
}

见 显示文档 详细介绍每个页面条目包含的内容.

HTML 虚拟插件

预设 HTML 验证 插件 (e)cypress-html-验证导出为 htmlValidatePlugin数字 :

import {
    defineConfig,
    htmlValidatePlugin,
} from "@forsakringskassan/cypress-config";

export default defineConfig(import.meta.dirname, {
    component: {
        async setupNodeEvents(on, config) {
            config = await htmlValidatePlugin(on, config);
            return config;
        },
    },
});

每次测试后要使用配置功能自动运行验证:

import { configure } from "@forsakringskassan/cypress-config/support";

await configure({
    resetEmulatedMedia: true,
    afterEach: {
        htmlvalidate: true,
    },
});