# @forsakringskassan/cypress-config 中文文档

规范地址：https://npmcn.com/package/%40forsakringskassan/cypress-config/

版本：1\.11\.0
npm 元数据更新时间：2026-11-03T08:43:34.262Z
中文译文更新时间：2026-11-15T09:31:25.971Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40forsakringskassan/cypress-config
原文对照：https://npmcn.com/package/%40forsakringskassan/cypress-config/?lang=original
项目主页：https://github.com/Forsakringskassan/cypress-config#readme
源码仓库：https://github.com/Forsakringskassan/cypress-config

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：31.3 kB，9 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：^22\.16 \|\| \>= 24
- 运行依赖：3 个
- peer 依赖：cypress ^15\.17\.0 \|\| ^16\.0\.0，@fkui/vue \>= 6\.0\.0，html-validate \>= 8\.0\.0，@forsakringskassan/docs-generator ^3\.0\.0
- 首次发布：2026-09-01T21:20:53.761Z
- 最新版本发布：2026-11-03T08:43:33.892Z
- 近 30 天下载量：24004（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：22（近 12 个月 22 个）

## 中文简介

Försäkringskassan 可扩展 Cypress 配置组件

## 安装

```sh
npm install @forsakringskassan/cypress-config
```

也可以使用：`pnpm add @forsakringskassan/cypress-config`、`yarn add @forsakringskassan/cypress-config`、`bun add @forsakringskassan/cypress-config`

## README

# `@forsakringskassan/cypress-config`

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

## 安装

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

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

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

-   [使用量](https://npmcn.com/package/%40forsakringskassan/cypress-config/#readme-usage)
-   [图标](https://npmcn.com/package/%40forsakringskassan/cypress-config/#readme-commands)
-   [轴插件](https://npmcn.com/package/%40forsakringskassan/cypress-config/#readme-axe-plugin)
-   [docs 生成器插件](https://npmcn.com/package/%40forsakringskassan/cypress-config/#readme-docs-generator-plugin)
-   [HTML 虚拟插件](https://npmcn.com/package/%40forsakringskassan/cypress-config/#readme-html-validate-plugin)

## 使用量

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

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

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

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

> \[TIP\] 这个 `defineConfig()` 帮助不需要配置对象作为第二个参数. 除非您明确覆盖默认配置,否则建议调用 `defineConfig()` 没有它.
> 
> ```ts
> export default defineConfig(import.meta.dirname);
> ```
> 
> 这确保了与未来发行的最大兼容性.

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

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

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

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

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

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

-   [`FormatPlugin`](https://designsystem.forsakringskassan.se/latest/functions/plugins/formatplugin.html)
-   [`TestPlugin`](https://designsystem.forsakringskassan.se/latest/functions/plugins/testplugin.html)
-   [`TranslationPlugin`](https://designsystem.forsakringskassan.se/latest/functions/plugins/translationplugin.html)
-   [`ValidationPlugin`](https://designsystem.forsakringskassan.se/latest/functions/plugins/validationplugin.html)

此外,它还:

-   处理 警告为错误 .

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

```diff
-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);
```

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

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

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

```ts
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`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/forced-colors) 用于测试高对比度模式.

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

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

### 首选颜色方案

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

模拟 CSS 媒体特性 [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme) 用于测试光/暗模式主题.

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

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

### 轴插件

预设 [轴](https://github.com/dequelabs/axe-core) 插件 (e)[@forsakringskassan/cypress-axe (英语)](https://github.com/Forsakringskassan/cypress-axe/)导出为 `axePlugin`数字 :

```ts
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测试中有用.

```ts
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")` 包含补充信息:

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

见 [显示文档](https://forsakringskassan.github.io/docs-generator/latest/processors/manifest.html) 详细介绍每个页面条目包含的内容.

### HTML 虚拟插件

预设 [HTML 验证](https://html-validate.org/) 插件 (e)[cypress-html-验证](https://gitlab.com/html-validate/cypress-html-validate/)导出为 `htmlValidatePlugin`数字 :

```ts
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;
        },
    },
});
```

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

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

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

## 常见问题

### @forsakringskassan/cypress-config 是什么？

Försäkringskassan 可扩展 Cypress 配置组件

### 如何安装 @forsakringskassan/cypress-config？

在项目目录运行 npm install @forsakringskassan/cypress-config，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：cypress（^15\.17\.0 \|\| ^16\.0\.0）、@fkui/vue（\>= 6\.0\.0）、html-validate（\>= 8\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @forsakringskassan/cypress-config 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @forsakringskassan/cypress-config 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @forsakringskassan/cypress-config 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js ^22\.16 \|\| \>= 24。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @forsakringskassan/cypress-config 可以商用吗？

@forsakringskassan/cypress-config 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @forsakringskassan/cypress-config 的下载量有多少？

根据 npm 官方下载统计，@forsakringskassan/cypress-config 在 2026/10/16 – 2026/11/14 这 30 天内被下载 24,004 次，日均约 800 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @forsakringskassan/cypress-config 还在维护吗？

最新版本 1\.11\.0 发布于 2026/11/03（12 天前）；至今共发布 22 个版本，其中过去 12 个月发布了 22 个；首次发布于 2026/09/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。