使用GitHub动作自动着色

色有 GitHub行动 来帮助您自动化可视化回归测试并发布故事书.

设置

在你的 .github /工作流 目录,创建一个名为 彩色.yml 并添加以下内容:

# .github /工作流/彩色.yml

#工作流名称
的名字: '彩色的

#工作流的事件
on: 

#工作列表
工作:
  彩色-deployment:
    #操作系统
    运行在: ubuntu-latest
    #工作步骤
    步骤:
      - 使用: 行动/ checkout@v1
      - 的名字: 安装依赖关系
        运行: 
        #👇添加彩色作为工作流程中的一个步骤
      - 的名字: 发布到彩色
        使用: chromaui / action@v1
        #彩色GitHub动作选项
        :
          令牌: ${{秘密.GITHUB_TOKEN}}
          #👇彩色projectToken,参考管理页面获取它.
          projectToken: ${{秘密.CHROMATIC_PROJECT_TOKEN}}

为了额外的安全,您需要配置秘密.

在一个新的浏览器窗口中,导航到GitHub存储库. 单击 设置 选项卡中,紧随其后的是 秘密 然后 新的秘密.

GitHub秘密工作流程

在表格中填写必要的信息,详细如下,替换 价值 使用您自己的彩色项目标记.

GitHub存储库秘密配置

单击 添加的秘密 button.

阅读官方的 GitHub秘密文档.

分叉的存储库

GitHub的秘密工作在存储库级别. 分叉的存储库将无法访问它们. 如果你想在跨存储库(分叉)的PRs上运行chromium,你需要 project-令牌 公众在你 包.json 作为脚本的一部分:

{
  “脚本”: {
    “色”: “色——project-令牌 = CHROMATIC_PROJECT_TOKEN”
  }
}
取代 CHROMATIC_PROJECT_TOKEN 用你自己的令牌从彩色.

或者,你可以禁用禁用的拉请求从分叉库.

可用选项

彩色的GitHub行动包括额外的选项,以自定义您的工作流. 下表列出了目前可用的:

Option 描述 类型 示例值 默认值
buildScriptName 构建故事书的脚本 字符串 build-storybook build-storybook
storybookBuildDir 为构建的故事书提供一个目录. 字符串 storybook-static storybook-static
allowConsoleErrors 当运行时错误发生在故事书时不退出 布尔 真正的
autoAcceptChanges 自动接受所有的变化在彩色 字符串 or 布尔 我的枝或真
exitZeroOnChanges 即使检测到更改,也要积极退出操作 字符串 or 布尔 我的枝或真 真正的
exitOnceUploaded 一旦构建被发送到chromecos,以状态0 (OK)退出 字符串 or 布尔 我的枝或真
ignoreLastBuildOnBranch 忽略当前分支上的最新构建,如果该构建是基线. 允许通过多个分支 picomatch 字符串 我的枝 N/A
workingDir 提供故事书的位置 包.json 如果安装在子目录(i.e.monorepos) 字符串 我的文件夹 N/A

支持 行动/ checkout@v2

第2版 行动/结帐 支持. 但也有一个警告. 它只会检索一个提交,而不会有任何额外的历史记录. chromate需要完整的Git历史记录来跟踪存储库中的更改.

您需要对您的工作流进行以下更改:

# .github /工作流/彩色.yml

#需要其他配置

工作:
  彩色-deployment:
    步骤:
        #👇动作的版本2
      - 的名字: 检查存储库
        使用: 行动/ checkout@v2
        :
          fetch-depth: 0 #👈需要检索git历史记录
      - 的名字: 安装依赖关系
        运行: 
        #👇添加彩色作为工作流程中的一个步骤
      - 的名字: 发布到彩色
        使用: chromaui / action@v1
        #选项需要GitHub彩色动作
        :
          令牌: ${{秘密.GITHUB_TOKEN}}
          #👇彩色projectToken,参考管理页面获取它.
          projectToken: ${{秘密.CHROMATIC_PROJECT_TOKEN}}
阅读官方的 GitHub操作文档.

在特定的分支上运行chrodbook

