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

在这里插入图片描述

 
 

在这里插入图片描述
😏作者简介：博主是一位测试管理者，同时也是一名对外企业兼职讲师。
📡主页地址：【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的高频使用技巧，另外我们在使用的时候也需要注意一些特定的情况，比如使用钩子函数时可能会出现异步操作，特别是一些比较耗时的网络访问业务操作，可以在我们的脚本中有针对性的等待前置操作完成再执行所需要的操作等步骤。在我们的元素遍历中，如果能提前做好一些异常的处理的话，可以让我们的元素操作更为的健壮，其实无论是何种自动化脚本来说，这些都是必须考虑进去的重要因素。

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

JVM学习笔记-如何在IDEA打印JVM的GC日志信息

JVM学习笔记-如何在IDEA打印JVM的GC日志信息

若要在Idea上打印JVM相应GC日志&#xff0c;其实只需在Run/Debug Configurations上进行设置即可。 拿《深入Java虚拟机》书中的3-7代码例子来演示&#xff0c;如 1 public class JvmTest {2 private static final int _1MB1024*1024;3 public static void main(String…
阅读更多...
AI 技术在前端开发流程中如何应用？？3分钟带你一览开放原子开发者大会 OpenTiny 最新资讯！

AI 技术在前端开发流程中如何应用？？3分钟带你一览开放原子开发者大会 OpenTiny 最新资讯！

大会简介 作为开放原子开源基金会的年度盛典&#xff0c;2023 开放原子开发者大会秉持遵循“共建、共治、共享”原则&#xff0c;以“一切为了开发者”为主题。本次大会汇聚顶尖开源人才&#xff0c;共享交流平台&#xff0c;通过吸引和邀请顶尖专家分享见解&#xff0c;设置技…
阅读更多...
Leetcode—380.O(1) 时间插入、删除和获取随机元素【中等】

Leetcode—380.O(1) 时间插入、删除和获取随机元素【中等】

2023每日刷题&#xff08;五十七&#xff09; Leetcode—380.O(1) 时间插入、删除和获取随机元素 算法思想 实现代码 class RandomizedSet { public:vector<int> nums;unordered_map<int, int> dict;RandomizedSet() {srand((unsigned)time(NULL));}bool insert(…
阅读更多...
关于核心转储和GDB调试的理解

关于核心转储和GDB调试的理解

Linux应用程序发生Segmentation fault段错误时&#xff0c;如何利用core dump文件定位错误呢&#xff1f; 在 Linux 系统中&#xff0c;常将“主内存”称为核心(core)&#xff0c;而核心映像(core image) 就是 “进程”(process)执行当时的内存内容。当进程发生错误或收到“信…
阅读更多...
嵌入式系统复习--ARM技术概述

嵌入式系统复习--ARM技术概述

文章目录 上一篇ARM体系结构Thumb技术介绍ARM处理器工作状态ARM的异常响应过程ARM存储器接口及存储器层次下一篇 上一篇 嵌入式系统复习–概述 ARM体系结构 ARM体系结构的技术特征 ARM的体系结构采用了若干Berkeley RISC处理器的特征 Load/store体系结构固定的32为指令3地址…
阅读更多...
每日一题 2454. 下一个更大元素 IV（困难，单调栈）

每日一题 2454. 下一个更大元素 IV（困难，单调栈）

首先考虑第一大整数问题维护一个单调栈&#xff0c;遍历 nums&#xff0c;弹出栈中所有小于 nums[i] 的数&#xff0c;而 nums[i] 就是这些被弹出的数的第一大整数&#xff0c;知道栈为空或者栈顶元素比 nums[i] 大&#xff0c;证明如下&#xff0c;首先由于是遍历&#xff0c;…
阅读更多...
C语言leetcode集训一：数组

C语言leetcode集训一：数组

为了进一步巩固C语言基础&#xff0c;同时进一步了解leetcode刷题的流程&#xff0c;开始进行C语言的集训&#xff0c;今天是第一天&#xff0c;看看我都做了哪些题&#xff0c;因为周末&#xff0c;有点颓废&#xff0c;所以基本上都是简单题&#xff0c;现在只想睡觉...... 有…
阅读更多...
【无标题】树莓派 4B 多串口配置

【无标题】树莓派 4B 多串口配置

0. 实验准备以及原理 0.1 实验准备 安装树莓派官方系统的树莓派 4B&#xff0c;有 python 环境&#xff0c;安装了 serial 库 杜邦线若干 屏幕或者可以使用 VNC 进入到树莓派的图形界面 0.2 原理 树莓派 4B 有 UART0&#xff08;PL011&#xff09;、UART1&#xff08;mini UAR…
阅读更多...
YOLOv8改进实验：一文了解YOLOv8如何打印FPS指标

YOLOv8改进实验：一文了解YOLOv8如何打印FPS指标

💡该教程为改进YOLOv8指南，属于《芒果书》📚系列，包含大量的原创首发改进方式🚀 💡🚀🚀🚀本博客内含改进源代码，按步骤操作运行改进后的代码即可 💡更方便的统计更多实验数据，方便写作 新增YOLOv8打印FPS指标 完善(一键YOLOv8打印FPS指标) 文章目录 完善…
阅读更多...
MySQL - 事务隔离级别

