Web UI 的 10 个纬度

1. 理想的 计划的时候，简单并且完美的版本
2. 异步的 每个异步视图都是一个雨衣下面有三个孩子：加载状态，错误状态，加载完成状态
3. 多变体 加载图标，骨架屏，空状态，404， 500
4. 视图 一个页面上像有好多兔子一样，有好多的视图
5. 浏览器引擎 有很多的浏览器，需要浏览器兼容
6. 用户能力 要为视力不好的人准备视图
7. 设备能力 例如设备的大小
8. 授权 不同用户可以看到不同的页面或者页面的不同部分或者不同的数据
9. 国际化 文字可能是从左向右排或者从右往左排
10. 公司组织 需要提供文档

使用 Component Storybook

1. 基于组件的测试，比基于页面的测试省 effort。
2. 可以指定不同的 props 参数，指定不同的页面大小，例如针对 mobile 进行测试。
3. Story 里面可以有 render, play, expect，进行一些测试。
   1. 基于 @storybook/test-runner, 使用 headless chromium 进行测试。
      1. @storybook/test-runner 基于 jest, playwright
   2. 可以与 axe-playwrite 一起使用，进行 accessibility 测试。