终于找到了最适合测试员的UI自动化测试神器,连开发都在用!


沐沐已经很久没有写文章了,原因有三个:要么“懒”,要么“忙”,要么“懒”。但是接触到Cypress后,真的非常想给大家安利这个UI自动化测试神器了。以前也接触了一些测试框架,但是UI自动化测试的投入产出比始终较低。我一直在思考UI自动化有用吗?直到遇到Cypress后我明白了,有人用就有用,没人用就没用,UI自动化脚本往往投入的时间成本比较高,如果使用者仅仅是测试人员,那么产生的效益就会很低,如果使用者是整个产品部门,那么价值就会显现出来。而传统的自动化框架,安装较为繁琐,即使我们写好脚本,研发同学也不愿意去安装使用。而Cypress是基于node.js环境的,安装则极为便利,如果我们测试人员维护好了自动化脚本,就可以直接将js脚本分享给研发人员,辅助研发人员进行自测。如果能将UI自动化普及到整个部门都去使用,辅助提升产品研发效率,那UI自动化就是非常有价值的事情。


第一章、框架介绍


1.1、Cypress简介

官网地址:https://docs.cypress.io

官网的首页有一句标语“The web has evolved.Finally, testing has too.”

意思是Web已经进化了,最终,测试也是。而对于Cypress的介绍则是“Fast, easy and reliable testing for anything that runs in a browser.”翻译为“对浏览器中运行的任何内容进行快速、简单和可靠的测试”。Cypress是一种E2E测试框架,即end to end测试。同类型的框架还有Testcafe等。但是E2E测试似乎是比较冷门的模块,而Cypress使得E2E测试更加简单。Cypress框架安装成功后,example文件中还有很多的demo,有助于我们更快的了解和学习该框架。Cypress也可以说是web UI自动化的完美解决方案,下文中将简单描述Cypress的优势。

1.2、Cypress优势

(1)安装简单

毫不夸张的说,在网络正常的情况下,10分钟就可以安装好Cypress框架,一天则可以入门,写一些简单的用例。

(2)运行速度快

相较于Selenium来说,Cypress的运行速度真的是相当快了,它不需要web driver来驱动浏览器。

(3)脚本实时调试

在脚本编写过程中,只要编辑器中进行保存,脚本就会自动运行,可以快速高效的知道脚本是否正确。

(4)兼容性测试

目前Cypress已经支持Chrome和Firefox两款主流浏览器,在GUI界面可以非常便捷的切换浏览器进行兼容性测试。

(5)失败用例自动保存截图

脚本运行失败后,会在..\cypress\screenshots文件夹下面自动保存失败用例的截图,方便我们追踪到失败用例的原因。

(6)运行过程自动录制视频

脚本运行完成后,会在..\cypress\videos文件夹下自动保存脚本运行过程录制的视频。

(7)人人可用

沐沐觉得这个框架最大的好处就是“人人可用”,Cypress不但可以帮助测试人员进行版本回归测试,浏览器兼容性等测试,还可以辅助研发人员进行自测,甚至可以辅助去造一些测试数据,只要是web端手工不断重复的工作,都可以用Cypress辅助完成。



第二章、环境搭建


备注:以下安装步骤是基于Windows10。

2.1、安装node.js

1、官网下载地址:

https://nodejs.org/en/download/;

2、傻瓜式安装,安装后查看是否安装成功:node –v;

3、最新版的node在安装时同时也安装了npm,查看npm版本:npm -v;



4、具体安装步骤参考菜鸟教程:

https://www.runoob.com/nodejs/nodejs-install-setup.html

2.2、安装Cypress

1、cmd进入命令行模式,进入D盘创建一个文件夹:mkdir Crypress_project;

3、进入新创建的文件夹下面:cd Crypress_project;

4、初始化项目:npm init -y;

5、安装cypress:npm i cypress -S -D;安装成功截图如下:



6、打开package.json文件,将里面的内容全部删除,复制上去以下代码:

{

      "scripts": {

      "cypress": "cypress open"

     }

 }

2.3、运行Cypress

1、运行命令:npm run cypress;

2、Cypress窗口正常打开不报错,即环境安装成功。

3、examples中是Cypress提供的demo,点击即可运行,如下图:




