Web自动化测试新贵-Cypress初探

欢迎大家来到IT世界,在知识的湖畔探索吧!

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

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

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

最近想学习下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

欢迎大家来到IT世界,在知识的湖畔探索吧!

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

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

欢迎大家来到IT世界,在知识的湖畔探索吧!

cypress.json文件中添加如下内容：

• “chromeWebSecurity“: false 解决chrome跨域问题；
• reporter ：cypress run会自动生成xml文件，使用 allure 生成对应报告。

欢迎大家来到IT世界,在知识的湖畔探索吧!{ "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:

欢迎大家来到IT世界,在知识的湖畔探索吧! .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

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