前端 E2E 测试-Cypress

概述

使用

# 开发期间
cypress open

# 自动执行或在CI中执行
cypress run

测试四步骤

Cypress测试四步骤：

1. 打开一个网页：

cy.visit('https://example.cypress.io')

1. 找到目标元素

cy.get('#element-id')

1. 跟目标元素交互

cy.get('#element-id').click()

1. 执行assert

Cypress采用 should 语法进行断言。另外，默认采用Chai的断言。毫末采用了jest-adapter替代Chai，采用jest断言。

cy.get('.default-component').find('[role=tablist]').should('have.length', 7);
// 或者
cy.get('.default-component').find('[role=tablist]').its('length').then(length => { 
  expect(length).toBe(7);
});
// 或者

最佳实践

采用屏幕录制的办法生成代码 Cypress Recorder

常用用法

使用 jQuery 类似语法打印元素：

// 使用cy.$$，等同于jQuery的$
cy.$$('#element-id')

cy.get('#element-id').then($ele => {
  // 这里的$ele为元素的jQuery对象
  console.log($ele);
})

参考

• Cypress常用命令
• Chai js断言库API中文文档