Geekly articles weekly

Virto Commerce上的自动化Web界面测试

在开发的早期阶段，您可以根据给定的测试计划进行手动测试。 但是随着模块化体系结构的出现，当多个开发团队可以同时进行更改时，测试脚本的数量呈指数级增长。 手动驱赶它们变得越来越难。


在本文中，我们将讨论Virto Commerce怎样自动化重要业务场景的测试。

为什么要这样？


我将以我们的经验为例-一个小的CSS样式的编辑使“将产品添加到购物车”按钮在移动设备上不再可见。 不幸的是，以这种形式，它已经过测试并成功发布。 在许多这样的示例中，新功能，较小的更正和更正打破了重要的业务场景。 不幸的是，我们经常在发布后和从客户那里了解到它们。 为了避免这种情况，两年多前，我们开始在开发过程中实施端到端测试。 之后，大多数错误是在开发阶段发现的，而不是在战斗环境中发现的。

端到端正在从头到尾测试业务场景。 E2E测试在真实的浏览器中模拟真实的用户操作，就像真实的用户将使用该解决方案一样。

我们使用端到端测试：

  1. 控制回归
  2. 描述系统
  3. 用于集成到CI / CD

这包括确保所有模块正常且可预测地运行和协同工作。

端到端测试使我们能够涵盖未经单元测试和集成测试验证的应用程序部分。 这是由于以下事实：单元测试和集成测试涵盖了应用程序的各个部分，并测试了功能的孤立部分。 即使这些部分单独工作良好，也不能完全确定它们是否可以一起工作。 因此，在单元和集成之上存在一组E2E测试，使我们能够以最完整的方式测试整个解决方案。



编写和运行端到端测试需要时间和资源。 例如，Google提供了70/20/10的分离度：70％的单元测试，20％的集成测试和10％的E2E测试。 每个项目的确切组合都将有所不同，但通常应保留金字塔的形状。

端到端测试并不简单，一开始开发和维护起来似乎很昂贵。 在Virto Commerce，我们一直在努力简化开发过程，并在发布新版本时降低支持E2E测试的成本。 我们希望我们的解决方案能够帮助您简化项目中端到端的使用。

良好的用户故事-几乎可以进行端到端测试


您经常会听到编写E2E测试很费时间；它们很难维护。 是的，是这样，它们不容易以与文档相同的方式进行维护。 为什么不让它们成为开发过程和编写文档的一部分，从而捕获业务场景。

创建端到端始于对用户故事的描述。 我们在此阶段准备工作的精心程度，对于开发团队来说，编写E2E测试非常简单，该测试将证明在实现此方案时所有系统都可以正常工作。

用于将商品添加到购物车的按钮的用户案例示例：

GIVEN I am signed in to the storefront AND Some product page is open (/product-name) AND my cart is empty WHEN I click to the "Add" button on the item with the following parameters: THEN I should see a dropdown menu where I can choose from 1 to 10+

然后变成以下测试：



一段时间后，技术作家或新的开发团队无需阅读文档，而是可以使用测试来运行并在真实的浏览器中查看已实现的脚本或自动录制视频教程。

简易-安装和配置量角器


作为测试工具，我们选择了Protractor，这是专门为AngularJS Web应用程序开发的开源E2E测试自动化系统。

量角器是基于WebDriverJS构建的Node.js程序。 量角器作为解决方案集成商，结合了Node.js，Jasmine，Selenium，Mocha，Cucumber和Web等强大技术。



量角器了解AngularJS，这使编写测试变得更加容易，而无需花费时间等待AngularJS项目启动，刷新页面等。...经验表明，开发人员的进入门槛非常低。
使用npm全局安装Protractor：

 npm install -g protractor

webdriver-manager是一个实用程序，可轻松配置Selenium Server实例。 Selenium Server-将用于在测试和真实环境之间传输命令。

运行以下命令以安装或下载：

 webdriver-manager update

并运行：

 webdriver-manager start

此命令将启动Selenium Server并打开一个用于显示日志的窗口。 量角器将请求发送到该服务器以控制浏览器。

量角器已准备就绪。 在主站点上可以找到有关编写测试基本步骤的更详细说明。

项目的正确结构


