如何在Angular中以无头模式同时运行Storybook与Cypress

核心结论 #

Storybook完全支持非交互/无头模式运行，专门适配CI/CD场景，下面是针对你的Angular项目的具体配置步骤：

1. Storybook CI模式启动命令 #

直接用CLI启动时，执行以下命令即可启动非监听、无交互的Storybook服务：

npx storybook dev -p 6006 --ci --quiet

• --ci：开启CI模式，禁用热重载和交互界面，服务启动后不会监听文件变化
• -p 6006：固定端口，和Cypress配置的baseUrl保持一致
• --quiet：减少冗余日志输出，适合自动化环境

2. 修改angular.json配置自定义命令 #

在你的项目angular.json的projects -> [项目名称] -> architect节点下，新增两个自定义命令：

"storybook-ci": {
  "builder": "@storybook/angular:start-storybook",
  "options": {
    "port": 6006,
    "ci": true,
    "quiet": true,
    "configDir": ".storybook"
  }
},
"cypress-storybook-run": {
  "builder": "@angular-devkit/build-angular:shell",
  "options": {
    "command": "npx wait-on http://localhost:6006 && npx cypress run --headless"
  }
}

• storybook-ci：通过Storybook官方Angular构建器启动CI模式服务
• cypress-storybook-run：先用wait-on工具等待Storybook服务完全就绪，再启动Cypress无头测试（需先安装依赖：npm install wait-on --save-dev）

3. 配置联合运行脚本 #

在package.json的scripts中添加一键执行脚本：

"test:storybook": "concurrently \"npm run storybook-ci\" \"npm run cypress-storybook-run\" --kill-others"

• 用concurrently同时启动两个命令，--kill-others保证任一命令失败时全部终止（需安装依赖：npm install concurrently --save-dev）

4. 关键检查点 #

• 确认cypress.config.ts中baseUrl设置为http://localhost:6006
• 你的Cypress测试用例要正确指向Storybook的story路径，比如访问/iframe.html?id=testcomponent--primary（对应你的test.stories.ts里的story ID）
• CI环境中若端口6006被占用，可改用动态端口（配合wait-on监听对应端口）

内容的提问来源于stack exchange，提问作者code_buddy