我有一个基于 ASP MVC + AngularJS 的 SPA 应用程序，我想测试其用户界面。 目前我正在尝试使用 Selenium 和 PhantomJS 以及 WebKit 驱动程序。
这是一个样例测试页面 - 只包含一个元素。列表项 <li> 是通过服务器动态加载并由 Angular 绑定的。
<div id="items">
<li>text</li>
<li>text2</li>
</div>
我正在尝试通过一项测试，但是这一行代码出现了错误：
_driver.FindElements(By.TagName('li'))
这时还没有加载任何元素，而且_driver.PageSource中也不包含元素。
我该如何等待项目加载？请不要建议使用Thread.Sleep()
这将等待页面加载/ jquery.ajax（如果存在）和 $http 调用以及任何伴随的 digest/render 循环，将其放入实用函数中并等待。
/* C# Example
var pageLoadWait = new WebDriverWait(WebDriver, TimeSpan.FromSeconds(timeout));
pageLoadWait.Until<bool>(
(driver) =>
{
return (bool)JS.ExecuteScript(
@"*/
try {
if (document.readyState !== 'complete') {
return false; // Page not loaded yet
}
if (window.jQuery) {
if (window.jQuery.active) {
return false;
} else if (window.jQuery.ajax && window.jQuery.ajax.active) {
return false;
}
}
if (window.angular) {
if (!window.qa) {
// Used to track the render cycle finish after loading is complete
window.qa = {
doneRendering: false
};
}
// Get the angular injector for this app (change element if necessary)
var injector = window.angular.element('body').injector();
// Store providers to use for these checks
var $rootScope = injector.get('$rootScope');
var $http = injector.get('$http');
var $timeout = injector.get('$timeout');
// Check if digest
if ($rootScope.$$phase === '$apply' || $rootScope.$$phase === '$digest' || $http.pendingRequests.length !== 0) {
window.qa.doneRendering = false;
return false; // Angular digesting or loading data
}
if (!window.qa.doneRendering) {
// Set timeout to mark angular rendering as finished
$timeout(function() {
window.qa.doneRendering = true;
}, 0);
return false;
}
}
return true;
} catch (ex) {
return false;
}
/*");
});*/
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.support.ui.ExpectedCondition;
public class AdditionalConditions {
public static ExpectedCondition<Boolean> angularHasFinishedProcessing() {
return new ExpectedCondition<Boolean>() {
@Override
public Boolean apply(WebDriver driver) {
return Boolean.valueOf(((JavascriptExecutor) driver).executeScript("return (window.angular !== undefined) && (angular.element(document).injector() !== undefined) && (angular.element(document).injector().get('$http').pendingRequests.length === 0)").toString());
}
};
}
}
您可以通过以下代码在代码的任何位置使用它：
WebDriverWait wait = new WebDriverWait(getDriver(), 15, 100);
wait.until(AdditionalConditions.angularHasFinishedProcessing()));
public bool DomHasLoaded(IJavaScriptExecutor jsExecutor, int timeout = 5)
{
var hasThePageLoaded = jsExecutor.ExecuteScript("return document.readyState");
while (hasThePageLoaded == null || ((string)hasThePageLoaded != "complete" && timeout > 0))
{
Thread.Sleep(100);
timeout--;
hasThePageLoaded = jsExecutor.ExecuteScript("return document.readyState");
if (timeout != 0) continue;
Console.WriteLine("The page has not loaded successfully in the time provided.");
return false;
}
return true;
}
然后我们检查是否正在使用JQuery：
public bool IsJqueryBeingUsed(IJavaScriptExecutor jsExecutor)
{
var isTheSiteUsingJQuery = jsExecutor.ExecuteScript("return window.jQuery != undefined");
return (bool)isTheSiteUsingJQuery;
}
public bool JqueryHasLoaded(IJavaScriptExecutor jsExecutor, int timeout = 5)
{
var hasTheJQueryLoaded = jsExecutor.ExecuteScript("jQuery.active === 0");
while (hasTheJQueryLoaded == null || (!(bool) hasTheJQueryLoaded && timeout > 0))
{
Thread.Sleep(100);
timeout--;
hasTheJQueryLoaded = jsExecutor.ExecuteScript("jQuery.active === 0");
if (timeout != 0) continue;
Console.WriteLine(
"JQuery is being used by the site but has failed to successfully load.");
return false;
}
return (bool) hasTheJQueryLoaded;
}
public bool AngularIsBeingUsed(IJavaScriptExecutor jsExecutor)
{
string UsingAngular = @"if (window.angular){
return true;
}";
var isTheSiteUsingAngular = jsExecutor.ExecuteScript(UsingAngular);
return (bool) isTheSiteUsingAngular;
}
如果正在使用，则我们检查它是否已加载：
public bool AngularHasLoaded(IJavaScriptExecutor jsExecutor, int timeout = 5)
{
string HasAngularLoaded =
@"return (window.angular !== undefined) && (angular.element(document.body).injector() !== undefined) && (angular.element(document.body).injector().get('$http').pendingRequests.length === 0)";
var hasTheAngularLoaded = jsExecutor.ExecuteScript(HasAngularLoaded);
while (hasTheAngularLoaded == null || (!(bool)hasTheAngularLoaded && timeout > 0))
{
Thread.Sleep(100);
timeout--;
hasTheAngularLoaded = jsExecutor.ExecuteScript(HasAngularLoaded);
if (timeout != 0) continue;
Console.WriteLine(
"Angular is being used by the site but has failed to successfully load.");
return false;
}
return (bool)hasTheAngularLoaded;
}
在我们检查DOM成功加载之后，您可以使用这些布尔值进行自定义等待：
var jquery = !IsJqueryBeingUsed(javascript) || wait.Until(x => JQueryHasLoaded(javascript));
var angular = !AngularIsBeingUsed(javascript) || wait.Until(x => AngularHasLoaded(javascript));
您可以从protractor中挖掘有用的代码片段。该函数会阻塞，直到Angular完成页面渲染。这是Shahzaib Salim答案的一个变体，不同之处在于他正在轮询，而我正在设置回调。
def wait_for_angular(self, selenium):
self.selenium.set_script_timeout(10)
self.selenium.execute_async_script("""
callback = arguments[arguments.length - 1];
angular.element('html').injector().get('$browser').notifyWhenNoOutstandingRequests(callback);""")
将'html'替换为您的ng-app所在的任何元素。
WebDriverWait wait = new WebDriverWait(webDriver, timeoutInSeconds);
wait.until(ExpectedConditions.visibilityOfElementLocated(By.id<locator>));
在JS中，您可以使用wait方法，该方法会执行一个函数，直到它返回true
browser.wait(function () {
return browser.driver.isElementPresent(elementToFind);
});
waitForAngular方法，以确保Protractor等待自动直到Angular完成修改DOM。wait：Protractor会为您执行该操作。我写了以下代码，它帮助我解决了异步竞争条件失败的问题。
$window._docReady = function () {
var phase = $scope.$root.$$phase;
return $http.pendingRequests.length === 0 && phase !== '$apply' && phase !== '$digest';
}
Object result = ((RemoteWebDriver) driver).executeScript("return _docReady();");
return result == null ? false : (Boolean) result;
driver.switchTo().frame(0);
waitUntilVisibleByXPath("//h2[contains(text(), 'Creative chooser')]");
但它没有起作用，告诉我类似于“无法切换到框架。窗口已关闭”的内容。 然后我修改了代码为：
driver.switchTo().defaultContent();
driver.switchTo().frame(0);
waitUntilVisibleByXPath("//h2[contains(text(), 'Creative chooser')]");
之后一切都很顺利。 显然，Angular在处理iframe时出了点问题，就在加载页面后，当您期望驱动程序聚焦于默认内容时，它被一些已经被Angular删除的框架所聚焦。 希望这可以帮助到你们中的一些人。
如果您不想完全切换到Protractor，但是您想等待Angular，我建议使用Paul Hammants ngWebDriver（Java）。它基于protractor，但您不必进行切换。
我通过编写一个操作类来解决问题，在其中我等待Angular（使用ngWebDriver的waitForAngularRequestsToFinish()）然后执行操作（单击、填充、检查等）。
有关代码片段，请参见我对这个问题的回答
我已经根据D Sayar的答案实现了使用方法，这可能对某些人有帮助。您只需将那里提到的所有布尔函数复制到单个类中，然后添加下面的PageCallingUtility()方法。此方法调用内部依赖项。
在正常使用中，您需要直接调用PageCallingUtility()方法。
public void PageCallingUtility()
{
if (DomHasLoaded() == true)
{
if (IsJqueryBeingUsed() == true)
{
JqueryHasLoaded();
}
if (AngularIsBeingUsed() == true)
{
AngularHasLoaded();
}
}
}
window.qa是什么？ - BludShot