本文由Anna anna-che和Ksenia KseMish撰写 。像往常一样，我们积极采用测试布局的原因之一是耙。 我们踩到了一个漏洞，该漏洞在Chrome的下一次更新后开始出现。 事实证明，在3小时内，用户无法通过我们的网上银行的个人帐户从帐户中转帐资金。 所有这些都是由于在新版本的浏览器中，将资金从一个帐户转移到另一个帐户的形式已经成为现实。
类似的错误是无害的。 例如，一个知名的服装品牌也遇到了这种情况。 由于对布局的测试不足，该品牌网站的用户长时间没有使用“了解更多”按钮，而是看到了“学习痛苦...”。
按钮上的铭文当然是接近事实的，那里的价格确实让人痛苦，但这显然不是网站创建者想要的。 通常，无论造成什么后果（不便或微笑），都必须监视和纠正此类时刻。
意识到了这些问题，我们采用了产品设计师进行强制性设计审查的做法，但当时还没有。 事实证明，并非所有团队都有专门的设计师，或者他们没有足够的时间，或者更糟的是，前台和设计师无法采用通用的方法来布局页面，表单或元素。
无需三思而后行，我们开始寻找各种选项，以尽可能减少布局缺陷和Front VS Designer的对峙。 研究了自动化测试布局和收集锥体的可能做法和工具后，我们实现了以下方法。
关于我们的简要介绍：
现在，我们正在开发一个产品，超过20个Scrum团队正在工作，每个团队都负责某种功能，同时我们尝试维护产品本身的单一样式和设计-视觉呈现，主要元素的布局等。
关于浏览器的用户分布，今天我们的用户使用（值取整）：
- 60％铬
- 30％-Firefox，
- 10％-其他浏览器。
我们使用Akita BDD框架（Java + Cucumber + Selenide）测试了功能，我们在此处进行了介绍 。
首先，我们想通过前端与设计人员之间的协议解决问题。 在创建功能模型的初始阶段，前端和设计人员共同描述“合同”。 在此合同中，它们描述了元素排列，其样式，距离等的所有排列。 因此，当检测到布局与页面布局不匹配时，这些家伙将不必长时间找出谁是对的，谁应该归咎于谁。
他们在galen-spec文件中描述了他们的安排。
什么是盖仑规格？
为了自动化布局测试，从而最大程度地减少缺陷数量，我们决定实施Galen Framework工具。 它仅基于.spec文件（规范或我们称为“合同”）。 而且它很容易与Selenium测试集成。
在设计人员和前端人员草拟“合同”之后，测试人员根据Galen的要求在该文件的基础上形成一个.spec文件。 该框架使用自己的语言编写验证规范。
.spec文件由什么组成？
从逻辑上讲，它可以分为两个部分：
1.对象定义在这里，我们需要指定页面上的对象-页眉，页脚，菜单，内容等。 通常，我们列出要检查的主要元素，给它们命名并定义定位符。
@objects-页面上的元素（可以使用CSS，XPATH，ID）
2.定义定位符后，必须定义特定对象的样式和规格。 为此，我们使用
对象规格说明的一部分，在其中进行了详细描述，例如，我们的文本块（描述文本）位于描述表单的内部，标题下方并包含某些文本。
主要部分 -对于每个描述的元素，@objects描述验证参数。
* galen规范语言对主要部分的缩进敏感，因此请特别注意这一点并注意选项卡：)因此，由前端与设计者之间订立的“合同”，并转换为Galen语言，使我们能够自动检查元素的位置和内部内容，以及适应性和跨浏览器兼容性。
快速入门示例
- 我们描述特定页面的元素，并使用Galen Spec语言检查.spec文件，并将这些规范放入包装中。
- 我们将参考屏幕截图添加到规格/图像包中
- 我们正在开发BDD，因此.feature文件中的脚本可能类似于以下内容：
- 通过通常的Cucumber Runner运行测试脚本。
在这种情况下，我们检查GitHub主页。 在最后一步，我们添加了布局验证。 类似的测试可以补充现有的功能测试，也可以单独运行它们。 如果在布局中发现任何不匹配的地方，那么我们将获得一张带有预期结果和结果以及它们之间的差异的图像。 整件事都附在cuckumber报告中。
报告中的差异如下：
错误=错误{[元素看起来不像“ ./akita-testing-template/src/test/resources/specs/images/registration-form.png”。 有10.47％的像素不匹配，但允许的最大值为10％]在这里我们看到检查失败，图像相差超过10％，并且所有这些颜色差异（黑色填充除外）是元素之间的差异。
如果元素完全相同，差异将显示为黑色。
最常见的问题是，在哪里可以获得参考屏幕截图？
答：我们可以从设计人员那里获得标准，也可以通过在prodov环境中运行测试来获得标准，我们认为这是标准。 我们从那里获取块的图片，将其进行比较，然后将其放在images文件夹中，规范将从此处将链接拉到它们。
我们使用这种方法有什么用
- 设法将烟雾测试的次数和时间减少了约20％，这是由于以下事实：将某些形式和类似元素的验证折叠为一项测试，该测试检查了它们的视觉成分并立即发现差异
- 现在我们可以确定我们的应用程序在所选浏览器中正确显示
- 知道适应性还可以，不会分开
- 进行了自动设计审查。
您可以在此处阅读有关编译galen-spec文件的文档
-galen-spec-language-guide 。
在上一届Selenium训练营中，我们讨论了使用Galen框架的技术方面，其功能和基本检查，我们将在博客上发表文章。
可以使用galen-spec和新步骤来验证我们进入
秋田图书馆的布局，该
图书馆 提供快速入门的
模板 ，并且我们还进行
电报聊天 ，您可以在其中询问您感兴趣的问题。
我们会回答。