本文转自测试人社区，原文链接：https://ceshiren.com/t/topic/31839

一、cypress简介

  • 基于JavaScript的前端测试工具；
  • 可以对浏览器中运行的任何内容进行快速、简单、可靠的测试；
  • 对每一步操作都支持回看；
  • 覆盖了测试金字塔模型的所有测试类型（界面测试、集成测试、单元测试）；
  • 底层协议不采用WebDriver。

二、cypress与selenium对比

项目

cypress

selenium

支持语言

JavaScript

Java，Python，Ruby，JavaScript，C#等

支持浏览器

Chrome，Electron

各种主流浏览器

主要使用者

前端开发人员

QA

使用的测试框架

Mocha

无限制

是否需要浏览器驱动器

否

是

测试速度

快

略慢

录制测试视频、快照

支持

支持，但需要写代码

社区支持

略显薄弱

强大

三、cypress环境部署

  • 安装node.js
  • 安装cypress：
  • 初始化项目：npm init
  • 配置淘宝镜像：npm config set registry http://registry.npm.taobao.org
  • 安装cypress：npm install cypress -save-dev
  • 打开cypress：
  • npx cypress open

四、cypress框架基本用法

  • describe声明一个测试用例集合；
  • beforeEach测试用例前置操作，相当于setup；
  • it声明一个测试用例；
  • cy.get定位元素，用css定位；
  • type输入文本；
  • click点击操作；
  • should断言。
describe('搜索功能', ()=>{
    beforeEach(()=>{
        // 打开网页
        cy.visit("https://ceshiren.com/")
    })

    it('输入搜索内容，正确返回搜索结果', () => {
        // 点击输入框
        cy.get('#search-button').click()
        // 输入测试开发
        cy.get('#search-term').type('测试开发')
        // 点击enter键
        cy.get('#search-term').type('{enter}')
        // 断言结果
        cy.get('#ember21').should('contain', '测试');
    })
})