Cypress录制自动化测试脚本-Cypress Studio

最新推荐文章于 2025-03-29 09:20:23 发布

小Q同志

最新推荐文章于 2025-03-29 09:20:23 发布

阅读量446

点赞数 5

文章标签：前端测试工具自动化

本文链接：https://blog.csdn.net/qq_44285695/article/details/145286063

版权

Cypress录制自动化测试脚本-Cypress Studio

Cypress Studio提供了一种在测试运行程序中生成测试的可视化方法，通过记录与被测应用程序的交互。支持.click（）、.type（）、.check（）、.uncheck（）和.select（）Cypress命令，这些命令将在与Cypress Studio内部的DOM交互时生成测试代码

安装Cypress的方法在前一篇文章Cypress的安装

Cypress Studio配置

当前使用Cypress Studio需要事先在cypress.config.json中进行配置：

experimentalStudio: true

配置好后，就可以使用了。

示例

创建一个测试cypress.js，放在e2e目录下，前两个1、2是cypress的示例，不建议删除，可以留着运行学习
在这里插入图片描述
代码内容如下：

describe('Cypress demo', () => {
  it('Cypress Studio Demo', () => {
    // 访问百度
    cy.visit('https://www.baidu.com')
  })
  it('New Recording Test', () => {
    // 这个测试用例将通过 Studio 录制
    // 1. 运行测试
    // 2. 点击 烟花棒 按钮
    // 3. 开始录制你的操作
  })
})

运行Cypress

npm run open

在这里插入图片描述
找到自己的测试脚本点击运行

脚本运行结束后，你会在Test Runner里看到如下标记：
看到“Add Commands to Tests“这个“仙女棒”了没？点击它！

随之，便出现STUDIO 的标志，这个时候，你在页面上的任何操作，Cypress都会记录下来把它变成测试代码。
在这里插入图片描述