Cypress v10安装及使用

2022-06-08大约7分钟

转眼从2020年到了2022年,最初的时候,Cypress用的还是v5,现在已经到了v10版本了。新尝试这个版本,发现更新还是挺多的,功能更强大了:

  • 在E2E测试的支持上,还支持组件测试(Component Testing)
  • 支持Electron, Edge, Chrome和Firefox浏览器

当然,更新的更能远不止上面提到的,新功能和优化的细节都很多,具体不赘述了。

安装

安装有两种方式:

  1. 通过npm或yarn来安装

npm install cypressyarn add cypress

  1. 直接下载

https://download.cypress.io/desktop

这种方式试用于企业内网,但是受网络访问限制,不能直接通过npm安装的方式。

使用

在package.json的scripts节点下添加:"open": "cypress open"

然后运行:npm run open,即可运行Cypress。

Cypress第一次运行启动会初始化一些内容,所以会有些慢,但以后再启动就会快很多。

Cypress运行起来之后,就会看到如下的使用向导界面:

图片

在这一步里,我们选择测试的类型。比如选择“E2E Testing”,然后接受默认的配置文件,就会看到下面的选项。

图片

然后,选择我们用来测试的浏览器。这里列出的浏览器,是我们本地电脑上安装好的浏览器,如果还有安装Chrome,那么Chrome就会显示上去。其中Electron是Cypress默认内置的浏览器。

接下来,我们可以用默认生成的项目初始文件开始测试了。

下面例子,是选择创建一个空白的测试。默认情况下,Cypress会初始化填充以下的代码:

describe('empty spec', () => {
  it('passes', () => {
    cy.visit('https://example.cypress.io')
  })
})

运行之后,我们就看到:

图片

虽然离真正的测试还很远,但起码我们可以跑起第一个测试了