Cypress安装与使用教程（2）—— 软测大玩家

news2024/12/28 5:44:09

在这里插入图片描述

 
 

在这里插入图片描述
😏作者简介：博主是一位测试管理者，同时也是一名对外企业兼职讲师。
📡主页地址：【Austin_zhai】
🙆目的与景愿：旨在于能帮助更多的测试行业人员提升软硬技能，分享行业相关最新信息。
💎声明：博主日常工作较为繁忙，文章会不定期更新，各类行业或职场问题欢迎大家私信，有空必回。

在这里插入图片描述

 
 

阅读目录

  • 1. 接上回
  • 2. 钩子函数
    • 2.1 before() 与 beforeEach()
    • 2.2 after() 与 afterEach()
  • 3. 元素定位
    • 3.1 contains
    • 3.2 get
  • 4. 遍历元素
    • 4.1 遍历列表中的元素
    • 4.2 遍历一组元素并执行操作
    • 4.3 过滤元素并遍历
    • 4.4 在特定的父元素中进行遍历
    • 4.5 逐级遍历
  • 5. 后话

1. 接上回

在这里插入图片描述
  在上一篇 《Cypress安装与使用教程（1）—— 软测大玩家》，我们熟悉了Cypress的一些基本安装与使用的方法。对于一些E2E的测试场景，该软件的业务落地表现还是比较让人满意的。接下来我们将在之前的基础上来认识一些日常高频的Cypress使用技巧。

 
 

2. 钩子函数

在这里插入图片描述
  在Cypress中，钩子函数（Hooks）的作用是可以让我们在不同的测试生命周期阶段执行特定的代码，以便进行全局的设置、准备工作或清理工作。如果要确保测试用例在不同阶段的执行过程中能保证其目的正确性、可维护性和可靠性的话，钩子函数则是我们的不二之选。

 

2.1 before() 与 beforeEach()

  使用before()和beforeEach()钩子函数可以在测试运行之前执行一些全局的设置和准备工作。包括创建测试数据、启动应用程序、设置测试环境等。

before()

before(() => {
  // 在所有测试运行之前执行的代码
});

beforeEach()

beforeEach(() => {
  // 在每个测试运行之前执行的代码
});

 

2.2 after() 与 afterEach()

  使用这两个函数可以在测试运行之后执行一些全局的清理工作。比如测试完成后进行清理测试数据、关闭应用程序、还原测试环境。

after()

after(() => {
  // 在所有测试运行之后执行的代码
});

afterEach()

afterEach(() => {
  // 在每个测试运行之后执行的代码
});

 

  另外，我们在使用钩子函数时可以允许你在测试生命周期中共享状态。只需要在before()中设置一些全局变量，然后在各个测试用例中使用。这样我们就可以达到即使在不同的测试之间传递信息，确保测试的一致性；

 

接下来我们来看一段代码，其中包含了相关的钩子函数的使用方法。

before(() => {
  // 登录操作，确保测试前用户已登录
  cy.visit('https://www.rubies-fund.com/login');
  cy.login('your_username', 'your_password');
});

// 在每个测试运行之前执行的代码，例如导航到基金购买页面
beforeEach(() => {
  // 导航到基金购买页面
  cy.visit('https://example.com/invest/funds');
});

// 在每个测试运行之后执行的代码，例如清理购买时的状态
afterEach(() => {
  // 清理购买操作的状态，确保下一次测试开始前的干净状态
  cy.clearFundPurchaseState();
});

// 在所有测试运行之后执行的代码，例如退出登录
after(() => {
  // 退出登录，确保测试结束后用户已退出
  cy.logout();
});

// 实际的测试用例
describe('Fund Purchase Demo', () => {
  it('should allow the user to purchase a fund', () => {
    // 这里编写测试购买基金的代码
    cy.purchaseFund('FundABC', 1000); // 示例购买基金 'FundABC'，金额为 1000
    cy.verifyPurchaseSuccess(); // 验证购买是否成功
  });

  it('should display correct fund details after purchase', () => {
    // 这里编写测试购买后基金详情是否正确显示的代码
    cy.purchaseFund('FundXYZ', 500); // 示例购买基金 'FundXYZ'，金额为 500
    cy.navigateToFundDetails('FundXYZ'); // 导航到购买后的基金详情页面
    cy.verifyFundDetails('FundXYZ', 500); // 验证基金详情是否正确显示
  });
});

从以上的代码我们可以看到比较明显的业务流程，其中的每个测试用例都包含了一些关于基金购买的操作，比如购买基金和验证购买结果。通过使用钩子函数，可以确保测试在执行前后的状态的一致。

 
 

