Robotframework的SeleniumLibrary的AngularJS/Angular扩展

导航

已验证详情

这些详情已由PyPI验证
维护者
emanlove 的 Gravatar emanlove marketsquare 的 Gravatar marketsquare

未验证详情

这些详情尚未由PyPI验证
项目链接
元数据
  • 许可证： Apache软件许可证（Apache许可证2.0）
  • 作者： Zephraph, Ed Manlove
  • 标签 robotframework, 测试, 测试自动化, angular, selenium, webdriver
分类

项目描述

AngularJS和Angular扩展到Robotframework的SeleniumLibrary。AngularJSLibrary主要提供处理<强>等待的功能，从而解决测试基于Angular的网站时的时序问题。库通过提供隐式等待，然后是等待angular的显式关键字来实现这一点。

关于此库

尽管AngularJSLibrary的名称中包含JS，但它支持针对Angular 2.0+（仅称为Angular）和Angular 1.0（也称为Angular JS）进行测试。

此库被认为已成熟且功能完整。通过Robot Framework社区Slack提供持续支持。因此，它可能看起来被遗弃或忽视，但它并不是。

<强>请仔细阅读此README的全文。它涵盖了如何配置和将库导入到测试脚本中，使用和理解其关键功能，以及故障排除和调试信息。

安装

要安装<强>AngularJSLibrary，请运行

pip install robotframework-angularjs

或者，从源码安装

python setup.py install

识别 Angular 根元素

在导入库之前，必须识别 Angular 根元素或根组件。更多关于

以下是几个 Angular 网站及其对应的根元素或组件的示例。第一个示例来自 AngularJS.org PhoneCat 教程。基本 html 代码是

<html lang="en" ng-app="phonecatApp">
  <head>
    <!-- ... -->
  </head>
  <body>

    <div class="view-container">
      <div ng-view class="view-frame"></div>
    </div>

  </body>
</html>

在 PhoneCat 教程中，带有 ng-app 属性的 html 元素是根元素。因此，对于这个网站，根选择器将是 [ng-app]。下一个示例是 angular.io 网站上的 Angular 入门教程。它的主要 html 看起来像

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- ... -->
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>

这里，根组件是 app-root 元素，因此这个网站的根选择器将是 app-root。最后一个示例是 Angular.io 组件开发工具包 (CDK) 中的 对话框 UI 组件示例标签。

<!DOCTYPE html><html lang="en-US"><head>
<!-- ... -->
</head>


<body class="docs-app-background">
  <material-docs-app></material-docs-app>
  <!-- ... -->

</body></html>

对话框组件示例页面的根组件是 material-docs-app 元素。根选择器将是 material-docs-app。

现在我们将使用根选择器来导入库。

导入库

导入库的正确名称是 AngularJSLibrary。在导入 AngularJSLibrary 之前，您需要包含 SeleniumLibrary。两个库选项中的第一个是 root_selector。所以使用我们的第一个示例，上面 AngularJS.org 的 PhoneCat 教程，我们的导入可能如下所示：

*** Settings ***
Library    SeleniumLibrary
Library    AngularJSLibrary    root_selector=[ng-app]

*** Test Cases ***
Search Through The Phone Catalog For Samsung Phones
    Open Browser  http://angular.github.io/angular-phonecat/step-14/app  Chrome
    Input Text  //input  Samsung
    Click Link  Samsung Galaxy Tab™
    Element Text Should Be    css:phone-detail h1    Samsung Galaxy Tab™

由于 root_selector 参数的默认值是 [ng-app]，对于 PhoneCat 教程，我们不需要指定 root_selector，可以写成如下库导入：

*** Settings ***
Library    SeleniumLibrary
Library    AngularJSLibrary

*** Test Cases ***
Search Through The Phone Catalog For Samsung Phones
    Open Browser  http://angular.github.io/angular-phonecat/step-14/app  Chrome
    Input Text  //input  Samsung
    Click Link  Samsung Galaxy Tab™
    Element Text Should Be    css:phone-detail h1    Samsung Galaxy Tab™

如果您收到“无法找到根选择器 …”错误，则应重新检查您的 root_selector。请注意，与 SeleniumLibrary 一起使用的定位符不同，root_selector 不应 包含 css 定位符前缀。

第二个库选项 ignore_implicit_angular_wait 是一个标志，当设置为 True 时，AngularJS 库在通过定位符查找元素时将不会等待 Angular $timeouts 或 $http 调用完成。默认值为 False。

如果测试的应用程序从非 Angular 页面启动， 例如一个不是 Angular 的登录页面，它会导致 Angular 应用程序，那么应该从关闭隐式 Angular 等待开始。例如：

