每天进步一点点，关注我们哦，每天分享测试技术文章

码同学公众号：自动化软件测试

码同学抖音号：小码哥聊软件测试

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

01 开发环境

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安装插件，安装完成后需要重启生效。

免费领取 码同学软件测试 课程笔记+超多学习资料+完整视频+最新面试题，可以转发文章 + 私信「码同学666」获取资料哦

02 例子

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

• fixtures：自定义json文件
• integration：编写测试用例
• plugins：插件
• 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的语句，很方便。如下：

END

免费领取码同学软件测试课程笔记+超多学习资料+学习完整视频，可以关注我们公众号哦：自动化软件测试