端到端测试始终与应用程序或主题位于同一存储库中。
我们拒绝使用外部E2E测试服务，因为看起来简单，这些服务使在本地计算机上启动测试和后续维护变得复杂。 代码和测试位于不同的物理位置，这导致开发人员忘记更新它们。

在一个存储库中查找应用程序代码并进行测试，使维护和维护项目变得更加容易。

一个基本的例子可以在这里找到 。

该项目将创建具有以下结构的E2E文件夹，该文件夹使用“页面对象”来组织测试。

 E2E/ |--cart | |--cart.pageObject.js | |--*.spec.js |--home | |--home.pageObject.js | |--*.spec.js |--conf.js

  • conf.js-配置文件位于根目录
  • 为每个接口对象创建自己的文件夹，该文件夹位于其中
    • pageObject文件来描述页面上的元素
    • 几个规格文件-测试所在的位置


在项目中，使用：

  • baseUrl-允许您使用测试来测试不同的环境
  • 参数-用于在页面上查找关键元素或填写表格



github.com/VirtoCommerce/vc-storefront/blob/master/VirtoCommerce.Storefront.Test/e2e/conf.js#L21



github.com/VirtoCommerce/vc-storefront/blob/master/VirtoCommerce.Storefront.Test/e2e/conf.js#L29

然后，IT管理员可以在DEV和QA环境的自动模式下在Jenkins中配置启动时，由IT管理员更改这些参数。

 protractor conf.js --baseUrl=https://some-url.azurewebsites.net/--params.api.endpoint=https://some-admin-url.azurewebsites.net

优化页面上的查找元素


量角器提供了非常灵活的方法来查找页面上的元素：

  • 绑定
  • 按型号
  • 中继器
  • by.className
  • by.css
  • by。选择（）
  • by.partialButtonText（）
  • ...

但是在最近的项目中，我们进入了模型，参与测试的元素被标有带有量角器前缀的特殊类标记。 在测试中，这些元素由byclassName查找。

这简化了测试的维护和进行更改，因此程序员或自动化工具可以确定参与E2E测试的元素已更改。

我们正在测试哪些浏览器


默认情况下，所有进程都配置为在Chrome浏览器中运行测试。 正如我们在Chrome中使用端到端测试的经验所表明的那样，它使我们能够识别大多数问题，同时又不会使测试的编写变得复杂。

如果您需要在多个浏览器中进行测试，则一方面非常简单，另一方面，在针对不同浏览器的驱动程序实现中，配置方面存在困难，并且存在错误。

在各种客户端项目中，我们还在Firefox，Safari和IE中进行了测试。 Firefox测试实际上是在Chrome中复制结果。 但是在Safari和IE中启动E2E需要设置系统，打开端口，禁用安全性和编辑注册表，但这自动揭示了应用程序中脚本的显示和不兼容的许多问题。

要在浏览器中添加测试，您需要下载并安装必要的WebDriver。

并在配置文件中添加一个新的段multiCapabilities：

 exports.config = { … multiCapabilities: [ { 'browserName' : 'chrome' }, { 'browserName' : 'firefox' } ], … };

由于现代Web应用程序支持以不同的分辨率工作，因此在编写测试时应考虑到这一点。

量角器可让您针对不同的屏幕分辨率运行测试。

为此，有一个选项可以通过browser.driver.manage（）。Window（）。SetSize设置屏幕大小。 在此示例中，我们将屏幕尺寸设置为1600 x 800。

 exports.config = { … capabilities: { 'browserName': 'chrome' }, onPrepare: function() { browser.driver.manage().window().setSize(1600, 800); }, … };

或通过配置文件中的multiCapabilities部分。 在此示例中，我们将在Chrome浏览器中针对三种不同的分辨率运行测试。

 multiCapabilities: [ { 'browserName': 'chrome', 'chromeOptions' : { args: ['--lang=en', '--window-size=1920,1080'] }, specs: ['specs.js'] }, { 'browserName': 'chrome', 'chromeOptions' : { args: ['--lang=en', '--window-size=1680,1050'] }, specs: ['specs.js'] }, { 'browserName': 'chrome', 'chromeOptions' : { args: ['--lang=en', '--window-size=1600,900'] }, specs: ['specs.js'] }]

E2E是文档的一部分。


