初始化项目

准备好 Docker 镜像

比如：

FROM cypress/browsers:node16.14.0-slim-chrome99-ff97

浏览器镜像参考： cypress-docker-images/browsers at master · cypress-io/cypress-docker-images

安装依赖

yarn add --dev cypress eslint eslint-plugin-cypress

ESLint 配置

参考： GitHub - cypress-io/eslint-plugin-cypress: An ESLint plugin for projects that use Cypress

IDE 集成

参考： IDE Integration | Cypress Documentation

配置

安装好依赖后执行

npx cypress open

运行会初始化配置。

手动配置

参考： Configuration | Cypress Documentation

Gitlab 集成

示例项目： cypress-io / cypress-example-docker-gitlab

测试用例

配置环境变量

静态变量

修改 cypress.json：

{"baseUrl": "http://localhost:4100","env": {"apiUrl": "http://localhost:3000","user": {"email": "tester@test.com","password": "password1234","username": "testuser"},"codeCoverage": {"url": "http://localhost:3000/__coverage__"}},"viewportHeight": 1000,"viewportWidth": 1000,"video": true,"projectId": "bh5j1d","nodeVersion": "system"}

动态变量

可以在 plugins/index.js 中注入，如：

// 也可以在这里注入 dotenvmodule.exports = (on, config) => {// `on` is used to hook into various events Cypress emits// `config` is the resolved Cypress config/* eslint-disable no-param-reassign */config.env.authing_username = process.env.AUTHING_USERNAME;config.env.authing_password = process.env.AUTHING_PASSWORD;config.env.authing_userpool_id = process.env.AUTHING_USERPOOL;return config;};

注意一下，需要用根用户池登录，且最好关闭 MFA （没有接口支持）。产品环境用户池 ID 为 59f86b4832eb28071bdd9214。

使用变量

// Cpress 是测试脚本中全局注入的const apiUrl = Cypress.env('apiUrl')

添加 Commands

如获取登录 token。登录方式自行封装，这里以邮箱登录为例：

// ***********************************************// This example commands.js shows you how to// create various custom commands and overwrite// existing commands.//// For more comprehensive examples of custom// commands please read more here:// https://on.cypress.io/custom-commands// ***********************************************////// -- This is a parent command --// Cypress.Commands.add('login', (email, password) => { ... })////// -- This is a child command --// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })////// -- This is a dual command --// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })////// -- This will overwrite an existing command --// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })import JSEncrypt from 'jsencrypt';function encrypt(text, key) {const jsencrypt = new JSEncrypt();jsencrypt.setPublicKey(key); // 设置公钥const encrypted = jsencrypt.encrypt(text);return encrypted;}Cypress.Commands.add('login',(userPoolId = Cypress.env('authing_userpool_id'),email = Cypress.env('authing_username'),password = Cypress.env('authing_password')) => {cy.loginByEmail(userPoolId, email, password).then((token) => {localStorage.setItem('token', token);cy.getCookie('authing_session').should('exist').then((c) => {cy.setCookie('authing_session', c.value);});});});Cypress.Commands.add('loginByEmail',(userPoolId = Cypress.env('authing_userpool_id'),email = Cypress.env('authing_username'),password = Cypress.env('authing_password')) =>cy.getPublicKey().then((publicKey) =>cy.request({method: 'POST',url: '/api/v2/login/login-by-email',headers: {'x-authing-userpool-id': userPoolId},body: {input: {email,password: encrypt(password, publicKey)}}}).its('body.data.token').should('exist')));Cypress.Commands.add('getPublicKey', () =>cy.request({method: 'GET',url: 'https://core.authing.cn/api/v2/.well-known'}).its('body.data.publicKey').should('exist')
);

参考文档：

Custom Commands | Cypress Documentation
request | Cypress Documentation

添加测试用例

// enables intelligent code completion for Cypress commands// https://on.cypress.io/intelligent-code-completion/// <reference types="Cypress" />context('Console Sample', () => {beforeEach(() => {// https://on.cypress.io/visitcy.login();});it('With Login', () => {cy.visit('/console/61e4da8864ed00680e252e99/application/self-built-apps');cy.get('.app').contains('创建自建应用');});// more examples//// https://github.com/cypress-io/cypress-example-todomvc// https://github.com/cypress-io/cypress-example-kitchensink// https://on.cypress.io/writing-your-first-test});

其他

最佳实践指南： Best Practices | Cypress Documentation
API 文档： Table of Contents | Cypress Documentation

Cypress 前端 E2E 测试——手把手入门教程相关推荐

前端E2E测试略详解（以cypress为例）
上一篇文章很简略的介绍了E2E测试的一些框架,本文从相对更详细的层面进行整理 E2E测试 (by cypress): cypress安装 npm install cypress --save-dev ...
【前端实例代码】Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果~前端开发网页设计基础入门教程~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建新拟态新拟物风格(Neumorphism)音乐播放器+注册登录页表单图标网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码 ...
【前端实例代码】Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果！前端开发网页设计基础入门教程！超简单~
b站视频演示效果: [前端实例代码]Html5+css3+JavaScript创建在线播放架子鼓电子鼓演奏网页效果!前端开发网页设计基础入门教程!超简单~ 效果图: 完整代码: <!DOCTYP ...
【前端实例代码】Html5+css3创建拟物风格昏昏欲睡的云朵动画网页效果~前端开发网页设计基础入门教程~适合初学者~超简单~
b站视频演示效果: [前端实例代码]Html5+css3创建拟物风格昏昏欲睡的云朵动画网页效果!前端开发网页设计基础入门教程!适合初学者~超简单~ 效果图: 完整代码: <!DOCTYPE ht ...
要web开发精品教程吗？免费一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放
要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放大师主讲经验难得由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...
ETH智能合约开发手把手入门教程｜猿创征文
文章目录安装钱包安装 Metamask.并创建好账号执行第一次转账测试币获取第一次转账第一个智能合约使用 Remix 创建第一个合约使用 Remix 测试第一个合约使用 Remix ...
前端E2E测试-环境搭建-Vue+Cypress(1)
项目背景脚手架: Vue CLI 3.0 Vue 版本: 2.5.16 环境搭建安装cypress依赖 npm install cypress --save-dev // 安装包下载比较慢,并常出 ...
前端框架React Js入门教程【转】
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
微信小程序手把手入门教程
从零到有写一个小程序系列专题,很早以前就想写来分享,但由于项目一直在进展,没有过多的时间研究技术,现在可以继续分享了. 1:注册用没有注册过微信公众平台的邮箱注册一个微信公众号, 申请帐号 ,网址: ...

Cypress 前端 E2E 测试——手把手入门教程

目录