MySQL - 事务隔离级别

MySQL 事务 本文所说的 MySQL 事务都是指在 InnoDB 引擎下&#xff0c;MyISAM 引擎是不支持事务的。 数据库事务指的是一组数据操作&#xff0c;事务内的操作要么就是全部成功&#xff0c;要么就是全部失败 事务具有原子性&#xff08;Atomicity&#xff09;、一致性&#xff0…
阅读更多...
软件压力测试的重要性与用途

软件压力测试的重要性与用途

在当今数字化的时代&#xff0c;软件已经成为几乎所有行业不可或缺的一部分。随着软件应用规模的增加和用户数量的上升&#xff0c;软件的性能变得尤为关键。为了确保软件在面对高并发和大负载时仍然能够保持稳定性和可靠性&#xff0c;软件压力测试变得至关重要。下面是软件压…
阅读更多...
vue2-elementUI部分组件样式修改

vue2-elementUI部分组件样式修改

el-radio样式&#xff1a; /deep/ .el-radio__input .el-radio__inner {width: 20px;height: 20px;position: relative;cursor: pointer;-webkit-appearance: none;-moz-appearance: none;appearance: none;border: 1px solid #999;border-radius: 0;outline: none;transition…
阅读更多...
LeetCode刷题--- 二叉树剪枝

LeetCode刷题--- 二叉树剪枝

个人主页&#xff1a;元清加油_【C】,【C语言】,【数据结构与算法】-CSDN博客 个人专栏&#xff1a;http://t.csdnimg.cn/ZxuNL http://t.csdnimg.cn/c9twt 前言&#xff1a;这个专栏主要讲述递归递归、搜索与回溯算法&#xff0c;所以下面题目主要也是这些算法做的 我讲述…
阅读更多...
渗透测试是什么

渗透测试是什么

随着信息技术的飞速发展&#xff0c;网络安全问题日益凸显。其中&#xff0c;渗透测试作为一种重要的安全评估方法&#xff0c;已经被越来越多的企业和组织所采用。渗透测试通过模拟黑客攻击&#xff0c;发现并修复潜在的安全漏洞&#xff0c;从而提高系统的安全性。 直白的说…
阅读更多...
题目：肖恩的苹果林（蓝桥OJ 3683）

题目：肖恩的苹果林（蓝桥OJ 3683）

题目描述&#xff1a; 解题思路&#xff1a; 本题采用二分中的二分答案。枚举每一个最大距离&#xff08;i&#xff1a;1 ~ n&#xff09;以及他们至少能容纳的树木数&#xff08;上一题&#xff1a;跳石头-蓝桥OJ 364&#xff09; 判断二分内判断条件是>还是<以及是lmi…
阅读更多...
满载re:Invent 2023全新发布惊喜，亚马逊云科技下一站GenAI@巡演来啦

满载re:Invent 2023全新发布惊喜，亚马逊云科技下一站GenAI@巡演来啦

无限构建&#xff0c;成为生成式AI原生开发者前沿生成式AI技术之旅正式启程&#xff0c;穿越多个中国的城市&#xff0c;开发者一站式体验&#xff0c;满载re:Invent 2023全新发布惊喜。 LET’S Demo 「构」硬核 生成式AI时代的开发新范式 Amazon Q 全新的企业级生成式AI助手…
阅读更多...
CNN、LeNet、AlexNet基于MNIST数据集进行训练和测试，并可视化对比结果

CNN、LeNet、AlexNet基于MNIST数据集进行训练和测试，并可视化对比结果

完成内容&#xff1a; 构建CNN并基于MNIST数据集进行训练和测试构建LeNet并基于MNIST数据集进行训练和测试构建AlexNet并基于MNIST数据集进行训练和测试对比了不同网络在MNIST数据集上训练的效果 准备工作 import torch import torch.nn as nn import torch.optim as optim …
阅读更多...
【Canvas】记录一次从0到1绘制风场空间分布图的过程

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

前言 &#x1f4eb; 大家好&#xff0c;我是南木元元&#xff0c;热衷分享有趣实用的文章&#xff0c;希望大家多多支持&#xff0c;一起进步&#xff01; &#x1f345; 个人主页&#xff1a;南木元元 目录 背景 前置知识 风场数据 绘制风场 准备工作 生成二维网格 获取…
阅读更多...
vxe-table 右键菜单+权限控制（v3）

vxe-table 右键菜单+权限控制（v3）

1.menu-config 是用于配置右键菜单的属性。通过 menu-config 属性&#xff0c;定义右键菜单的内容、显示方式和样式。 通过 menu-config 属性配置了右键菜单&#xff0c;其中的 options 属性定义了右键菜单的选项。用户在表格中右键点击时&#xff0c;将会弹出包含这些选项的自…
阅读更多...
md笔记使用加自动备份整理

md笔记使用加自动备份整理

1、安装使用 TyporaGiteePicGo搭建图床&#xff08;解决使用Typora写的笔记上传csdn图片无法正常显示问题&#xff09; 2、修改主题 文件-》偏好设置-》外观-》打开主题文件夹 将css文件放到里面然后重启typora&#xff08;css文件可以参考参考链接&#xff09; 3、设置自动备份…
阅读更多...
最新文章

Copyright @ 2022~2023