如何使用 selenium 测试 Angular js Web 应用程序？答案

【问题标题】：How can i test an angular js web application with selenium?如何使用 selenium 测试 Angular js Web 应用程序？
【发布时间】：2016-05-18 04:34:45
【问题描述】：

我是测试自动化的新手。我想使用 Selenium 来测试由 Angular js 完成的 Web 应用程序。有人可以向我建议如何从一个基本应用程序开始吗？你有一个角度 js 应用程序的例子吗？

【问题讨论】：

标签： selenium selenium-webdriver automated-tests testng e2e-testing

【解决方案1】：

以下两个预期条件可能会完成您轻松测试 Angular 站点所需的一切。

这将是您的代码中最常用的预期条件：

public static ExpectedCondition angularHasFinishedProcessing() {
    return new ExpectedCondition<Boolean>() {
        @Override
        public Boolean apply(WebDriver driver) {
            String hasAngularFinishedScript = "var callback = arguments[arguments.length - 1];\n" +
                    "var el = document.querySelector('html');\n" +
                    "if (!window.angular) {\n" +
                    "    callback('false')\n" +
                    "}\n" +
                    "if (angular.getTestability) {\n" +
                    "    angular.getTestability(el).whenStable(function(){callback('true')});\n" +
                    "} else {\n" +
                    "    if (!angular.element(el).injector()) {\n" +
                    "        callback('false')\n" +
                    "    }\n" +
                    "    var browser = angular.element(el).injector().get('$browser');\n" +
                    "    browser.notifyWhenNoOutstandingRequests(function(){callback('true')});\n" +
                    "}";

            JavascriptExecutor javascriptExecutor = (JavascriptExecutor) driver;
            String isProcessingFinished = javascriptExecutor.executeAsyncScript(hasAngularFinishedScript).toString();

            return Boolean.valueOf(isProcessingFinished);
        }
    };
}

它将等待 Angular 处于它认为该站点已准备好进行自动化测试的状态（这几乎是从保护程序代码库中窃取并用 Java 包装的）。不过，您需要设置脚本超时才能使其正常工作：

webdriver.manage().timeouts().setScriptTimeout(15, TimeUnit.SECONDS);

最后，如果您使用角度动画在屏幕上移动物体，您会想要这样：

public static ExpectedCondition angularAnimationsAreComplete() {
    return new ExpectedCondition<Boolean>() {
        @Override
        public Boolean apply(WebDriver driver) {
            int animatingElements = driver.findElements(By.className("ng-animate")).size();

            return animatingElements == 0;
        }
    };
}

Angular animate 将“ng-animate”类添加到它正在移动的所有元素中。该条件将一直等到该类不再应用于任何元素，或者换句话说，它将等到所有动画都完成。

【讨论】：

【解决方案2】：

对于 e2e 测试 AngularJS 应用程序，有一个名为Protractor 的专用包，它本身是WebDriverJS 的方便包装器 - javascript selenium 绑定。

Tutorial 是一个很好的起点。

【讨论】：

谢谢，但我可以只使用 Selenium 来测试吗？
@Emna 谢谢，好吧，你的意思是纯粹的WebDriverJS？
是的，我对此并没有什么大的想法。我刚刚将 Appium 用于移动自动化。我想知道是否可以仅使用 selenium 来测试 Angular js Web 应用程序？如果是的话，有什么例子可以让我从它开始理解基本概念吗？
@Emna 如果您从 AngularJS 端到端测试开始，并且对用 javascript 编写测试感到满意 - Protractor 绝对是您的选择。您可以使用任何常规的 selenium 语言绑定，例如 WebDriverJS 或 java-selenium、python-selenium 等，但是，Protractor 的独特之处在于它始终与 Angular 同步工作，知道它何时准备就绪、页面加载和没有未完成的 http 请求等，还有特定于角度的定位器，例如 by.model 或 by.repeater。在常规的 selenium 绑定中，您必须有额外的等待。
@Emna 当然，它仍然是一个网页和一个浏览器，你可以从普通的 selenium webdriver 开始，然后选择你喜欢的语言。请记住，您会经常将WebDriverWait 与预期条件一起使用。希望对您有所帮助。

【解决方案3】：

我最近发现了一个名为 jProtractor 的 GitHub 项目。它基于 Selenium WebDriver 实现了自己的 NgWebDriver。我注意到的最重要的特性是大多数基本方法在调用原始方法之前等待完成 AngularJS 脚本。

请注意，我自己没有尝试过，所以我无法判断它的效果如何，但它目前处于开发阶段，可能包含错误和缺少功能。

希望对你有帮助。

【讨论】：