快速掌握 Cypress：10 大常用指令详解

乐闻

2022年10月26日 12:18· 阅读 693

前言

Cypress 是一个现代化的前端自动化测试框架，因其强大的功能和易用性，深受前端开发和测试工程师的喜爱。本文将围绕 Cypress 的常用指令展开，详细介绍每个指令的作用、用法及示例，帮助你快速掌握 Cypress 的核心操作，实现高效自动化测试。

1. Cypress 简介

Cypress 是基于 JavaScript 的端到端（E2E）测试工具，支持浏览器自动化，能够模拟用户操作，验证页面行为。它与传统 Selenium 不同，运行在浏览器内，速度快且调试方便。

2. 常用 Cypress 指令分类

2.1 访问页面指令

cy.visit(url)

作用：打开指定的 URL 地址，加载页面。

示例：
```
js
cy.visit('https://www.example.com')
```
说明：这是测试的起点，通常在测试用例开始时调用。

2.2 查找元素指令

cy.get(selector)

作用：通过 CSS 选择器查找页面元素。

示例：
```
js
cy.get('.btn-primary')
```
cy.contains(text)

作用：查找包含指定文本的元素。

示例：
```
js
cy.contains('提交')
```
cy.find(selector)

作用：在已有元素集合中进一步查找子元素。

示例：
```
js
cy.get('.form').find('input[name="username"]')
```
cy.eq(index)

作用：从元素集合中选取指定索引的元素（从0开始）。

示例：
```
js
cy.get('li').eq(2)  // 选取第三个 li 元素
```

2.3 交互操作指令

cy.click()

作用：模拟点击操作。

示例：
```
js
cy.get('button.submit').click()
```
cy.type(text)

作用：在输入框中输入文本。

示例：
```
js
cy.get('input[name="email"]').type('test@example.com')
```
cy.clear()

作用：清空输入框内容。

示例：
```
js
cy.get('input[name="search"]').clear()
```
cy.select(value)

作用：选择下拉菜单中的某个选项。

示例：
```
js
cy.get('select#country').select('China')
```

cy.check() 和 cy.uncheck()

作用：勾选和取消勾选复选框。

示例：

js
cy.get('input[type="checkbox"]').check()
cy.get('input[type="checkbox"]').uncheck()

2.4 断言指令

Cypress 内置了强大的断言功能，基于 Chai 断言库。

should()

作用：对元素状态或属性进行断言。

常见用法：

js
cy.get('.alert').should('be.visible')          // 元素可见
cy.get('input').should('have.value', 'abc')   // 输入框值为 abc
cy.get('button').should('be.disabled')         // 按钮禁用

and()

作用：链式断言，多个条件同时满足。

示例：

js
cy.get('input')
  .should('be.visible')
  .and('have.attr', 'placeholder', '请输入用户名')

expect()

作用：断言变量或结果，常用于回调函数中。

示例：

js
cy.get('h1').then($el => {
  expect($el.text()).to.equal('欢迎')
})

2.5 其他辅助指令

cy.wait(time)

作用：等待指定时间（毫秒），一般用于等待异步操作。

示例：
```
js
cy.wait(2000)  // 等待2秒
```
cy.reload()

作用：刷新当前页面。

示例：
```
js
cy.reload()
```
cy.url()

作用：获取当前页面 URL，常用于断言。

示例：
```
js
cy.url().should('include', '/dashboard')
```
cy.scrollTo(position)

作用：滚动页面到指定位置。

示例：
```
js
cy.scrollTo('bottom')
```

3. 实战示例

下面通过一个简单的登录页面测试示例，展示上述指令的综合应用。

js
describe('登录功能测试', () => {
  it('用户能成功登录', () => {
    // 访问登录页
    cy.visit('https://example.com/login')

    // 输入用户名和密码
    cy.get('input[name="username"]').type('testuser')
    cy.get('input[name="password"]').type('123456')

    // 点击登录按钮
    cy.get('button[type="submit"]').click()

    // 断言跳转到首页
    cy.url().should('include', '/home')

    // 断言欢迎信息显示
    cy.contains('欢迎，testuser').should('be.visible')
  })
})

4. 总结

Cypress 的常用指令涵盖了页面访问、元素查找、用户交互、断言验证等核心功能。掌握这些指令，能够帮助你编写清晰、稳定、易维护的自动化测试脚本。建议在实际项目中结合官方文档和调试工具，灵活运用这些指令，提升测试效率和质量。

标签：

NodeJS