再一次，E2E很好地作为文档的一部分，展示了开发团队所做的工作。 新的开发团队或技术作家可以运行测试并实时观看已实现的脚本。 因此，记录新员工如何运行这些测试。

CI / CD集成


任何测试都应具有相关性并定期运行。 如果不这样做，则您不应该浪费时间编写测试，它们将在几周内变得一文不值，并且从头开始重写它们会变得更加容易。

我们将E2E测试集成到CI / CD中并使E2E成为部署过程的一部分，迈出了重要的一步。

通过集成在CI / CD中，您可以针对DEV和QA环境自动运行E2E测试，以提供反馈并了解即使在进行了很小的更改后系统仍可正常运行。 如果决定被打破，请提供信息，说明何时何地发生了什么变化。

首先，当其中一个模块被更新并且新版本进入QA环境时，将启动测试。

其次，E2E测试会在夜间按计划在自动模式下的DEV和QA环境中运行。

第三，如有必要，开发人员自己可以根据需要运行测试。
根据启动结果，从开发团队到客户的所有项目参与者都会收到一封电子邮件，其中包含有关测试结果的HTML报告。

重要的是要注意整个项目团队必须获得有关测试结果的信息。 一方面，这给开发团队带来了信心，另一方面又使客户的期望得到管理。 开发团队可以在意识到主要业务方案正在工作的同时，更快地进行更改。 客户会收到有关项目质量的信息，即大多数问题在发布前就已确定。 即使通过测试确定了问题并推迟了发布，也会出现有关确切中断的信息以及纠正工作的进行方式。

为了生成报告，我们使用了protractor-jasmine2-html-reporter插件（https://github.com/VirtoCommerce/protractor-jasmine2-html-reporter）的修改版。 该插件生成HTML报告，并插入内联元素的屏幕截图。

安装非常简单：

  1. 安装protractor-jasmine2-html-reporter
  2. 将protractor-jasmine2-html-reporter添加到项目
  3. 关于准备方法的连接报告

 var HtmlScreenshotReporter = require('protractor-jasmine2-html-reporter'); var reporter = new HtmlScreenshotReporter(self.options); var name = browser.suite; self.options.reportTitle = name + '-report.html'; jasmine.getEnv().addReporter(reporter);



不断完善工艺


不断进行团队合作，以降低成本并提高E2E测试的开发和支持速度。

培训和审查测试编写过程。 查看可以使用的新组件和服务。

例如，我们正在考虑使用Cucumber连接选项。 Cucumber是用于运行以简单语言编写的自动化测试的工具。

结论


端到端测试不是那么简单，乍看起来维护起来很昂贵，但是它们非常有价值，因为它们可以指示重要业务场景的运行状况。

根据在Virto Commerce项目中使用端到端测试的经验，我们可以得出以下结论：

  • 编写E2E是开发过程的一部分。 这非常重要，因为它可以测试业务流程和整个解决方案的工作。 在DEV和QA阶段而不是在战斗环境中检测到大量错误。
  • 测试和代码应位于同一存储库中，并且可供开发人员使用。
  • 端到端测试的质量取决于用户故事的描述；如果编写正确，则开发团队可以更轻松地创建端到端测试。
  • E2E测试可以充当文档并记录编写的脚本。
  • E2E测试应在DEV和QA环境中连续自动运行。 如果您没有自动化启动，那么您就不要浪费时间进行测试，它们将在几周内变得毫无价值。
  • 测试结果应提供给所有项目参与者。 这给出了正在发生的情况的图片。
  • 端到端不是所有问题的100％解决方案。 遵循70/20/10规则：70％的单元测试，20％的集成测试和10％的E2E测试
  • 不断进行团队合作，以降低成本并提高E2E测试的开发和支持速度。

参考文献


www.protractortest.org

AngularJS的量角器-编写端到端测试从未如此有趣

github.com/angular/protractor/blob/master/docs/page-objects.md

github.com/VirtoCommerce/vc-storefront/tree/master/VirtoCommerce.Storefront.Test/e2e

拒绝更多端到端测试testing.googleblog.com/2015/04/just-say-no-to-more-end-to-end-tests.html

Source: https://habr.com/ru/post/zh-CN418293/

More articles:


All Articles