树枝和Baselines

使用你的git历史来决定如何检查故事的变化 用户界面测试UI审查. 它的工作方式是为了摆脱你的方式,做你想做的事情. 然而, there can be situations where things get confusing; this document describes in detail the way Chromatic does it.

UI审查:比较分支

UI审查,彩色的目的是告诉你什么将改变的基础分支,当你合并这个PR.

像这样, 彩色将比较每个故事在头分支和故事在基础分支上的样子,当你分枝或最后合并. 这类似于GitHub等系统在PR中显示代码更改时所做的.

从技术上讲,为了实现这一点,十博体育备用网址需要找到“合并基础构建”来进行比较. 这样做的方法是 下面解释.

UI测试:跟踪Baselines

用户界面测试, 十博体育备用网址的目标是为每个故事(在一个给定的视口)保持一个与git历史同步的最新“Baselines”. 可以这样想:每当您接受更改时,十博体育备用网址都将快照文件签入到您的存储库中(十博体育备用网址不这样做,但十博体育备用网址的目标是表现得像十博体育备用网址那样).

这意味着一旦一个快照被接受为Baselines, 在它发生变化之前,不需要重新接受它, 即使是通过git分支和合并. 实现这一目标的机制如下所述.

Baselines

Baselines

彩色的 用户界面测试 将快照与Baselines(故事的最后一个已知“良好”状态)进行比较. 每个故事都有自己的Baselines,并在每个分支上独立跟踪.

当您接受一个快照时,您还将更新该分支上该故事的Baselines. 当你将这个分支合并到另一个分支(例如,返回到 main),Baselines随之而来. 了解十博体育备用网址如何计算Baselines»

分支机构

在十博体育备用网址的系统中,当你运行一个构建时,使用签出的分支来标记构建. 这意味着很容易看到哪个构建属于哪个开发分支, 哪些组件存在并在哪个分支中测试, 以及一个组件在分支的历史中是如何变化的.

多个分支机构

当你在分支机构发展的时候, Baselines图像应该从分支上以前的提交中选择,这是很自然的. 这意味着如果您的团队在多个分支上并行开发, 更改一个分支上已批准的组件截图不会影响其他分支.

合并

当你把两个分支合并在一起, 彩色有时可以有两个(或更多)潜在的屏幕截图作为Baselines(每个分支一个). 在这种情况下,半音会选择 最近批准的更改 作为Baselines.

变基

如果你重基一个分支(比如更新分支到最新的提交 main), 然后创建一个新的提交,它不是该分支上的前一个(pre-rebase)提交的git后代. 从概念上讲, 这可能意味着,chromic应该抛弃任何基于分支构建的批准, 然而,这可能不是您想要的.

由于这个原因,十博体育备用网址 总是 在当前分支中包含最新版本的Baselines,而不考虑git历史. 你可以用 ——ignore-last-build-on-branch=彩色. 例如:

彩色 ——ignore-last-build-on-branch=example-branch
阅读十博体育备用网址的词 文档.

南瓜和rebase-merging

彩色检测壁球和rebase合并. 即使在压缩或重基删除Git历史记录时,您的Baselines也会在分支之间保留.

如果你在拉请求中使用“挤压”或“rebase”合并功能, 然后在您的基分支上创建一个提交,该基分支不是PR的提交后代. 参见下图.

Squash和rebase合并删除Git历史

这意味着半音阶无法分辨, 使用Git, PR期间接受的Baselines应该“出现”到主要分支. 相反,十博体育备用网址使用Git提供程序api来检测这种情况. 在运行squash/rebase合并提交时,十博体育备用网址将使用 最近的 在公关部的总行任职.

如果你正在使用GitHub,你需要启用十博体育备用网址的GitHub应用程序(在 把请求 屏幕),以使该特性工作. Bitbucket和GitLab将会开箱即用.

Baselines是如何计算的

如上所述,半色为每一个保持一个单独的Baselines 故事在每个 视窗,对于每一个 提交. 这意味着当您对组件进行更改时, 或者通过提交新代码, 合并其他分支或其他, 你的Baselines将跟随你的故事.

只有当你或你的团队成员改变Baselines的时候 接受改变. 通常这意味着Baselines是您在处理一个特性时所期望的.

然而,有时Baselines的选择可能令人困惑. 让十博体育备用网址深入了解一下它是如何工作的.

计算祖先构建

在彩色, 一个构建包含一组快照, 每个窗口都是单个故事在单个窗口的截图.

如果您使用多个浏览器, 在一个快照中可能有多个截图, 然而,Baselines是在浏览器级别之上计算的(所有浏览器共享相同的接受/拒绝), 在考虑Baselines时,十博体育备用网址可以忽略多个浏览器.

为新提交创建新构建时, color将为构建中的每个快照计算一个Baselines(除非快照是为一个新的故事). 第一步是计算构建本身的祖先.

