Skip to main content
Cypress应用
仅限端到端测试

Cypress Studio

info
你将学到​
  • 如何通过录制交互使用Cypress Studio生成测试
  • 如何使用Cypress Studio添加新测试和扩展现有测试
caution

实验性功能

Cypress Studio是一个实验性功能，可以通过在Cypress配置中添加 experimentalStudio 属性来启用。

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    experimentalStudio: true,
  },
})

限制​

  • Cypress Studio目前仅适用于编写端到端测试，尚不支持组件测试。
  • Cypress Studio不支持编写涉及多源域的测试。
  • Cypress Studio无法直接与ShadowDom内的元素交互，但仍可以运行相关测试。

概述​

Cypress Studio提供了一种可视化方式，通过_录制交互_来生成针对被测应用的测试。

支持.click()、.type()、 .check()、.uncheck()和 .select()等Cypress命令，这些命令会在与Cypress Studio中的DOM交互时生成测试代码。

您还可以通过右键点击想要断言的元素来生成断言。

Cypress 真实世界应用(RWA)是一个开源项目，实现了一个支付应用，用于展示Cypress测试方法、模式和流程的实际应用。下文将用它来演示Cypress Studio的功能。

扩展现有测试​

您可以扩展现有测试，或使用以下测试脚手架创建新测试。

info

克隆真实世界应用(RWA)并参考 cypress/tests/demo/cypress-studio.cy.ts 文件。

// 代码来自真实世界应用(RWA)
describe('Cypress Studio演示', () => {
  beforeEach(() => {
    // 用测试数据填充数据库
    cy.task('db:seed')

    // 登录测试用户
    cy.database('find', 'users').then((user) => {
      cy.login(user.username, 's3cret', true)
    })
  })

  it('创建新交易', () => {
    // 使用Cypress Studio扩展测试
  })
})

步骤1 - 运行测试规范​

我们将使用Cypress Studio执行"新建交易"的用户流程。首先，启动Cypress并选择端到端测试，然后选择运行测试的浏览器。

浏览器打开后，运行上一步创建的测试规范。

Cypress Studio

步骤2 - 启动Cypress Studio​

测试运行完成后，将鼠标悬停在命令日志中的测试上，会出现添加命令到测试按钮。

点击添加命令到测试将启动Cypress Studio。

info

Cypress会自动执行所有钩子和当前存在的测试代码，然后可以从该点开始扩展测试（例如，在beforeEach块中我们已经登录到应用程序）。

激活Cypress Studio

接下来，Cypress将隔离执行测试，并在测试的最后一条命令后暂停。

现在，我们可以开始更新测试，创建用户之间的新交易。

Cypress Studio准备就绪

步骤3 - 与应用程序交互​

要录制操作，开始与应用程序交互。这里我们将点击标题右侧的新建按钮，结果会在命令日志中看到点击记录。

Cypress Studio录制点击

接下来，我们可以开始输入要付款的用户名称。

Cypress Studio录制输入

一旦在结果中看到名称，我们想添加一个断言以确保搜索功能正常工作。右键点击用户名，从菜单中选择添加断言，检查元素是否包含正确的文本（用户名）。

Cypress Studio添加断言

然后我们可以点击该用户以进入下一个屏幕。我们将通过点击并输入金额和描述输入框来完成交易表单。

Cypress Studio录制输入

现在是完成交易的时候了。您可能已经注意到，在输入之前"支付"按钮是禁用的。为了确保表单验证正常工作，让我们添加一个断言，确保"支付"按钮已启用。

Cypress Studio添加断言

最后，我们将点击"支付"按钮，进入新交易的确认页面。

Cypress Studio保存命令

要放弃交互，点击取消按钮退出Cypress Studio。如果对应用程序的交互满意，点击保存命令，测试代码将保存到您的规范文件中。或者，您可以选择复制按钮将生成的命令复制到剪贴板。

生成的测试代码​

