我们如何评估 Web 应用程序前端自动化的难度？

Question

是否有任何通用指南可以说明自动化 Web 应用程序前端的难度？

例如，这样的准则之一可能是所有 "critical" 元素都具有值不经常更改的 ID 属性。还有其他类似的准则吗？

Answer 1

这是您问题的答案：

老实说，没有这样的官方指南可以证明 Web 应用程序的前端是否易于自动化。但是这个行业的行业中坚力量有一些建议如下：

如果您的 Web 应用程序是使用 HTML 5 构建的，则已观察到纯 Selenium 与 gecko、chromedriver 或 IEDriverServer 配合使用效果最佳。
如果您的 Web 应用程序是使用 AngularJS 构建的，已观察到 Protector/Jasmine 组合效果更好。
现在关于您期望的准则 all "important" elements have id attributes whose values don't change "frequently". 是基本要求之一。根据最佳编程实践，网页上的所有元素都应具有唯一的 id、name 等属性。但实时观察到某些元素在 HTML DOM 中没有唯一的 id 或 name。有时观察到元素具有动态 id。在这些情况下，我们可能不得不跳出框框来考虑其他定位器的帮助，例如linkText、css 或 xpath 与 regex 一起再次唯一标识一个元素。

如果这回答了您的问题，请告诉我。

Answer 2

这确实是一个非常棘手的问题。我会试一试，但请注意，我几乎不会用这个来划伤表面。

免责声明： 我现在写的内容，尤其是考虑到网络移动的速度 forward/changing（新 W3C 标准、新框架、基于相同旧编程原则的新抽象级别）很可能会在几年内过时或成为不良做法。

WebElement locators (my personal take on the matter)

当你给出改变 ids 和 classes 的例子时，我不能否认我翻了翻白眼。但是你给了我们第一个分类：

对生产代码拥有提交权限的 QA 自动化工程师：

我们身处 21 世纪，处于人类技术最进步的时代，我们仍然认为我们应该为 QA 保留提交权限。妈的！

QA 自动化团队应该根据先前深思熟虑的 & [=73] 创建他们自己的自动化属性集=]记录策略。

QA 自动化团队应该有可能在 PROD 代码中 add/remove/change IDs、classes、attributes ，根据他们的自动化议程的要求。

你的WebElement映射应该看起来像这样（这是我写的CucumberJS元素模块）：

'Device Details of Android phone':'li[connectqa-device="android-phone"] a.detail-button',
'Device Details of Android tablet':'li[connectqa-device="android-tablet"] a.detail-button',
'Device Details of iOS phone':'li[connectqa-device="ios-phone"] a.detail-button',
'Device Details of iOS tablet':'li[connectqa-device="ios-tablet"] a.detail-button',
'Device Details of Windows laptop':'li[connectqa-device="windows-laptop"] a.detail-button',
'Device Details of Windows PC':'li[connectqa-device="windows-pc"] a.detail-button',

以上WebElements具有以下特性：同质、优化（链接的标签不超过2个）、scalable, dynamic (connectqa-device 属性的值由 { deviceType } 在 ng-repeat (Angular web app)), easy to identify/use when writing automated test-cases due to the obvious scheme.

您的 WebElement 映射不应如下所示：

'add friend email input error mark':'#scroller-bulk-invite div.form-group.mb10.wrapper.email-f.error div.invalid',
'add friend name input error mark':'#scroller-bulk-invite div.form-group.wrapper.name-f.error div.invalid',
'plus button':'#statusStaging div.staging-holder div.devices-staging.ng-isolate-scope ul.actions li'

只能访问实时代码的 QA 自动化工程师：

我们来到一个新的干草叉：您的开发人员是否想要实施您之前 深思熟虑 和 记录的 WebElement 属性策略？

如果否，那么您可以尽力创建最好的 WebElement 定位器策略，利用您所掌握的资源。如果 YES，那么我们很幸运。有人刚刚卸下了你肩上的重担。现在您可以专注于其他事情，例如优化自动化线束。

Web Frameworks (especially JS ones)

如今大多数 Web 框架通过不同的 directives/components/decorators/etc 将大量逻辑注入 HTML。其中一些将在自动化测试的不同时间运行或在整个测试执行期间对您可见。

！！！注意： 我强烈建议您在创建 WebElement 映射时远离这些。您将自己暴露在以下情况中：

flaky tests（相对于$( document ).ready()标记，这些属性大部分是在不同的时间通过JS添加的。如果你没有严重 explicit/implicit 等待 在你的方法中，期待一些严重在你的测试中出现问题）;
'Element not found' 错误（当今框架中的这些 directives/components/decorators 很容易发生变化。开发人员可能只是 add/change/remove您在映射中提到的一个特定的映射和 PUUUFF!，您的回归转到 s@%&。）

示例： (Angular) .ng-scope、.ng-if、.ng-click 等。这些应该从不在您的 WebElement 定位器中。否则，你自讨苦吃！

待续...

我们如何评估 Web 应用程序前端自动化的难度？

How can we assess the difficulty of automating the front-end of a web app?

html

javascript

selenium

watir-webdriver

protractor