Next.js项目中单个Percy Cypress测试运行异常问题排查

你遇到的问题有两个关键原因：

1. npm脚本调用方式错误
   你的test-visual:single脚本最后一个参数直接写了percy-cypress-single，但start-server-and-test会将其视为系统原生命令执行，而非调用你定义的npm脚本。npm不会自动解析自定义脚本名，导致实际执行的是默认的Percy+Cypress流程，跑所有测试。

2. Cypress参数格式错误
   percy-cypress-single脚本里的-- spec写法有误，Cypress的指定测试文件参数是--spec（参数名和值之间不能有空格），空格会让Cypress忽略这个参数，依然执行所有测试。

修复步骤 #

同时修正这两个问题，修改后的package.json脚本如下：

"scripts": {
  "cypress:run": "cypress run",
  "percy:cypress": "percy exec -- cypress run",
  "test-visual": "start-server-and-test 'npm run dev' http://localhost:3000 percy:cypress",
  "percy-cypress-single": "percy exec -- cypress run --spec cypress/e2e/test1.cy.ts",
  "test-visual:single": "start-server-and-test 'npm run dev' http://localhost:3000 'npm run percy-cypress-single'"
},

验证方法 #

先单独执行npm run percy-cypress-single，确认是否只运行test1.cy.ts的测试。如果这个命令正常工作，再执行npm run test-visual:single就只会跑指定的可视化测试了。

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