Cypress UI自动化测试框架学习（6）-用例编辑和脚本录制工具Cypress Studio介绍

欢迎访问个人网站获取更多内容https://naodeng.com.cn/

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

通过阅读文章你会学到什么：

• 如何使用 Cypress Studio 以交互方式扩展测试
• 如何使用 Cypress Studio 以交互方式添加新测试

概述

Cypress Studio 通过记录与被测应用程序的交互，提供了一种在 Test Runner 中生成测试的可视化方式。

支持、.click()、.type()、 和 Cypress 命令.check()，并在与 Cypress Studio 内部的 DOM 交互时生成测试代码。您还可以通过右键单击要断言的元素来生成断言。.uncheck().select()

使用Cypress Studio

Cypress Studio 是一项实验性功能，可以通过将 experimentalStudio属性添加到您的配置文件来启用（cypress.json默认情况下）。

{
   
  "experimentalStudio": true
}

Cypress Real World App (RWA)是一个开源项目，它实现了一个支付应用程序，以展示 Cypress 测试方法、模式和工作流程的实际使用情况。下面将使用它来演示 Cypress Studio 的功能。

扩展测试

您可以扩展任何预先存在的测试，或者通过使用以下测试脚手架在您的integrationFolder （默认情况下）中创建一个新测试来开始 。cypress/integration

// Code from Real World App (RWA)
describe('Cypress Studio Demo', () => {
   
  beforeEach(() => {
   
    // Seed database with test data
    cy.task('db:seed')

    // Login test user
    cy.database('find', 'users').then((user) => {
   
      cy.login(user.username, 's3cret', true)
    })
  })

  it('create new transaction', () => {
   
    // Extend test with Cypress Studio