如何使用插件旋钮对Storybook进行视觉回归测试？
[英]How to visual regression testing of Storybook with addon-knobs?
问题描述
I'm examining a method for visual regression testing of nearly 1,000 components in a React project. 
我正在研究一种在React项目中对近1,000个组件进行可视化回归测试的方法。 And I'm thinking of using Storybook and BackstopJS to realize it, because many components were already implemented on the Storybook, I thought that I could solve it the fastest. 我正在考虑使用Storybook和BackstopJS来实现它，因为很多组件已经在Storybook上实现了，我认为我可以最快地解决它。
So then, extracting the Storybook scenario automatically, generated a TOC of iframe.html queries, and giving it to BackstopJS to realize this. 然后，自动提取Storybook场景，生成iframe.html查询的TOC，并将其提供给iframe.html以实现此目的。 This method looked like it worked, but there was a problem. 这个方法看起来很有效，但是有一个问题。
Most components in this project are stateless, and actions and state changes are clearly separated. 该项目中的大多数组件都是无状态的，操作和状态更改明确分开。 Therefore, I used @storybook/addon-knobs to check the state change manually. 因此，我使用@storybook/addon-knobs手动检查状态更改。 However, as the issue is mentioned, it appears that knobs do not expect direct manipulation from URL and queries. 但是，正如提到的问题 ，似乎旋钮不期望从URL和查询直接操作。
I gave up on the snapshot in iframe.html and thought about manipulating knobs from index.html. 我放弃了iframe.html中的快照，并考虑从index.html操纵旋钮。 But the situation where the menu differences on the left pane are frequent and cannot be testing. 但是左窗格上的菜单差异频繁且无法测试的情况。
Do you have good ideas? 你有好主意吗？
1 个解决方案
解决方案1
0 已采纳 2019-04-02 05:45:06
I did self solve. 我自己解决了。
Changed the knobs and finally pressing the F key with the knobs out of focus . 更换了旋钮，最后按下F键，旋钮没有聚焦 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.