强大的UI自动化测试框架：Cypress + Jenkins

Cypress官网

1. 安装NodeJS
下载地址，安装完后通过node -v指令验证是否安装成功。

2. 创建package.json
  我们可以使用命令npm init在项目的根目录下来初始化一个package.json文件，运行这个命令后，它会询问一些关于包的基本信息，根据实际情况回答即可。
  如果不喜欢这种方式，可以使用npm init --yes （或npm init --y）命令直接使用默认的配置来创建package.json文件，最后根据需要修改创建好的package.json文件即可。

创建package.json

3. cypress安装
cd /your/project/path
npm install cypress --save-dev

安装cypress

确保你已经运行了npm init，或者存在node_modules文件夹，或者在你项目的根目录存在package.json文件, 以此来确保cypress被安装到正确的路径下。

4. cypress启动
./node_modules/.bin/cypress open

问题——启动失败：

启动失败

解决办法：
https://github.com/cypress-io/cypress/issues/1125

就是删除下图中的cypress文件，然后点击启动失败图中的“Try Again”：

删除cypress文件

启动成功：

image.png

5. 创建用例

• IDE 选择微软的VSCode(安装教程)。

• File>Open Folder， 选择项目目录中cypress文件夹，如E:\CypressTest\node_modules.bin\cypress

• 创建第一个用例，右击integration目录>New Folder， 起名为MyTests，再在MyTests下面新建一个mallcoo_C.js的文件，切换到Cypress，你是否发现Cypress自动给你刷新了目录，你新建的mallcoo_C.js测试集文件，它已经帮你监测到了！只不过它现在还没有任何内容。

Cypress提供了很多示例程序（examples），建议不要删除它们，方便参考。

• 现在我们开始写第一个自动化示例程序：

/// 
describe('XX模块UI自动化测试', function () {
    beforeEach(() => {
        cy.viewport('iphone-6')  // Set viewport to 375px x 667px 需要手机模式访问时
        // 浏览器模式访问时，可按照自己的需要设置窗口大小，如 cy.viewport(1920,1100)
        //访问10057商场C端首页
        cy.visit('https://m-t.mallcoo.cn/a/home/10057')
    })
    it.only('登录', function(){
        //点击首页会员按钮
        cy.get('#div_index > div.fixed_b_menu.dis_flex > a:nth-child(2)').click()
        //点击立即登录按钮
        cy.get('#gotoLogin').click()
        //输入手机号和密码
        cy.get('#mobile_p').type('xxxxxxxxxxx')
        cy.get('#pwd').type('xxxxxx')
        //点击登录按钮
        cy.get('#btnLoginPwd').click()
    })

    it('个人中心', function () {
        //使用会员卡
        cy.get('#use_card').click()
    })

    it.skip('活动中心', function () {
        //使用会员卡
        cy.contains('活动列表').click()
    })
})

代码解释：
1 . reference表示告诉VSCode要去Cypress package里找相关的语义解析，这样一来Cypress相关的语法和函数等就可以尽情地使用了；
2 . describe声明了一个测试用例集；
3 . beforeEach相当于单元测试的setup，即在每个测试用例运行前需要做的事；
4 . viewport控制应用程序屏幕的大小和方向，详见这里
5 . it声明了一个测试用例；
6 . cy.get接受一个js selector， 就是元素定位字符串，当然Cypress也支持xpath定位，详见这里；

7. it.only只测试这个, it.skip 不要测这个

更方便起见，我们可以使用request方法登录：
修改 D:\testProject\CypressProject\node_modules.bin\cypress\support路径下的 commands.js 添加如下代码:

            Cypress.Commands.add('login', (userType, options = {}) => {
                const accountTypes = {
                    admin:{
                        "username":"xxx",
                        "password":"xxx",
                    }
                }
                cy.request({
                    url:'your URL address',
                    method:'POST',
                    body:accountTypes[userType]
                })
            })
        

用例中在需要登录的地方调用即可：

cy.login('admin')

6. 运行用例
  保存代码，在Cypress应用程序里找到mallcoo_C.js，点击它，你会发现它跑起来了，而且如果再次对用例修改并保存，Cypress会自动检测到新的改动，并马上运行！当然，你也可以去掉这个自动重载机制...
  Cypress会自动检测可用的浏览器，以防万一，建议把Chrome设置为默认浏览器，当然也可以在运行Cypress时手动指定cypress run --browser chrome。

7. 与Jenkins集成

构建结果：