第三章、实际案例


由于沐沐工作中的项目不方便作为案例,所以将以登录禅道记录缺陷作为demo,这样案例更具有参考性。

1、脚本代码如下:

describe("禅道录入缺陷", function(){

    //登录模块

    beforeEach("登录系统",function () {

        cy.visit('url')

        //输入用户名

        cy.get('#account')

            .type("账号")

            .should('have.value', '账号');

        //输入密码

        cy.get('[name="password"]')

            .type("密码")

            .should('have.value', '密码');

        //点击登录按钮

        cy.get('#submit')

           .click();

    });

    it("提交bug", function(){

        //点击测试

        cy.get('[href="/zentao/qa/"]')

            .click();

        //点击bug

        cy.get('[data-id="bug"] > a')

            .click();

       //点击【提bug】按钮

        cy.get('#createActionMenu > a.btn')

            .click();

        //点击影响版本

        cy.get('#openedBuild_chosen > .chosen-choices')

            .click();


        //选择主干

        cy.get('.active-result')

            .contains('主干')

            .click();

        //输入bug标题

        cy.get('#title')

            .type("bug标题")

            .should('have.value', 'bug标题');

        //点击【保存】

        cy.get('#submit')

            .click();

        //断言是否新增成功

        cy.get('.datatable-wrapper > .table > tbody > .text-center > .text-left > a')

            .contains('a', 'bug标题')

            .should('be.visible');

    });

});

2、脚本存放位置:在..\cypress\integration文件夹下面可以自定义文件存在脚本。如下图:



3、选中用例单击即可运行,如下图:



4、运行成功截图如下:




第四章、定位方式


Cypress支持id、name、class、css、text、xpath等多种定位方式,但是需要注意的是xpath定位需要额外安装cypress-xpath库。

4.1、xpath定位

1、官网地址:https://github.com/cypress-io/cypress-xpath

2、安装命令:npm install -D cypress-xpath

3、在cypress/support/index.js文件中增加:require('cypress-xpath')



4、定位举例,如下代码:



(1)xpath定位举例:

cy.xpath('//span[contains(text(),"新增主项")]') .click();

(2)class属性定位举例:

cy.get('.el-icon-plus').click();

4.2、Demo定位说明

元素定位的方式有很多种,我将以我的demo进行说明,demo中的定位方式不一定是最佳的但是都是正确有效的,在此详细说明,只是方便像我一样的测试小白进行参考。

(1)通过标签名进行定位

代码如下截图:



定位方式如下:

//点击测试

cy.get('[href="/zentao/qa/"]')

    .click();

(2)通过父级的date-*属性进行定位

代码如下截图:



定位方式如下:

//点击bug

cy.get('[data-id="bug"] > a')

       .click();

(3)通过i标签的class属性进行定位

代码如下截图:



定位方式如下:

//点击【提bug】按钮

cy.get('.icon-plus')

      .click();

(4)通过父级的id+子级的class属性进行定位

代码如下截图:



定位方式如下:

//点击影响版本

cy.get('#openedBuild_chosen > .chosen-choices')

    .click();

(5)通过class属性+文本进行定位

代码如下截图:



定位方式如下:

//选择主干

   cy.get('.active-result')

    .contains('主干')

    .click();

(6)过id进行定位

代码如下截图:



定位方式如下:

//输入bug标题

cy.get('#title')

    .type("bug标题")

    .should('have.value', 'bug标题');

(7)通过相对定位的并且断言是否新增成功(不推荐使用相对定位的方式)

代码如下截图:



定位+断言方式如下:

//断言是否新增成功

cy.get('.datatable-wrapper > .table > tbody > .text-center > .text-left > a')

    .contains('a', 'bug标题')

    .should('be.visible');



……


立即扫描二维码阅读全文



推荐阅读

点击阅读☞用于全栈自动化测试的最佳Python工具!

点击阅读☞自动化测试不仅仅是会使用工具,更重要的是?

点击阅读☞API测试全接触:策略、类型、步骤和自动化测试工具

点击阅读☞借助API实现黑盒自动化测试工具的编写

点击阅读☞自动化测试工具QTP的使用实例

“阅读原文”一起来充电吧!