Day 114/200 Storybook中的视觉回溯测试

最新推荐文章于 2024-07-07 13:52:57 发布
最新推荐文章于 2024-07-07 13:52:57 发布
阅读量103 收藏
点赞数
分类专栏： 测试 前端 文章标签： 测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xinghuowuzhao/article/details/115139511
版权

写在前面的话

Storybook打动我的有两点

1、前端测试可以做到视觉回溯——对比前后UI页面的对比了；

2、组件可以有其他人（QA，UI工程师，部门leader来定义）

具体步骤按照官方文档来，很详细了

官方链接

https://storybook.js.org/tutorials/intro-to-storybook/react/zh-CN/get-started/

 

1、视觉回溯效果截图

 

2、（非前端）支持调试组件样式

适用范围

React，Vue，Angular，Web-Components

仓库地址

https://github.com/iguoxing/storybook

 

 

 

Arden Zhao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
storybookjs：用于测试目的的故事书
02-04
测试用故事书 去做 任务 任务列表 综合 数据 屏风 测验 插件 创建插件 部署 结论 有助于 参考文献 入门 简单的组件
screener-storybook：使用Screener.io的React Storybook的自动化视觉测试
02-03
筛选故事书 使用对 （React，Vue，Angular或HTML）进行自动视觉测试。 Screener-Storybook将使用您现有的Storybook故事作为视觉测试用例，并在自动化视觉测试服务上运行它们。 无需其他编码即可在React，Vue，Angular或HTML组件上获得可视化回归测试！ 安装 转到 按照向导中的步骤设置新项目 跑 设置项目后，可以使用以下命令运行测试： npm run test-storybook 文件 测试互动 要测试交互，您可以将steps添加到现有的Storybook故事中。 每个step都是与组件进行交互的指令。 这对于单击按钮，填写表单以及使组件进入适当的可视状态进行测试非常有用。 这样还可以将您的故事和交互测试代码保持在同一位置。 使用React 要将steps添加到React故事中，请将您的组件包装在Screener组件中，然后将其传递给steps道具。 然后可以使用下面的流畅API生成这些steps 。 这是一个例子： import Screener , { Steps } from 'screener-storybook/
storybook-wdio：使用WebdriverIO进行视觉回归测试的Storybook样板
02-03
故事书视觉回归样板 使用结合ReactJS，Typescript和Visual Regression测试的故事书样板 动机 众所周知，ReactJS一直是最广泛使用的Javascript库，并且在许多人看来也是功能最强大的库，它一直处于领先地位。 如果将ReactJS与Storybook和来自Webdriver IO的可视化回归测试相结合，则可以创建一个设计系统和一个自定义组件库，可以在产品和/或其他团队之间安全地重用它们。 有时，当在一个大团队或多个团队中共享一个UI库时，我们会遇到一个问题，即一个人对共享组件进行琐碎或很小的更改。 对于在其他地方使用相同组件的其他用户，这些更改可能会引起问题。 通常，小的修改或更改也可能会贯穿代码审查。 通过此样板，我们合并了对每个组件运行视觉回归测试的功能。 这使开发人员甚至可以看到最细微的更改，并在提交更改之前决定是否可以接受。 入门 要运行此项目，请按照下列步骤操作： 确保您的机器上安装了和 拉或 docker映像 克隆此仓库 安装依赖项 npm install 从开发模式开始故事书 npm run storybook 如何与故事
storybook：组件展示、手动测试组件
buler_sky的博客
04-22 575
1、框架作用 a、测试、展示组件； b、配合插件使用扩展功能（例如生成组件使用文档等等） 插件列表地址：https://github.com/storybookjs/storybook/#addons。 2、如何使用框架 2.1 使用默认cli框架： npx -p @storybook/cli sb init --type vue 默认安装2个插件： addon-links addon-essentials：这个插件是一个插件组合，包含这7个插件： https://storybook....
storybook的介绍和使用 比较火的响应式UI开发及测试环境 ...
weixin_34226706的博客
12-30 1069
storybook是一套最近比较火的响应式UI 开发及测试环境。 可以可视化开发调试react，vue组件 官网：https://github.com/storybooks/storybook 至于为什么叫storybook，应该是敏捷开发中的user story有关，找了篇 文章，不了解的同学可以看下 根据...
Day 113/200 前端测试神器——Jest（待续）
xinghuowuzhao的博客
03-22 97
写在前面的话 已知的最强组合是Jest+Storybook Jest 安装命令可参考官网具体的框架执行命令 https://jestjs.io/zh-Hans/ 在执行测试断言函数时的命令 xwwxyarn jest:test --coverage 参考链接 https://jestjs.io/zh-Hans/ https://jestjs.io/zh-Hans/docs/getting-started https://tuture.co/2020/0...
如何使用 React 18 和 Storybook 进行交互测试
分享身边生活经验blog
10-21 809
交互测试涉及测试 React 组件内的交互。这些测试模拟应用程序中的用户操作，例如通过单击按钮或输入输入组件与组件交互，以及在此类交互之后应用程序的行为。在现代应用程序中，组件比以前承担了更多的责任，因为开发人员已经开始在组件中包含诸如数据获取操作和状态管理工具之类的东西。2022 年 10 月微软已开始发布针对 Xbox One 和 Xbox Series X/S 游戏机的公开更新。通过交互测试，我们可以更有效地验证应用程序用户界面的功能方面。
解决storybook7.0中全局引入css样式
A_9888的博客
05-08 597
如果想要在storybook中引入全局样式，目前官方并未有提供一个完全的例子来供开发中使用，而且全英文下要精确找到解决问题还是比较吃力，一下是我的配置解决。
JavaScript_Storybook的视觉回归测试.zip
05-20
这个“JavaScript_Storybook的视觉回归测试.zip”文件似乎包含了关于如何在Storybook中集成视觉回归测试的信息。 视觉回归测试是一种自动化测试方法，用于检测UI组件在更新后是否产生了意外的视觉变化。这种测试...
:notebook:UI组件开发和测试：React，Vue，Angular，React Native，Ember，Web Components等！-React开发
05-27
故事书故事书是UI组件的开发环境。 它使您可以浏览组件库，查看每个组件的不同状态，以及以交互方式开发和测试组件。 在Storybook中Storybook是UI组件的开发环境。 它使您可以浏览组件库，查看每个组件的不同状态，以及以交互方式开发和测试组件。 Intro Storybook在您的应用程序外部运行。 这使您可以独立开发UI组件，从而可以提高组件重用性，可测试性和开发速度。 您可以快速构建，而不必担心特定于应用程序的依赖性。 这是一些特色考试
testing-react:测试实用程序，可让您在React单元测试中重用Storybook的故事！
03-25
@storybook/testing-react是在React测试中重用Storybook故事的解决方案。 通过在测试中重用您的故事，您可以准备要测试的组件方案目录。 库将构成您及其所有和，以及，并以一个简单的组件将其返回给您。 这样，在...
storybook
03-30
Chromatic的Storybook Vue简介模板 该模板随附了主要的Vue和Storybook配置文件，您需要它们来快速启动和运行。 :bullet_train: 快速开始 创建应用程序。 使用获取此模板。 # Clone the template npx degit ...
storybook上手（安装分析，修改配置）
eswang的CSDN博客
04-23 3395
前言 这个名字大家可能再很多地方都见过，今天我们来真正上手一下。 安装 storybook作为UI库设计的好朋友，在很多地方都有用武之地，不限于View库或者MVVM框架，这里以React为例。 npx -p @storybook/cli sb init 注意，下周速度感人！ 这里因为我已经使用CRA创建项目，所以项目会在原有工程上做一些修改。 首先是package.json： "scrip...
如何编写高质量的测试报告
blues_C的博客
07-06 666
测试报告是软件开发过程中的重要文档，它详细记录了测试活动的过程、结果和发现的问题。本文将指导您如何编写一份高质量的测试报告，包括报告的结构、内容和关键要素。
Appium自动化测试框架1
Chloe_Daytoy05的博客
07-04 421
电脑的浏览器 手机的浏览器 手机上的app原生的应用 纯java 手机上的app apk移动网页应用 纯HTML CSS 手机的浏览器上 电脑的浏览器上混合应用 java html csspython代码 Appium python库 Appium 手机都是代表本机0.0.0.0127.0.0.1localhost。
【软考】白盒测试
最新发布
王佑辉的博客
07-07 197
1.逻辑覆盖考察用测试数据运行被测程序时对程序逻辑的覆盖程度，主要的逻辑覆盖标准有语句覆盖、判定覆盖、条件覆盖、判定/条件覆盖、条件组合覆盖和路径覆盖6种。1.判定/条件覆盖是指设计足够的测试用例，使得判定中每个条件的所有可能取值（至少出现一次），并使每个判定本身的判定结果（真/假）也至少出现一次。2.设计出的测试用例要保证在测试中程序的每一条独立路径都执行过，即程序中的每条可执行语句至少执行一次。2.满足条件组合覆盖的测试用例是一定满足判定覆盖、条件覆盖和判定/条件覆盖的。
软件测试之接口自动化测试实战（完整版）
HUA6911的博客
07-05 815
什么是服务端?一般所说的服务端是指为用户在 APP 或 PC 使用的互联网功能提供数据服务的背后的一切。以天猫精灵智能音箱系列的产品链路为例，服务端便是网关（包括网关在内）之后的链路。什么是接口?官方点说，是计算机系统中两个独立的部件进行信息交换的共享边界。通俗点说，就是服务端对外提供数据服务最常用的信息交换方式。
学习springMVC
weixin_45621552的博客
07-03 507
JSR全称为 Java Specification Requests，表示 Java 规范提案。JSR-303是 Java 为 Java Bean 数据合法性校验提供的标准框架，它定义了一套可标注在成员变量，属性方法上的校验注解。Hibernate Validatior提供了这套标准的实现。-- 最新7.0.1.Final --> </ dependency >-- 最新7.0.1.Final --> </ dependency ></
报错：/bin/sh: start-storybook: command not found
04-07
这看起来像是一个命令行错误，可能是因为您未安装或未正确设置Storybook的依赖项。您可以尝试检查您的环境变量和安装Storybook的依赖项，或者搜索相关的在线资源来解决这个问题。另外，我可以跟您分享一个小笑话：为...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值