查看我们的测试代码，可以看到点击保存命令后，测试已更新为我们在Cypress Studio中录制的操作。

// 代码来自真实世界应用(RWA)
describe('Cypress Studio演示', () => {
  beforeEach(() => {
    // 用测试数据填充数据库
    cy.task('db:seed')

    // 登录测试用户
    cy.database('find', 'users').then((user) => {
      cy.login(user.username, 's3cret', true)
    })
  })

  it('创建新交易', () => {
    /* ==== 由Cypress Studio生成 ==== */
    cy.get('[data-test=nav-top-new-transaction]').click()
    cy.get('[data-test=user-list-search-input]').clear()
    cy.get('[data-test=user-list-search-input]').type('dev')
    cy.get(
      '[data-test=user-list-item-tsHF6_D5oQ] > .MuiListItemText-root > .MuiListItemText-primary'
    ).should('have.text', 'Devon Becker')
    cy.get('[data-test=user-list-item-tsHF6_D5oQ]').click()
    cy.get('#amount').clear()
    cy.get('#amount').type('$25')
    cy.get('#transaction-create-description-input').clear()
    cy.get('#transaction-create-description-input').type('Sushi dinner')
    cy.get('[data-test=transaction-create-submit-payment]').should('be.enabled')
    cy.get('[data-test=transaction-create-submit-payment]').click()
    /* ==== Cypress Studio结束 ==== */
  })
})

选择器是根据Cypress.SelectorPlayground选择器优先级生成的。

添加新测试​

您可以通过点击定义的describe块上的添加新测试，向任何现有的describe或context块添加新测试。

Cypress Studio添加测试

我们将进入Cypress Studio，可以开始与应用程序交互以生成测试。

对于这个测试，我们将添加一个新的银行账户。我们的交互如下：

  1. 点击左侧导航中的"银行账户"
    Cypress Studio开始添加测试
  2. 点击银行账户页面上的"创建"按钮
    Cypress Studio添加测试创建银行账户
  3. 填写银行账户信息
    Cypress Studio添加测试完成银行账户表单
  4. 点击"保存"按钮
    Cypress Studio添加测试保存银行账户

要放弃交互，点击取消按钮退出Cypress Studio。

如果对应用程序的交互满意，点击保存命令，提示将要求输入测试名称。点击保存测试，测试将保存到文件中。

Cypress Studio添加测试完成运行

保存后，文件将在Cypress中再次运行。

Cypress Studio添加测试完成运行

最后，查看我们的测试代码，可以看到点击保存命令后，测试已更新为我们在Cypress Studio中录制的操作。

// 代码来自真实世界应用(RWA)
import { User } from 'models'

describe('Cypress Studio演示', () => {
  beforeEach(() => {
    cy.task('db:seed')

    cy.database('find', 'users').then((user: User) => {
      cy.login(user.username, 's3cret', true)
    })
  })

  it('创建新交易', () => {
    // 使用Cypress Studio扩展测试
  })

  /* === 由Cypress Studio创建的测试 === */
  it('创建银行账户', function () {
    /* ==== 由Cypress Studio生成 ==== */
    cy.get('[data-test=sidenav-bankaccounts]').click()
    cy.get('[data-test=bankaccount-new] > .MuiButton-label').click()
    cy.get('#bankaccount-bankName-input').click()
    cy.get('#bankaccount-bankName-input').type('Test Bank Account')
    cy.get('#bankaccount-routingNumber-input').click()
    cy.get('#bankaccount-routingNumber-input').type('987654321')
    cy.get('#bankaccount-accountNumber-input').click()
    cy.get('#bankaccount-accountNumber-input').type('123456789')
    cy.get('[data-test=bankaccount-submit] > .MuiButton-label').click()
    /* ==== Cypress Studio结束 ==== */
  })
})
info

克隆真实世界应用(RWA)并参考 cypress/tests/demo/cypress-studio.cy.ts 文件。

目录