PhpStorm 能直接运行 Cypress 测试文件是因为其基于路径、命名和结构自动识别，满足目录、文件名和 describe/it 三个条件即可显示运行图标；点击执行的是 cypress run 单文件命令而非 open，调试需手动配置 Node.js 运行配置启动 Test Runner 界面。
PhpStorm 为什么能直接运行 Cypress 测试文件
不是靠插件或额外配置，而是 PhpStorm 基于文件路径、命名约定和测试结构自动识别。只要满足三个硬性条件：测试文件放在 cypress/e2e/（Cypress 10+）或 cypress/integration/（旧版）目录下；文件名以 .spec.js、.cy.js 或 .test.js 结尾；内容包含 describe() 和至少一个 it() 块——PhpStorm 就会在行号左侧显示绿色 ▶️ 图标，点击即可启动 Cypress Test Runner。
常见失败不是因为“没配好”，而是：
-
cypress命令在终端里都执行不了（比如Command 'cypress' not found），说明项目没装或node_modules/.bin不在 PATH 中 - 用了
pnpm但没在 PhpStorm 的Settings > Languages & Frameworks > JavaScript > pnpm里启用支持，导致找不到二进制 - 文件放在了
src/或tests/这类非约定路径下，PhpStorm 完全无视
点击 ▶️ 后实际执行的是什么命令
PhpStorm 并不调用 cypress open，而是启动一个带参数的 cypress run 实例，目标是当前选中的单个 spec 文件，并默认开启 GUI 模式（即有浏览器窗口）。它等价于你在终端里手动执行：
node_modules/.bin/cypress run --spec "cypress/e2e/login.spec.js" --headed
这意味着：
立即学习“PHP免费学习笔记（深入）”；
- 不会打开 Cypress Test Runner 主界面，而是直接跑完就退出，适合快速验证单个用例
- 如果想调试（看 DOM 快照、时间旅行、网络请求面板），必须用
cypress open手动启动——PhpStorm 的 ▶️ 不提供这个能力 - 断言失败时，错误堆栈会完整输出到 PhpStorm 底部的
Run工具窗口，但错误类型是CypressError，不是 JS 语法错误，别去翻 console 面板找
如何让 PhpStorm 启动 Cypress Test Runner 界面（而非单测）
不能直接点 ▶️ 实现。你需要手动配置一个“Node.js”运行配置：
- 打开
Run > Edit Configurations - 点击
+> 选择Node.js -
Working directory设为项目根目录 -
JavaScript file填node_modules/cypress/lib/cli/index.js（或更稳妥地填node_modules/.bin/cypress，取决于你的 shell 环境） -
Application parameters填open
保存后，就能从顶部运行菜单里选这个配置启动完整界面。注意：cypress open 启动后，所有测试文件都会被扫描并列在左侧，此时再点某个 it() 行号旁的 ▶️，才是真正在界面里单步重跑——这才是调试该用的方式。
Web Inspector 生成的选择器为什么经常失效
PhpStorm 内置的 Web Inspector（右侧边栏）确实能点选元素生成 cy.get() 代码，但它基于页面快照生成 CSS 路径，不是实时 DOM 查询。失效原因很具体：
- 页面是 SPA，路由跳转后 DOM 重建，之前生成的
button[type="submit"]可能已不存在 - 元素依赖动态 class（如
btn--loading），而快照抓取时 class 还没加上 - 用了伪元素或 shadow DOM，CSS 选择器根本无法穿透
- 生成时没勾选
ID或data-cy优先级，结果选了div > div:nth-child(2) > span这种脆弱路径
真正可靠的做法是：开发阶段就约定加 data-cy="login-submit" 属性，测试里直接写 cy.get('[data-cy="login-submit"]')。Web Inspector 只适合临时抓一个静态页里的按钮，别当主力方案。
