Cypress 常用命令

cy = Cypress 提供的“浏览器自动操作 + 断言 API”

最常用的 cy 方法

打开页面

• 只能用在 E2E Testing

cy.visit()
示例:
cy.visit('http://localhost:5173')

找元素

• 从页面中查找 DOM 元素

cy.get()
示例:
cy.get('.btn')
cy.get('#login')
cy.get('[data-cy=submit]')

找“带文字”的元素

• 找页面中包含指定文本的元素

cy.contains()
示例:
cy.contains('登录')
cy.contains('欢迎')

点击

• 模拟用户点击

cy.click()
示例:
cy.get('.btn').click()

输入内容

cy.type()
示例:
cy.get('input').type('admin')
支持特殊键：
.type('{enter}')
.type('{backspace}')

断言（判断对不对）

cy.should()
示例:
cy.get('.error').should('exist')
常见断言：
| 写法         | 含义    |
| ------------ | ----- |
| `exist`      | 存在    |
| `not.exist`  | 不存在   |
| `be.visible` | 可见    |
| `contain`    | 包含文本  |
| `have.value` | 输入框的值 |
例子：
检查 input 输入框里的值是不是 admin
cy.get('input')   // 找到页面上的 input 元素
.should('have.value',  // 断言：它的 value 属性
'admin'  // 应该等于 admin
)

等待

• 不推荐乱用

cy.wait()
示例:
cy.wait(1000)

拦截接口（非常重要）

cy.intercept()
示例:
监听（拦截）一个接口请求，并给它起个名字
cy.intercept('GET', '/api/login')   // 拦截 GET /api/login 接口
.as('login')    // 起别名叫 login
cy.wait('@login')   // 等别名为 login 的接口返回

读取测试数据

cy.fixture()
示例:
从文件里读取测试数据
fixture: cypress/fixtures/xxxx.json
xxxx.json 内容示例
const user = {
  "name": "admin",
  "password": "123456"
}
cy.fixture('xxxx.json') // 读取这个 json 文件
.then((user) => {   // user 就是文件里的对象
  cy.get('input').type(user.name)
})

组件测试专用

• 只能在 Component Testing 里用

mount(MyComponent)