介绍彩色GitHub行动

如何在GitHub项目中快速集成可视化测试

加载
多米尼克阮
@domyen

开发人员经验描述开发人员工具或服务的可用性. At 彩色,十博体育备用网址投资DX,为客户节省时间和头痛. 这就是为什么十博体育备用网址的api会像十博体育备用网址的应用性能和像素一样关注细节.

十博体育备用网址认为开发者工具不应该妨碍你 这样你就可以专注于UI开发. 我很激动地向大家介绍chromegithub动作,它可以让你在GitHub项目中轻松地设置视觉测试.

什么是GitHub行动?

GitHub的行为 工作流自动化是否由GitHub事件触发. 我把它比作为GitHub工作流制作的持续集成服务. 它允许你脚本自定义行为的事件,如拉请求,提交,和评论. “Actions”运行在GitHub自己的容器上,所以你不需要集成第三方CI服务.

等等,这是否替换了我现有的CI?
不. GitHub Action的好处是为GitHub用户提供了一个快速、简单的设置过程. 对于具有最小CI需求的项目(如适度的组件库和设计系统)来说,操作非常有用.

专门的CI提供者对于具有细微需求和复杂环境的项目仍然是非常宝贵的. 彩色支持这两种,所以选择什么适合你的团队!

在GitHub合并

安装彩色动作

设置可视化测试,减少麻烦. 不需要在devops、CI脚本或配置新服务之间来回奔波. 简而言之, 你只需提交一个配置文件,GitHub就会代表你运行chromebook.

📦 需要 storybook-chromatic ^ 3.4.0

  1. 登录到 彩色
  2. 添加你的项目在彩色生成一个 应用程序代码
  3. 将AppCode添加到存储库的秘密中(参见Github的秘密) 文档 在秘密)
  4. 导航到您想在代码编辑器中进行可视化测试的项目(需要Storybook)
  5. 添加一个 .Github目录位于顶层,其中有一个/工作流目录. 然后创建一个测试.它里面的Yml文件. 这将允许您为CI进程的行为编写脚本.
  6. 把这个添加到测试中.yml文件:
名称:“测试”
on:
  推

工作:
  测试:
  上运行:ubuntu-latest
  步骤:
  -用途:行动/ checkout@v1
  —run: yarn install
  -用途:chromaui action@releases / v1
    :
      令牌:${{秘密.GITHUB_TOKEN}}
      本地:${{秘密.本地}}

6. 保存并git提交. 当十博体育备用网址提交这个GitHub将为十博体育备用网址运行测试,并在GitHub PR检查报告:

🎉恭喜你刚刚设置了彩色视觉测试!

彩色动作是开源的

GitHub Action是开源的 彩色CLI. 额外的设置说明在自述文件中. PRs欢迎!

接下来是什么?

彩色 是Storybook中UI库的安全共享工作区. 它由Salesforce基金会使用, Adobe, 和Workday进行视觉测试, 审查, 和目录UI组件.

In 2020, 您将获得新的开发经验,帮助您的团队收集清楚, 持续的反馈速度.

👉 免费试用chrom.com 👈

这篇文章对你有帮助吗?

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

4402个开发者,还在增加

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

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

视图的工作

受欢迎的文章

电子邮件通知视觉审查

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