UI测试的自动焦点

更快地发现细微的视觉变化

加载
多米尼克阮
@domyen

UI的改变并不总是显而易见的.

色度检测变化,让你检查,但很难看到细微的UI差异. 例如,您可能会错过对border-radius和字体呈现等属性的调整.

我很激动要发布了 自动对焦,这个新特性可以帮助您更快地确定小的UI更改. 它消除了UI测试中的歧义,因此您可以更快地接受基线.

如何聚焦细微的变化

切换焦点按钮以查找UI更改.  在新的快照中,以霓虹绿色显示的差异将被突出显示.

十博体育备用网址梳理了数以百万计的快照,以发现变化难以看到的情况. 例如,当小于10像素的大图像发生变化时.

自动对焦是专门为使细微差别变得更明显而设计的. 更重要的是,当你遇到像素变化很少的情况时,它会自动启用.

你能强调一下吗?

当处于焦点模式时,将鼠标悬停在新快照上以激活放大镜. 这将放大快照差异,以帮助您更详细地查看更改.

为更改设置阈值

diffThreshold 参数允许您设置阈值的视觉变化,得到标记的彩色. 这意味着您可以配置为跳过快照,但差异很小.

调整默认阈值以减少测试不稳定. 它平衡了高准确性和很少的假阳性. But your component or library may require different visual tolerances; adjust the diffThreshold 像下面的.

MyComponent / /添加.js

import MyComponent from `.MyComponent /添加';

出口默认{
  MyComponent组件:添加,
};

const Template = (args) => ; 

export const StoryName = Template.绑定({});
StoryName.args = {
  :“道具”
};

StoryName.参数= {
  //设置diffThreshold为0.2个特定的故事.
  // 0.63是默认的diffThreshold值
  color: {diffThreshold: 0.2 },
};

彩色由Storybook维护者

彩色是Storybook维护者提供的工业级测试和评论工具. 十博体育备用网址的目标是自动化您的工作流,这样您就可以用更少的工作交付ui.

👉 今天试着彩色 👈

这篇文章对你有帮助吗?

获得免费的UI开发指南和教程,就像这个电子邮件给你.

4402个开发者,还在增加

十博体育备用网址正在招聘!

加入故事书和彩色的团队. 构建成千上万开发人员在生产环境中使用的工具. Remote-first.

视图的工作

受欢迎的文章

如何出版一个故事书插件

与社区分享你的故事书插件
加载
Varun Vachhar
通过彩色
面向专业UI开发人员的深入指南和教程,来自Storybook团队
指南
介绍故事书为开发人员设计系统视觉测试手册
关于
订阅
加入墨水时事通讯,以获得免费的教程、指南和通过电子邮件发送给您的资源.
友情链接: 1 2 3 4 5 6 7 8 9 10