如果你需要自定义你的工作流程来运行chrombook在特定的分支, 像这样调整你的工作流程:

# .github /工作流/彩色.yml

#其他必要配置

#👇触发执行的工作流事件
on:
  :
    分支es-ignore:
      - "例子” #👈排除示例分支

工作:
#作业和步骤的列表
阅读官方的 GitHub分支工作流文档.

现在半音阶将运行任何分支,除了 例子.

其他分支也可以包括在内,例如由Renovate bot创建的分支.

支持环境变量

环境变量支持在彩色. 但也有一个警告. 十博体育备用网址建议在每个环境变量前面加上 故事书 关键字,并调整您的工作流如下:

# .github /工作流/彩色.yml

#需要其他配置

#工作列表
工作:
  彩色-deployment:
    #操作系统
    运行在: ubuntu-latest
    #工作步骤
    步骤:
      - 使用: 行动/ checkout@v1
      - 运行: 
        #👇添加彩色作为工作流程中的一个步骤
      - 使用: chromaui / action@v1
        #选项要求的彩色的GitHub行动
        :
          projectToken: ${{秘密.CHROMATIC_PROJECT_TOKEN}}
          令牌: ${{秘密.GITHUB_TOKEN}}
        env:
          #👇设置环境变量
          故事书_SOME_ENV_VAR: ${{秘密.故事书_SOME_ENV_VAR}} 

包括 env 选项确保设置的所有环境变量都已准备好在UI测试和部署的故事书中使用.

与其他CI系统一样,GitHub的Actions可以基于任何类型的事件运行. 十博体育备用网址的建议是运行半音的步骤 事件. 所有其他事件类型除外 pull请求 将不会工作.

pull请求 事件需要特别考虑. 像其他CI系统一样, GitHub允许工作流在任何一个提交被推送到分支的pull请求中执行. 或者对于“merge”在该分支和基分支(主)之间提交.

这些特定类型的提交(合并)不会保存在存储库的历史中. 这可能会导致在某些情况下,chrominet的基线会丢失. 因此,十博体育备用网址建议运行chromstep .

UI测试和UI评审

用户界面测试UI审查 依靠 分支和基线 检测以保持跟踪 快照. 十博体育备用网址推荐以下配置.

“必需”检查的命令退出代码

如果你使用拉请求状态作为必要的检查之前合并, 如果测试快照呈现时没有错误(但有更改),您可能不希望工作流步骤失败. 要实现这一点,请传递选项 exitZeroOnChanges 子句,您的工作流将在这种情况下继续. 例如:

# .github /工作流/彩色.yml

#其他必要配置

工作:
  彩色-deployment:
    步骤:
        #👇添加彩色作为工作流程中的一个步骤
      - 的名字: 发布到彩色
        使用: chromaui / action@v1
        #选项需要GitHub彩色动作
        :
          令牌: ${{秘密.GITHUB_TOKEN}}
          #👇彩色projectToken,参考管理页面获取它.
          projectToken: ${{秘密.CHROMATIC_PROJECT_TOKEN}}
          exitZeroOnChanges: 真正的 #👈防止工作流失败的选项
读到的 可用选项.

当使用 exitZeroOnChanges,如果您的故事书包含错误的故事,您的工作流仍然会停止并失败.

在验证UI测试结果后重新运行失败的构建

包含可视化更改的构建需要 验证. 如果你不使用它,它们就会失败 exitZeroOnChanges option. 一旦您接受了所有的更改,重新运行工作流,然后 彩色-deployment 工作将通过.

如果你否认任何改变, 您将需要进行必要的代码更改以修复测试(并因此开始一个新的运行),以使chromium再次通过.

保持一个干净的“主要”分支

一个干净的 main 分支机构是一个发展 最佳实践强烈推荐 对色. 在实践中,这意味着确保测试构建在您的 main 分支传递.

如果构建是直接提交给 main,您将需要接受更改以保持主分支的干净. 如果它们被合并 feature-分支es,您需要确保这些分支正在通过 之前 你融入 main.

GitHub壁球/rebase合并和“主”分支

