初识Cypress

初识Cypress

简介

• JavaScript End to End Testing Framework
• 一款 All in one 的框架

同款比较

All In One VS Others

原理比较

Selenium

   第一步：测试脚本（可以是各种语言编写）向Selenium Server发送请求，建立连接。

   第二步：Selenium Server通过Launcher启动浏览器，并在浏览器中嵌入Selenium Core的JS代码库，然后再将浏览器的代理设置为Selenium Server的Http proxy。

   第三步：测试脚本向Selenium Server发送Http请求，Selenium Server解析请求，并通过Http proxy调用被嵌入的Selenium Core。

   第四步：Selenium Core接受到请求，通过JS控制浏览器完成响应的操作。

   第五步：如果操作过程中，浏览器端发送了请求，因为浏览器的代理访问地址为Selenium Server的Http proxy地址，那么Selenium Server就会接受到这个浏览器的请求，Selenium Server解析、重组请求后，将请求发送到Web服务器去。

   第六步：Web服务器接受到请求，返回响应结果给Selenium Server。

   第七步：Selenium Server将响应结果发送到浏览器端

webdriver

第一步：测试脚本（客户端）调用浏览器驱动，该浏览器驱动去启动对应的浏览器（在新线程中）。

第二步：启动后，WebDriver将浏览器绑定到特定的端口上（服务器），此浏览器便成了该WebDriver的Remote Server

第三步：测试脚本（客户端）创建一个Session，并通过Http协议向Remote Server（浏览器，可以看做服务器）发送restful请求，Remote Server接受到请求后，解析为该浏览器的内部接口来调用，完成相应的操作并接受response

 第四步：测试脚本（客户端）接受到服务器端的response，决定是继续发送请求还是结束脚本

Cypress

特点	Cypress	Selenium
支持语言	Javascript	Java, C#, Python, Ruby, R, Dart, Objective-C、Javascript等
支持浏览器	Chrome	各种主流浏览器
主要使用者	Tester、developer	Tester
使用的测试框架	Mocha	无限制
是否需要浏览器驱动器	否	需要
测试速度	快	略慢
录制测试视频、快照	支持	支持，但需要自己写
可交互	可以	不支持
社区支持	略显薄弱	强大

特点

• 时间穿梭：Cypress会在测试运行时拍摄快照。只需将鼠标悬停在“ 命令日志”中的命令上，即可准确查看每一步都发生了什么
• 可调试性：停止猜测你的测试失败的原因。直接从熟悉的工具如Chrome DevTools进行调试。我们可读的错误和堆栈跟踪使调试更加快速便捷。
• 实时重载：每当你对测试进行更改时，Cypress都会自动重新加载。查看应用程序中实时执行的命令。
• 自动等待：不要在测试中添加等待或休眠。Cypress在继续下一步之前会自动等待元素至可操作状态时才会执行命令或断言。异步操作不再是噩梦。
• 运行结果一致性：Cypress架构不使用Selenium或Webdriver,在运行速度，可靠性测试，测试结果一致性上均有良好的保障。
• 截图和视频：Cypress在测试运行失败时自动截图，在无头运行时录制整个测试套件的视频，使你轻松掌握测试运行情况。

安装手册

require:

1. Windows 7+
2. NPM
3. Cypress

Step:

1. 生成pakage.json

   1. 创建一个文件夹

   2. 进入该文件夹，执行

      npm init
      

   3. 执行安装命令

      // 配置安装源
      npm install cypress
      

   4. 打开Cypress

      // 进入cypress安装路径
      yarn run cypress open
      

目录结构

• fixtures 测试夹具
• integration测试文件
• plugin file 插件文件
• support file 支持文件

skip and only

钩子函数

• before
• beforeeach
• after
• aftereach

几种定位方法

• Cypress特有定位方法

  1. data-cy
  2. data-test
  3. data-testid

  但需要开发时，添加该属性

  假如存在元素

  <p data-cy='spec'>
  

  In Cypress:

  cy.get('[data-cy=spec]')
  

• 常规定位方法

  1. ID选择器定位

     cy.get('#id_name')
     

  2. class选择器定位

     cy.get('.class_name')
     

  3. 属性选择器定位

     cy.get("button[id='main2']")
     

  4. 省略更多css选择器

  5. Xpath

     npm install cypress xpath
     

断言

BDD

• expect
• should

TDD

• assert

Page Object

export default class LoginPage {
    constructor() {
        this.userNameLocator = 'input[name=username]'
        this.passwordLocator = 'input[name=password]'
        this.formLocator = 'form'
        this.url = ''
    }

    get username() {
        return cy.get(this.userNameLocator)
    }

    get password() {
        return cy.get(this.passwordLocator)
    }

    get form() {
        return cy.get(this.formLocator)
    }

    isTargetPage() {
        cy.visit('/login')
        cy.url().should('eq', this.url)
    }

    login(username, pwd) {
        this.username.type(username)
        this.password.type(pwd)
        this.form.submit()
    }

}

编写接口测试

describe('登录测试套件', ()=>{
    context("登录测试", ()=>{
        it.skip('api登录', ()=>{
            const username = '13281827725'
            const password = 'mzy19971011'
            let token = ''

            cy.request({
                method: 'POST',
                url: 'https://new-app.yuncaitong.cn/api/auth?captcha=undefined',
                body: {"username":"13281827725","password":"mzy19971011"}
            }).then(res=>{
                cy.log(res.body)
                token = res.body
                cy.log(token)
            })

            cy.request({
                method: 'GET',
                url: ''
            })
        })

    })
})