3. 元素定位

在这里插入图片描述
  既然涉及到web的E2E测试，那元素定位依然是一个无法回避的问题，它是告诉测试脚本在页面上找到并与之交互的特定元素的方法。这就像在页面中找到你想要点击、输入或验证的那个按钮或文本框一样。定位元素的方式虽然没有selenium与appium那样多样化，但也已经足够我们使用了。

 

3.1 contains

  这个关键字相信大家都不会陌生，我们可以通过contains来进行页面元素的模糊匹配，使用方法如下。

比如在页面上我们需要定位一个名叫"支付"的按钮，可以直接使用contains+关键字的方式来进行定位。

cy.contains('支付');

 

3.2 get

  利用元素的一些特定属性（class，id，css_selector）等来进行定位。

例如按钮的类名为fg-button，id名为trade-ned，我们就可以使用以下的方式来进行准确的定位。

cy.get('.fg-button');
cy.get('#trade-ned');

除此之外，我们还可以进行属性的自定义组合或索引，来更加快速高效的找到元素。

cy.get('[data-testid="dep-button"]');

找列表中的第三个元素

cy.get('ul li:eq(2)');

根据父子关系

cy.get('.parent-class').find('.child-class');

 

  接下来我们用一段html代码来具体演示一下各类元素定位的方式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Element Locators Demo</title>
</head>
<body>
  <h1>Welcome to the Element Locators Demo</h1>

  <div id="container">
    <button class="my-button" data-testid="submitBtn">Submit</button>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>

  <form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username">

    <label for="password">Password:</label>
    <input type="password" id="password" name="password">

    <button class="my-button" id="loginBtn">Login</button>
  </form>

  <footer>
    <p>Contact us at: <a href="mailto:info@example.com">info@example.com</a></p>
  </footer>
</body>
</html>

// 通过文本的方式进行定位
it('should locate button by text content', () => {
  cy.contains('Submit').click();
});

// 通过id名的方式来进行定位
it('should locate login button by ID', () => {
  cy.get('#loginBtn').click();
});

// 通过类名的方式进行定位
it('should locate button by class name', () => {
  cy.get('.my-button').click();
});

// 通过自定义属性的方式进行定位
it('should locate button by data-testid attribute', () => {
  cy.get('[data-testid="submitBtn"]').click();
});

// 通过索引定位的方式进行定位
it('should locate list item by index', () => {
  cy.get('ul li:eq(1)').should('contain', 'Item 2');
});

// 通过父子关系的方式来进行定位
it('should locate input field by parent-child relationship', () => {
  cy.get('form').find('#username').type('myUsername');
});

 
 

4. 遍历元素

在这里插入图片描述
  在E2E测试中，我们有时需要在页面中对于元素进行循环操作或查找，那么元素遍历就像是你在超市里逛逛，检查每个过道的商品一样，以达到在页面上循环查找和交互多个元素的效果。

 

4.1 遍历列表中的元素

使用 .each() 来遍历列表中的元素

cy.get('ul li').each(($item, index) => {
  cy.log(`Item ${index + 1}: ${$item.text()}`);
});

 

4.2 遍历一组元素并执行操作

同样是使用.each() 来遍历一组元素并进行特定的操作

// 点击每一个元素的商品
cy.get('.product').each(($product) => {
  cy.wrap($product).click(); 
});

 

4.3 过滤元素并遍历

我们使用.filter() 来进行元素的过滤并进行遍历

cy.get('.product').filter('.vegetables').each(($vegetable) => {
  cy.log(`Found a vegetable: ${$vegetable.text()}`);
});

 

4.4 在特定的父元素中进行遍历

使用.find() 在指定的父元素中进行遍历与查找

cy.get('.room').find('.person').each(($person) => {
  cy.log(`Found a person: ${$person.text()}`);
});

 

4.5 逐级遍历

使用.each() 进行逐级遍历，当然这里是需要用到嵌套才能达到这样的效果

cy.get('.building').each(($floor) => {
  cy.wrap($floor).find('.room').each(($room) => {
    cy.log(`Found a room: ${$room.text()}`);
  });
});

 
 

5. 后话

  以上就是一些Cypress的高频使用技巧，另外我们在使用的时候也需要注意一些特定的情况，比如使用钩子函数时可能会出现异步操作，特别是一些比较耗时的网络访问业务操作，可以在我们的脚本中有针对性的等待前置操作完成再执行所需要的操作等步骤。在我们的元素遍历中，如果能提前做好一些异常的处理的话，可以让我们的元素操作更为的健壮，其实无论是何种自动化脚本来说，这些都是必须考虑进去的重要因素。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1304935.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