GitHub的squash/rebase合并功能会创建与被合并的分支没有关联的新提交. 如果你已经启用了十博体育备用网址的GitHub应用程序 UI审查 工作流,然后十博体育备用网址将自动检测这种情况,并带来基线(见 分支和基线 更多细节).

如果你正在使用这个功能,但是注意到传入的更改在chrolical中不被接受为基线, 然后,您将需要调整工作流,以包含一个新的步骤 autoAcceptChanges option. 例如:

# .github /工作流/彩色.yml

#操作的其他必要配置

工作:
  彩色-deployment:
    步骤:
        #其他步骤

        #👇检查分支是否不是主要的,并运行彩色
      - 的名字: 发布到彩色
        if: github.裁判 != ' 裁判s /头/主'
        使用: chromaui / action@v1
        #必需的选项为彩色GitHub行动
        :
          令牌: ${{秘密.GITHUB_TOKEN}}
          #👇彩色projectToken,参考管理页面获取它.
          projectToken: ${{秘密.CHROMATIC_PROJECT_TOKEN}}
        #👇检查分支是否为主,并接受所有变色
      - 的名字: 发布到彩色和自动接受变化
        if: github.裁判 = = /头/主要参考文献的
        使用: chromaui / action@v1
        #必需的选项为彩色GitHub行动
        :
          令牌: ${{秘密.GITHUB_TOKEN}}
          #👇彩色projectToken,参考管理页面获取它.
          projectToken: ${{秘密.CHROMATIC_PROJECT_TOKEN}}
          autoAcceptChanges: 真正的 #👈选择接受所有更改

读到的 可用选项.

包括 autoAcceptChanges 选项确保所有传入的更改将被接受为基线. 此外,你将保持清洁 main 分支.

如果您想测试重新基于的分支所引入的更改, 控件可以调整工作流并包含一个新步骤 ignoreLastBuildOnBranch option. 例如:

# .github /工作流/彩色.yml

#其他必要配置

工作:
  彩色-deployment:
    步骤:
        #👇添加彩色作为工作流程中的一个步骤
      - 的名字: 发布到彩色
        使用: chromaui / action@v1
        #选项需要GitHub彩色动作
        :
          令牌: ${{秘密.GITHUB_TOKEN}}
          #👇彩色projectToken,参考管理页面获取它.
          projectToken: ${{秘密.CHROMATIC_PROJECT_TOKEN}}
          ignoreLastBuildOnBranch: '我的枝上的 #👈选择跳过目标分支的最后一次构建
读到的 可用选项.

包括 ignoreLastBuildOnBranch 选项确保不将特定分支的最新构建用作基线.

在开放源码项目的外部分支上运行chroff

您可以通过共享您的 project-令牌 您在其中配置了彩色命令(通常在 包.json 或者在工作流步骤中).

有取舍. 分享 project-令牌的允许 贡献者 和其他人运行半音. 他们可以用你的快照. 他们将无法访问您的帐户、设置或接受基线. 对于重视社区贡献的开源项目来说,这是一个可以接受的折衷方案.

跳过某些分支的构建

有时你可能想要跳过为某个分支运行一个构建,但仍然将该分支的最新提交标记为“passed”. 否则,拉请求可能会由于需要的检查仍处于挂起状态而被阻塞. 为了避免这个问题,您可以运行 彩色——跳过 国旗. 此标志接受分支名称或glob模式.

这个特性的一个用例是跳过机器人创建的分支的构建. 例如,Dependabot自动更新项目的依赖项. 尽管一些依赖关系可能会导致UI更改, 你可能会发现不值得为每一个依赖项更新运行彩色. 相反,你可以依靠半音跑步对抗 main or 开发 分支.

跳过构建 dependabot 分支,使用以下:

彩色 ——跳过 “dependabot / * *”
阅读十博体育备用网址的 CLI文件.

要将其应用于多个分支,请使用“扩展glob”. 看到 picomatch 有关详细信息,.

彩色 ——跳过 “@(翻新/ * * | dependabot / * *)”
友情链接: 1 2 3 4 5 6 7 8 9 10