UD5工具箱
步骤一：选择元素定位策略
开始构建测试场景的第一步是确定元素定位策略。在工具界面的定位策略区域，你可以看到四种选择器选项。对于绝大多数项目，强烈推荐选择 data-cy 策略，这是 Cypress 官方文档中明确推荐的测试专用属性。在实际项目中，你需要在 HTML 元素上添加 data-cy 属性，例如 data-cy="login-button"，然后在测试中使用 cy.get('[data-cy="login-button"]') 来定位该元素。如果你的项目已经采用了 data-testid 属性命名规范，也可以选择对应的策略。只有在特殊需求下才建议使用自定义选择器模式。
步骤二：选择测试模板或从空白开始
确定选择器策略后，你可以选择加载预置模板来快速开始。点击模板区域的「登录模板」按钮，工具会自动填充一套包含登录页面访问、用户名密码输入、登录按钮点击和登录成功验证的完整测试步骤。如果你需要测试的是表单提交、页面导航或 API 接口，则分别选择对应的模板。如果这些模板都不符合你的需求，可以选择空白模式，从第一步开始手动添加测试步骤。模板加载后，你可以对其中的每一步进行修改、删除或重新排序。
步骤三：添加测试操作步骤
点击「添加步骤」按钮进入操作配置界面。首先在操作类型下拉菜单中选择需要执行的操作。例如要访问某个页面，选择 visit 操作类型；要点击某个按钮，选择 click 操作类型。然后在目标元素输入框中填写元素的选择器值。如果选择的是 data-cy 策略，只需输入属性值（如 login-button），工具会自动拼接完整的选择器字符串。部分操作类型还需要填写额外参数，例如 type 操作需要输入要键入的文本内容，select 操作需要指定要选择的选项值，wait 操作需要填写等待的时间毫秒数或条件表达式。填写完成后点击确认，测试步骤即被添加到列表中。
步骤四：配置断言验证点
测试用例的有效性很大程度上取决于断言的正确配置。在需要添加验证的步骤之后，点击「添加断言」按钮。选择要验证的断言类型，例如如果要检查某个元素是否在页面上显示出来，选择 be.visible 断言；如果要验证按钮点击后页面是否包含特定文本，选择 contain 断言。然后填写断言的目标元素和预期值。例如选择 have.value 断言来验证输入框的值是否正确，在参数栏中填入期望的值。工具支持在同一个步骤后添加多个断言，以实现全面的验证覆盖。
步骤五：管理测试步骤列表
在添加完所有测试步骤和断言后，使用步骤列表管理功能来优化测试流程。浏览整个步骤列表，确认操作顺序是否符合实际的用户交互流程。如果发现某个步骤的顺序需要调整，点击该步骤旁边的上移或下移箭头按钮来改变其在列表中的位置。对于不再需要的步骤，点击删除按钮将其移除。合理的步骤顺序应当遵循实际用户操作的先后关系，例如先访问页面、再填写表单、最后提交验证。通过反复调整和优化，确保测试流程清晰且符合业务逻辑。
步骤六：生成并使用测试代码
确认所有测试步骤和断言配置无误后，点击「生成代码」按钮。工具会立即在代码预览区域输出完整的 Cypress describe/it 测试代码块。仔细检查生成的代码，确认测试描述、操作步骤和断言内容都符合预期。如果发现需要修改的地方，返回步骤列表进行调整后重新生成。代码满意后，点击「复制代码」按钮将全部代码复制到剪贴板，然后粘贴到项目的 Cypress 测试文件中（如 cypress/e2e/login.cy.js）。保存文件后即可在 Cypress 测试运行器中执行该测试用例。