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

我是测试自动化的新手。我想使用Selenium来测试AngularJS完成的web应用程序。有人能建议我如何从一个基本应用程序开始吗？你有AngularJS应用程序的例子吗。

对于e2e测试AngularJS应用程序，有一个专门的包，名为，它本身是一个方便的包装器，围绕着

WebDriverJS

-javascript selenium绑定

---

对于e2e测试AngularJS应用程序，有一个名为的专门包，它本身就是

WebDriverJS

-javascript selenium绑定的方便包装器

---

一个很好的起点是。

我最近发现了一个名为GitHub的项目。它基于Selenium

WebDriver

实现了自己的

NgWebDriver

。我注意到的最重要的特性是，大多数基本方法在调用原始方法之前都要等待AngularJS脚本完成

请注意，我自己还没有尝试过，所以我无法判断它的工作情况，但它目前正在开发中，可能包含bug和缺少功能

---

希望有帮助。

我最近发现了一个名为GitHub的项目。它基于Selenium

WebDriver

实现了自己的

NgWebDriver

。我注意到的最重要的特性是，大多数基本方法在调用原始方法之前都要等待AngularJS脚本完成

请注意，我自己还没有尝试过，所以我无法判断它的工作情况，但它目前正在开发中，可能包含bug和缺少功能

---

希望能有所帮助。

以下两种预期条件可能会帮助您轻松测试有角度的站点

这将是代码中使用最多的预期条件：

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 animate在屏幕上移动对象，您将需要：

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;
        }
    };
}

公共静态预期条件angularAnimationsAreComplete（）{
返回新的ExpectedCondition（）{
@凌驾
公共布尔应用（WebDriver驱动程序）{
int animatingElements=driver.findElements（By.className（“ng animate”））.size（）；
返回animatingElements==0；
}
};
}

---

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

以下两个预期条件可能会帮助您轻松测试角度站点

这将是代码中使用最多的预期条件：

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 animate在屏幕上移动对象，您将需要：

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;
        }
    };
}

公共静态预期条件angularAnimationsAreComplete（）{
返回新的ExpectedCondition（）{
@凌驾
公共布尔应用（WebDriver驱动程序）{
int animatingElements=driver.findElements（By.className（“ng animate”））.size（）；
返回animatingElements==0；
}
};
}

---

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

谢谢，但我可以只使用Selenium来测试它吗？@Emna谢谢，嗯，你的意思是纯

WebDriverJS

？是的，我不太清楚这一点。我刚刚用Appium实现了移动自动化。我想了解一下，如果只使用selenium就可以测试angular js web应用程序，那该怎么办？如果是的话，有没有什么例子可以让我从它开始理解基本概念？@Emna如果你是从AngularJS端到端测试开始的，并且你对用javascript编写测试感到满意，那么量角器肯定是你的选择。您可以使用任何常规的selenium语言绑定，如

WebDriverJS

或java selenium、python selenium等，但是，量角器的独特之处在于它始终与Angular同步工作，知道何时准备就绪、页面已加载、没有未完成的http请求等，还有Angular特定的定位器，类似于.model的

或.repeater的
。在常规selenium绑定中，您需要额外的等待。@Emna当然，它仍然是一个网页和一个浏览器，您可以从常规selenium webdriver开始，选择一种您熟悉的语言。请记住，您经常会在预期条件下使用
WebDriverWait
。希望能有帮助。谢谢，但我能只用Selenium来测试吗？@Emna谢谢，你是说纯
WebDriverJS
？是的，我不太清楚。我刚刚用Appium实现了移动自动化。我想了解一下，如果只使用selenium就可以测试angular js web应用程序，那该怎么办？如果是的话，有没有什么例子可以让我从它开始理解基本概念？@Emna如果你是从AngularJS端到端测试开始的，并且你对用javascript编写测试感到满意，那么量角器肯定是你的选择。您可以使用任何常规的selenium语言绑定，如
WebDriverJS
或java selenium、python selenium等，但是，量角器的独特之处在于它始终与Angular同步工作，知道何时准备就绪、页面已加载、没有未完成的http请求等，还有Angular特定的定位器，类似于.model的
或.repeater的
。在常规selenium绑定中，您需要额外的等待。@Emna当然，它仍然是一个网页和一个浏览器，您可以从常规selenium webdriver开始，选择一种您熟悉的语言。请记住，您经常会在预期条件下使用
WebDriverWait
。希望有帮助。