如何使用 selenium 测试 angular js web 应用程序？

Question

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

Answer 1

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

一个很好的起点是 Tutorial。

Answer 2

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

请注意，我自己还没有尝试过，所以我不知道它的效果如何，但它目前正在开发中，可能包含错误和缺乏功能。

希望对您有所帮助。

Answer 3

以下两个预期条件可能会满足您使测试 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);

最后，如果您使用 angular 动画在屏幕上四处移动事物，您需要这样：

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 将 class "ng-animate" 添加到它正在移动的所有元素。此条件将一直等到 class 不再应用于任何元素，或者换句话说，它将等到所有动画完成。

如何使用 selenium 测试 angular js web 应用程序？

How can i test an angular js web application with selenium?

testng

selenium

automated-tests

selenium-webdriver

e2e-testing