*** Settings ***
Library    SeleniumLibrary
Library    AngularJSLibrary    ignore_implicit_angular_wait=True

*** Test Cases ***
Login Into Non Angular Page
    # ...

等待功能的用法

AngularJS 库提供两种类型的等待：一种内置的隐式等待，在使用定位符策略时自动等待，然后是一个显式关键字，可以在脚本中调用或写入。在上面的教程和示例中，脚本中没有显式等待调用。这里，脚本依赖于隐式等待，默认情况下是开启的。这意味着一旦导入库，就会启用等待。

这可以通过导入库时关闭隐式等待并使用库的显式 等待 Angular 关键字来演示。

*** Settings ***
Library    SeleniumLibrary
Library    AngularJSLibrary    ignore_implicit_angular_wait=True

*** Test Cases ***
Search Through The Phone Catalog For Samsung Phones
    Open Browser  http://angular.github.io/angular-phonecat/step-14/app  Chrome
    Wait For Angular
    Input Text  //input  Samsung
    Wait For Angular
    Click Link  Samsung Galaxy Tab™
    Wait For Angular
    Element Text Should Be    css:phone-detail h1    Samsung Galaxy Tab™

在使用隐式等待功能时，预计大多数需要等待的情况将由这个“隐藏”的隐式等待“自动”处理。因此，如果检查您的测试用例，您可能看不到很多，甚至没有 等待 Angular 关键字，而是看到没有在动作之间包含“等待”关键字的动作关键字。不过，有时需要显式调用等待 Angular。例如，当使用不使用定位符策略的 SeleniumLibrary 关键字时，如 Alert Should Be Present 和 Page should contain，或者如果您使用 webelement。

除了在库导入时关闭隐式等待的选项外，您还可以使用具有参数 ${True} 的 Set Ignore Implicit Angular Wait 关键字将其关闭。

理解和验证 Angular 等待

虽然等待看起来像是“魔法”，但它们并不是。让我们深入了解等待是如何实现的，并试图理解它们是如何工作的。这些等待，无论是隐式还是显式的，都会检查我所说的“angular队列”。技术上，它是检查Angular是否“完成渲染且没有未完成的$http或$timeout调用”。它通过检查AngularJS应用程序的notifyWhenNoOutstandingRequests函数来实现。对于Angular应用程序，库会检查Angular Testibility服务上的isStable函数。

这可以通过设置日志级别为DEBUG或TRACE在日志文件中看到。重新运行PhoneCat演示（robot --loglevel DEBUG demo_phonecat.robot），你应在日志文件中看到

20:01:04.658        INFO    Typing text 'Samsung' into text field '//input'.
20:01:04.658        DEBUG   POST http://localhost:50271/session/f75e7aaf5a00c717ae5e4af34a6ce516540611dae4b7f6079ce1a753c308cde2/execute/sync {"script": "...snip..."]}
20:01:04.661        DEBUG   http://localhost:50271 "POST /session/f75e7aaf5a00c717ae5e4af34a6ce516540611dae4b7f6079ce1a753c308cde2/execute/sync HTTP/1.1" 200 14
20:01:04.661        DEBUG   Remote response: status=200 | data={"value":true} | headers=HTTPHeaderDict({'Content-Length': '14', 'Content-Type': 'application/json; charset=utf-8', 'cache-control': 'no-cache'})
20:01:04.661        DEBUG   Finished Request

由于空间原因，我在POST执行/同步行上剪掉了核心脚本。你应该会看到这些行重复多次。这是库正在执行的轮询，以检查应用程序是否准备就绪进行测试。它会重复查询，直到返回true，或者会重复到“放弃”超时。如果它放弃了，它将以静默和优雅的方式失败，继续执行它等待执行的操作。对于此库的用户来说，看到并理解这一基本功能是很重要的。因为主要使用的是隐式等待，所以关键是要了解如何检查库是否正常工作以及它在等待时的状态。

当使用AngularJS库时，如果所有等待超时，则AngularJS库可能无法在测试的应用程序中正确等待。回想一下之前概述的所有信息，这告诉你Angular应用程序一直在忙碌。这可能会根据angular应用程序的设计方式而变化。这也可能仅影响应用程序的一部分，因此测试应用程序的各个部分是很重要的。

其他调试技术

除了使用AngularJS库之外，还可以使用浏览器的DevTools来测试并演示库的核心操作。为了明确，这并不是库代码，而是类似JavaScript的代码，你可以在robot之外使用它来展示，例如给开发团队展示库在查询应用程序时看到的内容。当查看测试中的应用程序时，打开DevTools，最好是在Chrome中，然后在控制台标签页中输入以下内容：

