Cypress初探（一）

最近想学习下web ui测试框架，发现了比较好用的cypress，直接用js操作更方便更快。

一、开发环境

Cypress + nodejs (node之前已安装，直接官网下载安装即可)+ intellij idea

1. 安装cypress

cd projectpath                   # 工程目录
npm install cypress --save-dev   # 安装cypress

Cypress安装完成后，可看到提示：You can now open Cypress by running: node_modules/.bin/cypress open，通过如下命令打开Cypress。正常可看到如下窗口，其中有许多cypress自带的例子可以参考。

node_modules/.bin/cypress open

2. 配置

在工程路径下创建package.json文件，配置以chrome浏览器运行用例。

{"scripts": {"cypress:open": "cypress open","cypress:run": "cypress run --browser chrome"},"devDependencies": {}
}

cypress.json文件中添加如下内容，"chromeWebSecurity": false 解决chrome跨域问题；

reporter ：cypress run会自动生成xml文件，使用 allure 生成对应报告。

{"chromeWebSecurity": false,"reporter": "junit","reporterOptions": {"mochaFile": "results/my-test-output[hash].xml","toConsole": true}
}

3. nodejs开发环境

已安装intellij idea，安装插件支持Nodejs开发。在Perferences->Plugins，选择下面的Browse repositories。

Browse repositories...对话框中搜索NodeJS，Install安装插件，安装完成后需要重启生效。

二、第一个例子

1. intellij idea 中打开之前的工程目录，可看到cypress的开发目录：

1) fixtures：自定义json文件

2) integration：编写测试用例

3) plugins：插件

4) support：目前未用到，需要自定义指令的时候可以深入研究

2. 第一个例子

在integration下新建测试目录文件，编写测试用例，下面的例子主要实现：登录，查询

/// <reference types="Cypress" />describe('testcase', function () {before(function () {// runs once before all tests// 登录cy.visit("XXXX");cy.get("#form-img").click();cy.get("#login-username").type("XXXX");cy.get("#login-password").type("XXXX");cy.get(".btn").click();cy.wait(1000);});after(function () {cy.get("img").click();cy.contains("登出").click();   //登出});beforeEach(function () {// runs before each test});it('test', function () {cy.wait(1000);cy.get('.btn-info').click();// 具体case });
});

常用commands:

.get(selector)      # get
.clear()            # 清除input|textarea内容
.click()            # 点击
.contains()         # 包含文本
.dblclick()         # 双击
.scrollIntoView()   # 滚动元素到视图中
.scrollTo(position) # 滚动到特定位置
.visit(url)         # 访问url
.wait(time)         # 等待毫秒
.type()             # 输入文本

3. 运行

Cypress应用程序中，Cypress同步刷新目录，检测到新的改动马上运行。

可通过cypress run --browser chrome执行用例，或者cypress应用程序中，选中要执行的用例运行。

Cypress入门简单，且运行快，同时提供自动生成选取dom的语句，很方便。如下：

参考： https://testerhome.com/articles/19035