祖先构建是在git历史中运行过chromerun的最近的祖先(提交). 通常,这是之前的提交:

x -建造N
|
y -生成N+1

如果不是每次提交都运行CI(如果不是每次提交都push,这很常见), 可能存在差距:

x -建造N
|
y
|
z -建造N+1

也, 最近的祖先可能不止一个, 特别是当十博体育备用网址正在查看的提交是合并提交时:

x -建造N
|
| p -构建N+1
|  /
y -生成N+2

在本例中,构建N+2将有两个祖先构建(N和N+1). 事情可能会变得更复杂一点(参见下面的一些例外),但这是基本的想法. 你可以在构建页面上看到列出的祖先构建:

祖先的构建

从祖先构建计算快照Baselines

一旦十博体育备用网址得到了构建的祖先构建, 计算任何给定快照Baselines的算法是这样的:

如果存在一个祖先构建,则查找是否存在相同故事的快照 & 视窗的组合.

如果有,请检查该快照的状态:

  • 如果是 改变,那些改变被接受 (即快照是新的或更改过的,但已被您的团队接受),然后使用它作为Baselines.
  • 如果是 不变 (即它在视觉上与自己的Baselines一致),然后使用它作为Baselines.
  • 如果是 改变但被拒绝或尚未被接受,那么十博体育备用网址需要忽略它,并利用它 其Baselines 作为新快照的Baselines..

最后一个案例值得思考一下. 考虑一下这个场景:

x -建造N
|
y -生成N+1
|
z -建造N+2

假设在提交y中,十博体育备用网址将提交按钮的颜色改为橙色而不是绿色. 然而,十博体育备用网址意识到这是一个错误,并否认了更改. 然后在提交 z中,十博体育备用网址把颜色变回绿色. 然后在构建N+2中, 十博体育备用网址应该比较“新的”绿色按钮和原始的绿色按钮(来自Build N). 如果它们回到了以前的方式,构建应该在不需要您干预的情况下通过. 如果绿色是另一种颜色, 色度应该显示你的差异,你可以决定这是否是你想要的.

多个祖先构建

在有多个祖先构建的情况下, 计算Baselines的算法或多或少是相同的. 十博体育备用网址(可能)最终会使用多个Baselines快照. 为了打破僵局,十博体育备用网址假设最近接受的快照是您想要比较的那个.

可视化Baselines历史

当你 验证UI测试更改在彩色,您将看到与上述算法对应的一组历史Baselines. 这有助于您理解Baselines何时更改、由谁更改以及在何处提交.

快照标记为“最近的构建…”.是一个尚未被接受为Baselines的变化. 标记为“当前Baselines”的Baselines是Tom Coleman接受的快照的最后一个已知的良好版本. 回到时间轴,列出的Baselines显示了组件更改的时间.

如何计算合并基数

在chromebook中找到合并基础, 它需要从PR上的当前最新构建往回跟踪,直到找到一个位于基础分支上的构建. 彩色音轨通过 祖先的构建 每个构建的, 这对应于git提交历史(请记住,您可能没有为每一个提交运行一个构建!).

这通常会导致这样的情况:

X - y - z[基数]
  \
    W - p - q[头]

从对应提交的构建开始 q,走过了提交和build的历史 pw 直到到达 x. 这是“合并基础”构建(以及提交,它将从 Git merge-base base头).

现在将比较故事从 q 对应的故事 x 生成PR的UI更改.

如果最近从基础分支更新了总部分支, merge base可以是一个比分叉点更近的提交:

X - y - z[基数]
  \       \
    W - p - q[头]

在这种情况下,合并基开始于 qz. 使用它是有意义的 z 作为比较点,否则(如果十博体育备用网址比较 q to x 如前所述),十博体育备用网址会看到一系列的变化,在公关,创造了 yz,这会让人困惑.

需要注意的一件事是,如果合并基数相当老, 比较的左边可能是组件的非常旧的版本. 为了解决这个问题, 将基本分支合并(或重基)到特性分支将解决这个问题, 如上所述.

补丁版本

如果色系搜索一个合并基,但没有找到, 它会提示你创建一个“补丁构建”. 这种情况通常发生在你第一次安装chrompro时,你没有针对旧版本的版本, 历史提交(类似于提交) x 如上图所示).

彩色命令行有一个特殊的选项 ——patch-build = $...美元的基础 哪一个是为了这个目的. 它的作用是:

  1. 在git repo中找出head和base之间的merge base提交.
  2. 检查提交和更新依赖项
  3. 为该提交运行一个彩色构建, 标记到服务器是一个特殊的“补丁”构建(所以它不影响 用户界面测试 Baselines).
  4. 将存储库恢复到以前的状态.

本质上,十博体育备用网址是在追溯创建合并基础构建, 所以十博体育备用网址有可以比较的东西.

友情链接: 1 2 3 4 5 6 7 8 9 10