Cypress入门

Cypress 简介

• 基于 JavaScript 的前端测试工具，可以对浏览器中运行的任何内容进行快速、简单、可靠的测试

• Cypress 是自集成的，提供了一套完整的端到端测试，无须借助其他外部工具，安装后即可快速地创建、编写、运行测试用例，且对每一步操作都支持回看

• 不同于其他只能测试 UI 层的前端测试工具，Cypress 允许编写所有类型的测试，覆盖了测试金字塔模型的所有测试类型【界面测试，集成测试，单元测试】

• Cypress 底层协议不采用 WebDriver

 

1.安装Cypress

• 需要node在 12 或 14 及以上，检查node版本，node -v

• 使用npm 安装：npm install cypress --save-dev

 

2.启动Cypress

• 通过npx运行：npx cypress open

• 通过yarn运行：yarn run cypress open

• 启动后，会弹出如图窗口

  

   

   

  integration存放的是cypress提供的一些列子，双击对应的js文件，可以运行

   

  3.下载Cypress编辑器visual

  下载并安装visual：https://code.visualstudio.com/Download

   

  4.编辑一个简单的js脚本

  •  三种专用的定位器data-cy ，data-test ，data-testid需要前端增加对应的标签，较难推广
  • 通过id选择器，class选择器，attribute属性选择器，:nth-child(n)选择器，Cypree.$定位器

    //用id定位
    cy.get("#id的值")
    //用class定位
    cy.get(".class的值")
    //用attributes属性定位
    cy.get("button[id='main']")
    //查找父元素的第几个子元素
    cy.get(":nth-child(1)")
    cy.get(":nth-child(3)>.nav-menu-item-content")
    ​
    Cypress的定位器优先级顺序
    date-cy >date-test >date-testid >id >calss >tag >attributes >nth-child

     

  •  Cypress关键字说明

    descrribe 声明一个测试用例集
    beforeEach 测试用例前置操作，相当于setup
    it声明一个测试用例
    cy.get定位元素，可以用css selector定位选择器
    type输入文本
    should 断言，hace.value是元素的value属性值，clear清空输入值
    cy.screenshot()进行截图
    cy.reload() 刷新页面
    cy.reload(true) 强制刷新页面
    cy.visit()访问网址
    cy.url()获取当前页面的URL
    cy.title()获取当前页面的title
    cy.viewport('iphone-6')设置屏幕访问大小
    it.only()只测试这个case
    it.skip()不测试这个case
    

     

  •  编写一个百度搜索的实列

    describe('百度测试',function(){
        this.beforeEach(()=>{
            cy.visit('https://www.baidu.com/') 
        })
        it('百度搜索测试',function(){
            //定位到输入框，输入robot，进行断言
            cy.get('#kw').type('robot').should('have.value','robot')
            //清空输入框，并进行断言
            .clear().should('have.value','')
        })
    })

     

  • 需要登录权限时，修改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')

     

  • 与Jenkins结合运行
  •