Cypress UI自动化初识

Cypress的安装及运行

好久没有发文章了，今天先更一章最近学习的Cypress，这是一款最近比较新的UI自动化框架，大型或外企公司用的较多，它主要由js代码编写，所以建议有js代码基础的人了解。

Cypress的安装

首先需要安装nodejs这是必要的一个组件，下载链接我放到下方：
https://nodejs.org/en/
安装完毕后，需要确认是否安装完毕，打开cmd分别输入命令，
npm -v
node -v

显示以上图片内容及代表安装成功

由于原下载源比较慢，我们需要更换下载源 打开cmd 输入命令:
npm config set registry http://registry.npm.taobao.org
下载完毕后，初始化：
npm init -y
接下来，我们需要建立个文件夹安装cypress,打开cmd 进入到新建的文件夹路径输入命令
npm i cypress -save-dev

安装完毕后，文件夹内出现以上内容

编写代码运行

这里我选择的工具是VScode，下载链接：
https://code.visualstudio.com/
打开工具后在File中选择 open Folder,选择刚才新建的文件夹即可

上面就是他的一个整体结构以后会讲到这些内容
今天先让用例运行起来，给大家看下：
在integration文件夹下新建test.js文件，内容如下：

describe('百度测试',function(){   //定义一个测试集
    it('访问百度',function(){      //这是第一个测试用例
        cy.visit('www.baidu.com') //打开百度链接
        cy.get("#kw").type('cypressUI自动化') //定位输入框，并输入 cypressUI自动化
        cy.get('#su').click() //定位搜索按钮 并点击
        cy.get('#kw').should('have.value','cypressUI自动化') //断言搜索框内容 为cypressUI自动化
    })
    it('访问百度',function(){      //这是第二个测试用例
        cy.visit('www.baidu.com') //打开百度链接
        cy.get("#kw").type('cypressUI自动化') //定位输入框，并输入 cypressUI自动化
        cy.get('#su').click() //定位搜索按钮 并点击
        cy.get('#kw').should('have.value','cypressUI自动化') //断言搜索框内容 为cypressUI自动化
    })
})

然后在工具内打开Terminal,输入命令 npx cypress open，会弹开以下页面：

点击我们刚才编写的test.js文件，会自动运行我们自动化脚本：

注：cypress是不需要我们安装webdriver的
这就完成我们一个简单的测试用例了。
下一期，我们讲一下常用的一些方法，支持原创哦