pip list 报错 ImportError: cannot import name ‘main‘ from ‘pip._int

pip list 报错 ImportError: cannot import name ‘main‘ from ‘pip._int

文章目录 报错信息问题原因解决方案 关注公众号&#xff1a;『AI学习星球』 算法学习、4对1辅导、论文辅导或核心期刊可以通过公众号或CSDN滴滴我 报错信息 最近在操作服务器的时候&#xff0c;发现pip list这个命令不好使了&#xff0c;报错如下 外链图片转存失败,源站可能…
阅读更多...
[Linux] yum安装分布式LNMP架构

[Linux] yum安装分布式LNMP架构

1. 在一台主机安装nginx&#xff08;192.168.136.120&#xff09; 1.1 搭建nginx相关的yum源 cd /yum.repos.d mkdir bak mv *.repo bak vim /etc/yum.repos.d/nginx.repo [nginx-stable] namenginx stable repo baseurlhttp://nginx.org/packages/centos/7/$basearch/ gpgche…
阅读更多...
Self-Distillation from the Last Mini-Batch for Consistency Regularization中文版

Self-Distillation from the Last Mini-Batch for Consistency Regularization中文版

Self-Distillation from the Last Mini-Batch for Consistency Regularization 从上一个小批量自发蒸馏&#xff0c;实现一致性正则化 摘要 知识蒸馏&#xff08;Knowledge distillation&#xff0c;KD&#xff09;展示了强大的潜力&#xff0c;作为一种强有力的正则化策略&a…
阅读更多...
CETN01 - How to Use Cloud Classroom

CETN01 - How to Use Cloud Classroom

文章目录 I. Introduction to Cloud ClassroomII. How to Use Cloud Classroom1. Publish Resources2. Conduct Activities3. Class Teaching Reports4. View Experience Values5. Performance in Cloud Classroom I. 云课堂介绍II. 如何使用云课堂1. 发布资源2. 进行活动3. 班…
阅读更多...
C++STL之List的实现

C++STL之List的实现

首先我们要实现List的STL,我们首先要学会双向带头链表的数据结构。那么第一步肯定是要构建我们的节点的数据结构。 首先要有数据域&#xff0c;前后指针域即可。 再通过模板类进行模板化。 然后再写List的构造函数&#xff0c;这个地方用T&,通过引用就可以减少一次形参拷…
阅读更多...
Android 蓝牙BluetoothAdapter 相关(一)

Android 蓝牙BluetoothAdapter 相关(一)

Android 蓝牙相关 本文主要讲述android 蓝牙的简单使用. 1: 是否支持蓝牙 /*** 是否支持蓝牙** return*/ private boolean isSupportBluetooth() {BluetoothAdapter bluetoothAdapter BluetoothAdapter.getDefaultAdapter();return bluetoothAdapter ! null; }2: 开启蓝牙 …
阅读更多...
强大的音频编辑器 Metadatics直装 for mac

强大的音频编辑器 Metadatics直装 for mac

Metadatics是一款Mac上的音频元数据编辑器&#xff0c;功能强大且高级。它支持批量编辑最常见的音频文件类型&#xff0c;包括MP3、M4A、AIFF、WAV、FLAC、APE、OGG、WMA等。它可以从在线资源中查找元数据&#xff0c;根据元数据重命名文件&#xff0c;或使用众多内置函数之一来…
阅读更多...
Mysql、Oracle安全项检查表及操作脚本

Mysql、Oracle安全项检查表及操作脚本

软件开发全资料获取&#xff1a;点我获取 Mysql检查表 Oracle检查表
阅读更多...
【Canvas】记录一次从0到1绘制风场空间分布图的过程

【Canvas】记录一次从0到1绘制风场空间分布图的过程

前言 &#x1f4eb; 大家好&#xff0c;我是南木元元&#xff0c;热衷分享有趣实用的文章&#xff0c;希望大家多多支持&#xff0c;一起进步&#xff01; &#x1f345; 个人主页&#xff1a;南木元元 目录 背景 前置知识 风场数据 绘制风场 准备工作 生成二维网格 获取…
阅读更多...
ppt转换成pdf文件

ppt转换成pdf文件

最近用到了&#xff0c;记一下&#xff1b; ppt转pdf分为两种情况: 小于2007版本的 .ppt格式&#xff08;2003&#xff09; 与大于2007版本的 .pptx格式&#xff08;2007&#xff09; .ppt格式为 二进制文件 .pptx格式为xml格式&#xff0c;在java中有不同的jar包需要使用 引入…
阅读更多...
MacOS 12 开放指定端口 指定ip访问

MacOS 12 开放指定端口 指定ip访问