如果应用程序是用AngularJS或Angular 1.x构建的，则脚本为

var callback = function () {console.log('*')}
var el = document.querySelector('[ng-app]');
var h = setInterval(function w4ng() {
    console.log('.');
    try {
        angular.element(el).injector().get('$browser').
            notifyWhenNoOutstandingRequests(callback);
    } catch (err) {
      console.log(err.message);
      callback(err.message);
    }
  }, 10);

对于Angular v2+，脚本为

var callback = function () {console.log('*')}
var el = document.querySelector('material-docs-app');
var h = setInterval(function w4ng() {
    console.log('.');
    try {
        var readyToTest = window.getAngularTestability(el).isStable();
    } catch (err) {
      console.log(err.message);
      callback(err.message);
    }
    if (!readyToTest) {
      callback()
    } else {
      console.log('.');
    }
  }, 10);

这将显示一个.，当“稳定”时。否则，当“忙碌”时会显示一个*。在控制台提示中输入clearInterval(h);来关闭JavaScript间隔并停止此脚本。[Chrome浏览器是首选，因为Chrome的DevTools控制台中的重复输出将显示为单行，带有计数，而不是每条输出一行，这使得它更容易查看和阅读。]我本人已经在使用这个库以及向各种Angular开发者演示设计/实现如何阻止可测试性时使用过这种方法。

额外的Angular特定定位策略

注意：不再建议使用这些Angular特定定位策略。尽管它们是有效的，但SeleniumLibrary的定位策略在大多数情况下比这些策略更充分，也更易于使用。出于向后兼容性原因，这些将保留，但强烈建议不要使用。

库提供了三种新的定位策略，包括绑定、模型和重复器。

例如，你可以使用以下方式查找Angular ng-binding：

Get Text  binding={{greeting}}

或使用部分匹配

Get Text  binding=greet

或简单地使用绑定{{…}}符号

Get Text  {{greeting}}

你也可以通过模型查找元素

Input Text  model=aboutbox  Something else to write about

最后是重复查找策略。其通用形式为 repeater=some ngRepeat directive@row[n]@column={{ngBinding}}。在这里，我们指定了指令以及行（一个基于零的索引）和列（一个ngBinding）。使用这种完整格式可以返回匹配指令、行和列绑定的元素（如果存在）。用户不需要指定行和列，但可以选择指定全部、一个或两个，或者都不指定。在这种情况下，定位器可能返回元素列表，甚至元素列表的列表。此外，行和列的顺序无关紧要；使用 repeater=baz in days@row[0]@column=b 与 repeater=baz in days@column=b @row[0] 相同。

获取帮助

如果您需要关于AngularJSLibrary、SeleniumLibrary或Robot Framework使用的帮助，请在Robot Framework社区内寻求帮助 Slack。

关键字文档

关键字文档可以在Github项目页面找到。

测试

有关我们如何测试AngularJSLibrary的信息，请参阅Testing.rst文件。

参考文献

SeleniumLibrary：Robot Framework的Web测试库

Protractor：Angular应用的端到端测试框架

isStable参考

Angular可测试性服务

项目详情

已验证详情

这些详情已由PyPI验证
维护者
emanlove 的 Gravatar emanlove marketsquare 的 Gravatar marketsquare

未验证详情

这些详情尚未由PyPI验证
项目链接
元数据
  • 许可证： Apache软件许可证（Apache许可证2.0）
  • 作者： Zephraph, Ed Manlove
  • 标签 robotframework, 测试, 测试自动化, angular, selenium, webdriver
分类

发布历史 发布通知 | RSS源

此版本

1.0.0

0.0.10

0.0.9

0.0.8

0.0.7

0.0.7rc1 预发布

0.0.6

0.0.5

0.0.4

0.0.3

0.0.2

0.0.1

下载文件

下载适用于您的平台文件。如果您不确定选择哪个，请了解更多关于安装包的信息。

源分布

此版本没有可用的源分布文件。请参阅生成分布存档的教程。

构建分布

robotframework_angularjs-1.0.0-py3-none-any.whl (17.4 kB 查看散列)

上传时间 Python 3

支持者：

AWS AWS 云计算和安全赞助商 Datadog Datadog 监控 Fastly Fastly CDN Google Google 下载分析 Microsoft Microsoft PSF赞助商 Pingdom Pingdom 监控 Sentry Sentry 错误记录 StatusPage StatusPage 状态页面