storyBook play学习

场景

在官方给出的案例中,
Page.stories.js

import { within, userEvent } from '@storybook/testing-library'
import MyPage from './Page.vue'export default {title: 'Example/Page',component: MyPage,parameters: {// More on how to position stories at: https://storybook.js.org/docs/vue/configure/story-layoutlayout: 'fullscreen'}
}export const LoggedOut = {}// More on interaction testing: https://storybook.js.org/docs/vue/writing-tests/interaction-testing
export const LoggedIn = {render: () => ({components: {MyPage},template: '<my-page />'}),play: async ({ canvasElement }) => {const canvas = within(canvasElement)const loginButton = await canvas.getByRole('button', {name: /Log in/i})await userEvent.click(loginButton)}
}

这段代码是一个测试脚本,用于模拟用户登录行为并点击登录按钮。

  • const canvas = within(canvasElement)within 是一个测试工具函数,它可以让你在给定的 canvasElement 内部进行 DOM 查询操作。在这段代码中,它将传递给它的 canvasElement 封装成一个可用于操作的对象 canvas

  • const loginButton = await canvas.getByRole('button', { name: /Log in/i })getByRole 是一个用于根据元素角色获取元素的函数。在这里,它将查找一个角色为 'button' 且名称匹配正则表达式 /Log in/i 的按钮元素,并将结果赋值给变量 loginButton/Log in/i 表示不区分大小写匹配字符串 'Log in'

  • await userEvent.click(loginButton)userEvent.click 是一个模拟用户点击事件的函数。在这里,它会模拟用户点击 loginButton 元素,执行点击操作。

这段代码的作用是在一个渲染的页面中找到名称为 “Log in” 的按钮,并模拟用户点击该按钮。这样就可以测试用户登录的交互行为。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用Mybatis-plus分页查询的Total与实际条数不对应

现象 对于单表查询是没有问题的。而需要多表关联查询&#xff08;自写sql&#xff09;时&#xff0c;就会查询调用Mybatis-Plus的.page(Page page,Wrapper queryWrapper); 可以看到后台实际执行sql有两个。 一个是查询sql的数据&#xff1a; selectvisit.id as id,visit.rfi…

Java中常见的日志包分析(Log4j、Logback、SLF4J等)

Java中常见的日志jar包包括Log4j、Logback、SLF4J、java.util.logging等。它们各自的作用和应用场景如下&#xff1a; 1. Log4j 作用&#xff1a;Log4j是Apache的一个开源项目&#xff0c;提供日志记录的功能&#xff0c;支持多种输出目的地&#xff0c;如控制台、文件、GUI组…

【银行测试】金融银行-理财项目面试/分析总结(二)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 银行理财相关的项…

再谈小米汽车

文章目录 1. 外观2. 电机3. 电池4. 风阻5. 强度6. 智能驾驶 我在两年前分析过小米造车的形势&#xff0c;大家可以 点击这里查看。今天小米官宣传了新汽车。看一下它公布的主要信息&#xff1a; 1. 外观 汽车外观是向保时捷致敬&#xff0c;因此它的外观特别像保时捷。不过外…

CSS 纵向扩展动画

上干货 <template><!-- mouseenter"startAnimation" 表示在鼠标进入元素时触发 startAnimation 方法。mouseleave"stopAnimation" 表示在鼠标离开元素时触发 stopAnimation 方法。 --><!-- 容器元素 --><div class"container&q…

Spark编程范例:Word Count示例解析

Apache Spark是一个强大的分布式计算框架&#xff0c;用于处理大规模数据。Word Count示例是Spark入门教程中的经典示例&#xff0c;旨在展示如何使用Spark来进行简单的文本处理和数据分析。本文将深入解析Word Count示例&#xff0c;以帮助大家更好地理解Spark的基本概念和编程…

关于Echarts的重要属性总结

概要 1.设置图例字体颜色&#xff1a; legend: {//添加位置如下textStyle: {color: #fff // 设置图例文字颜色为白色}} 2.设置序列颜色&#xff1a; series: [{ // 添加位置如下itemStyle: { color: #FFA500 // 设置序列Series颜色}] 3.设置坐标轴单位&#xff1a; xAx…

【Shell编程练习】通过位置变量创建 Linux 系统账户及密码

系列文章目录 输出Hello World 系列文章目录位置变量代码实现运行结果 位置变量 位置变量将以数字方式对变量进行命名&#xff0c;可将命令行参数的值存储到脚本中。要从命令行、函数或脚本执行等处传递参数时&#xff0c;就需要在 Shell 脚本中使用位置参数变量。下表为常用…

《深入理解JAVA虚拟机笔记》OutOfMemoryError 异常

在《Java 虚拟机规范》的规定里&#xff0c;除了程序计数器外&#xff0c;虚拟机内存的其他几个运行时区域都有发生 OutOfMemoryError &#xff08;下文称 OOM&#xff09;异常的可能。 Java堆溢出 Java 堆用于储存对象实例&#xff0c;我们只要不断地创建对象&#xff0c;并…

我的笔记本电脑死机问题折腾记录

两年前&#xff0c;买了一台笔记本电脑。直到今年4月份&#xff0c;不到两年的时间&#xff0c;便出现了花屏的情况&#xff0c;然后就到官方售后去维修&#xff0c;换屏。然后在6月份&#xff0c;屏幕问题再次出现&#xff0c;又去售后维修。 经过两次维修&#xff0c;笔记本…

LVM逻辑卷与扩容

目录 一.LVM&#xff1a; 1.什么是LVM&#xff1a; 2.LVM的基本核心组件&#xff1a; 3.LVM的基本命令&#xff1a; 二.逻辑卷的创建&#xff1a; 第一步&#xff0c;我们先要为虚拟机添加硬盘 然后我们要添加依赖包 然后我们要进行磁盘分区 再添加好分区后&#xff0…

测试C#使用OpenCvSharp从摄像头获取图片

OpenCvSharp也支持获取摄像头数据&#xff0c;不同于之前测试AForge时使用AForge控件显示摄像头数据流并从中截图图片&#xff0c;OpenCvSharp中显示摄像头数据流需要周期性地从摄像头中截取图片并显示在指定控件中。本文学习C#使用OpenCvSharp从摄像头获取图片的基本方式。  …

MybatisX逆向工程方法

官方文档链接&#xff1a;MybatisX快速开发插件 | MyBatis-Plus (baomidou.com) 使用MybatisX可以快速生成mapper文件&#xff0c;实体类和service及实现 效果 方法&#xff1a;首先下载mybatisX插件 然后创建数据库信息 然后选中表&#xff0c;右键&#xff0c;点击Mybatis…

知识积累 电源模块的介绍

1. 电源模块是什么 电源模块是一种设备或组件&#xff0c;用于提供电能供应给其他电子设备或系统。它通常包括电源转换、稳压、过流保护等功能&#xff0c;以确保输出的电能在一定电压和电流范围内稳定可靠。电源模块可以是线性电源或开关电源&#xff0c;具体类型取决于其工作…

部署UOS PXE服务器

部署PXE (Preboot eXecution Environment) 服务器是一个涉及多个步骤的技术过程。这通常用于通过网络引导和安装操作系统&#xff0c;特别是在没有物理介质驱动器的环境中。以下是部署PXE服务器的一般步骤&#xff1a; 1.准备网络环境&#xff1a;确保你的网络可以支持PXE启动…

Linux中的gcc\g++使用

文章目录 gcc\g的使用预处理编译汇编链接函数库gcc选项 gcc\g的使用 这里我们需要知道gcc和g实际上是对应的c语言和c编译器&#xff0c;而其他的Java&#xff08;半解释型&#xff09;&#xff0c;PHP&#xff0c;Python等语言实际上是解释型语言&#xff0c;因此我们经常能听…

2013年第二届数学建模国际赛小美赛B题寄居蟹进化出人类的就业模式解题全过程文档及程序

2013年第二届数学建模国际赛小美赛 B题 寄居蟹进化出人类的就业模式 原题再现&#xff1a; 寄居蟹是美国最受欢迎的宠物品种&#xff0c;依靠其他动物的壳来保护。剥去寄居蟹的壳&#xff0c;你会看到它柔软、粉红色的腹部卷曲在头状的蕨类叶子后面。大多数寄居蟹喜欢蜗牛壳&…

【iOS安全】越狱iOS安装Frida | 安装指定版本Frida

越狱iPhone安装Frida 本文的方法适用于已越狱的iPhone手机 打开Cydia&#xff0c;软件源&#xff0c;编辑&#xff08;右上角&#xff09;&#xff0c;添加&#xff08;左上角&#xff09;&#xff1a;https://build.frida.re 然后搜索Frida&#xff0c;点击安装 参考&#x…

mysql原理--MySQL基于规则的优化

设计 MySQL 的大叔依据一些规则&#xff0c;竭尽全力的把一些很糟糕的语句转换成某种可以比较高效执行的形式&#xff0c;这个过程也可以被称作 查询重写 &#xff08;就是人家觉得你写的语句不好&#xff0c;自己再重写一遍&#xff09;。 1.条件化简 我们编写的查询语句的搜…

Centos7:Jenkins+gitlab+node项目启动(2)

Centos7&#xff1a;Jenkinsgitlabnode项目启动(1) Centos7&#xff1a;Jenkinsgitlabnode项目启动(1)-CSDN博客 Centos7&#xff1a;Jenkinsgitlabnode项目启动(2) Centos7&#xff1a;Jenkinsgitlabnode项目启动(2)-CSDN博客 Centos7&#xff1a;Jenkinsgitlabnode项目启…