MacOS 12 开放指定端口 指定ip访问 在 macOS 上开放一个端口&#xff0c;并指定只能特定的 IP 访问&#xff0c;你可以使用 macOS 内置的 pfctl&#xff08;Packet Filter&#xff09;工具来实现。 以下是一些基本的步骤&#xff1a; 1、 编辑 pf 配置文件&#xff1a; 打开 /…
阅读更多...
Dockerfile创建镜像--LNMP+wordpress

Dockerfile创建镜像--LNMP+wordpress

实验准备&#xff1a; nginx&#xff1a;172.111.0.10 docker-nginx mysql&#xff1a;172.111.0.20 docker-mysql php&#xff1a;172.111.0.30 docker-php 自定义网段&#xff1a;172.111.0.0/16mkdir nginx mysql php mv nginx-1.22.0.tar.gz wordpress-6.4.2-zh_CN.ta…
阅读更多...
数据结构之选择排序

数据结构之选择排序

目录 直接选择排序 选择排序的时间复杂度 堆排序 向上调整算法 向下调整算法 向上调整算法建立堆 向下调整算法建立堆 堆排序整体代码 堆排序的时间复杂度 直接选择排序 在之前讲插入排序时&#xff0c;我们讲了这样的一个应用场景&#xff0c;我们在斗地主摸牌时&…
阅读更多...
PyInstaller 打包 Python 脚本为 .exe 可执行文件闪退、No Model named XXX问题

PyInstaller 打包 Python 脚本为 .exe 可执行文件闪退、No Model named XXX问题

文章目录 前言.exe 可执行文件闪退No Model named XXXPython 环境问题查看当前python路径查看当前python环境使用的site-package路径 个人简介 前言 在上一篇文章中&#xff0c;我们介绍了如何将 Python 脚本打包为 .exe 可执行文件&#xff0c;但有时候打包生成的 .exe 文件会…
阅读更多...
慢SQL诊断

慢SQL诊断

最近经常遇到技术开发跑来问我慢SQL优化相关工作&#xff0c;所以干脆出几篇SQL相关优化技术月报&#xff0c;我这里就以公司mysql一致的5.7版本来说明下。 在企业中慢SQL问题进场会遇到&#xff0c;尤其像我们这种ERP行业。 成熟的公司企业都会有晚上的慢SQL监控和预警机制。…
阅读更多...
阿里云cdn设置相同的域名路径访问不同的oss目录

阿里云cdn设置相同的域名路径访问不同的oss目录

1.设置回源配置&#xff0c;添加回源URL改写 2.设置跨域&#xff0c;cdn的跨域优先oss 3.回源设置
阅读更多...
前端 三种解决跨域问题 jsonp 、CORS、代理服务器 解决跨域全家桶

前端 三种解决跨域问题 jsonp 、CORS、代理服务器 解决跨域全家桶

我的报错情况是 后端接口是3000 前端本地接口是8080&#xff0c;最后出现跨域 1.什么是跨域&#xff1f; 首先跨域是一种安全机制&#xff0c;是在开发上线前考虑到的安全问题并且需要采取合适的手段去避免这个问题带来的程序错误,接口跨域可以后端处理,也可以前端处理&#x…
阅读更多...
Docker的安装与简单操作命令

Docker的安装与简单操作命令

目录 前言 docker的安装 基础docker操作 容器管理 镜像管理 容器镜像封装与加载 前言 前文简单说明了容器技术出现的背景&#xff0c;与对docker做了结构上的介绍Container容器技术简介-CSDN博客https://blog.csdn.net/qq_72569959/article/details/134814887 讲到dock…
阅读更多...
Day07 Liunx高级系统设计8-线程

Day07 Liunx高级系统设计8-线程

概述 进程与线程 进程 : 系统分配资源的基本单位 , 可以简单理解为一个正在进行的程序 线程 : 操作系统调度的最小单位 , 就是一段代码的执行顺序 注意&#xff1a; 1, 一个进程必须要有一个线程 , 该线程被称为主线程 2, 一个进程可以有多个线程 , 除主线程外的其他线程都是…
阅读更多...
玻色量子袁为出席中国移动第四届科技周量子计算算法与应用分论坛

玻色量子袁为出席中国移动第四届科技周量子计算算法与应用分论坛

9月12日&#xff0c;中国移动第四届科技周“量子计算算法与应用”分论坛在北京成功举办&#xff0c;中国移动研究院院长黄宇红发表致辞&#xff0c;中国移动未来研究院院长崔春风全程主持。玻色量子作为光量子计算领域真机测试与场景应用的标杆企业应邀出席&#xff0c;玻色量子…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023