在Selenium中使用JavaScriptExecutor处理Ajax调用?

我们在这个Designing Selenium Cucumber Framework系列中走得很远我们设计了PageObjectManager来管理PageObjectsFileReaderManager来管理  ConfigFileReaderJSonFileReader以及WebDriverManager来管理WebDriver但所有这些都有助于更好的代码管理和维护。

在本章中,我们将努力从Selenium测试执行中获得更好的测试结果。如果您想构建一个成功的测试自动化解决方案,您真正需要的是使其可靠并快速实现。影响Web自动化中这两个目标的最重要因素是您在每次页面交互后如何等待。无论是单击还是将鼠标悬停在Web元素上,执行javascript函数或模拟按键操作,都可能导致页面转换或ajax操作。在执行下一个操作之前,您需要等待此操作完成。如果等待时间过长,则会导致测试执行速度慢于需要的速度。如果您不等待或等待太少,则表现为一致或间歇性故障。

我们都知道,硒测试执行有时会间歇性地进行一些测试。当您尝试修复问题并尝试调试相同的方案时,它完全正常。大部分时间都是因为元素加载延迟而发生的。意味着Selenium尝试对元素执行任何操作,但它尚未在DOM中呈现。

我知道你一定在想,那么在这种情况下,Selenium已经有一个被称为Implicit-wait的特性,它总是等待元素加载并等待指定的时间。那么为什么我们在Selenium执行中遇到这样的问题呢。答案是因为Ajax Calls或JQuery。 

 

什么是Ajax?

AJAX 是一种从网页到服务器执行XMLHttpRequest(带外Http请求)并发送/检索要在网页上使用的数据的技术。AJAX代表异步Javascript和XML

意味着: Ajax是客户端浏览器与服务器通信的方式(例如:从数据库中检索数据),而无需执行页面刷新。

什么是JQuery?

JQuery (网站)是一个javascript框架,通过构建许多可用于搜索和与DOM交互的高级功能,使得使用DOM变得更容易。jQuery的部分功能实现了一个用于执行AJAX请求的高级接口。 

  • JQuery是一个轻量级客户端脚本库,而AJAX是用于提供异步数据传输的技术组合
  • JQuery和AJAX经常相互结合使用
  • JQuery主要用于动态修改屏幕上的数据,它使用AJAX检索所需的数据,而不会更改显示页面的当前状态

 

如何检查网页上的Ajax / JQuery?

这对于检查实际上在编写测试的应用程序上工作的内容非常重要。一种简单的方法是与UI开发人员交谈,并了解用于开发网页的技术。它总能让您清楚地知道您将在自动化方面做些什么。第二种方式是自己去寻找。

在下面的示例中,我将使用Chrome浏览器和   shop.demo.com网站来演示Ajax调用。要在最后执行相同操作,请按照以下步骤操作。

1.访问网站shop.demoqa.com 任何产品添加购物篮/包中,然后到达结帐页面或输入个人详细信息和付款详细信息的最后一页。

2.按F12在chrome中打开开发人员模式,然后从菜单中选择Console 选项卡。

3.现在在控制台编辑器中键入jQuery.active,然后按Enter键。  

在Selenium中使用JavaScriptExecutor处理Ajax调用?

注意:您会看到它返回值0. 零意味着目前页面上没有运行ajax或jquery。

 

4.让我们看看是否有任何Ajax实际上在页面上工作。滚动到页面底部,其中有一个单选按钮发送  到不同的地址?

5. Chrome开发者窗口中选择网络选项卡,然后单击右侧的最后一个下拉菜单以选择连接速度选择慢速3G。
 

阿贾克斯等待3

注意:选择慢速3G会降低连接速度,并为您提供足够的时间来检查页面上的内容。因为有时Ajax调用是以闪存的速度发生的。

 

6.返回Console选项卡并键入jQuery.active,不要 Enter键现在接下来的步骤将非常迅速地完成,因为你没有太多时间去做。您需要单击复选框并立即返回到控制台编辑器并按Enter键进入 jQuery.active语句。 

阿贾克斯等待3

注意这次您会注意到值1。 一个意味着ajax仍然在页面上处于活动状态。

是的很酷,这不是一个很好的找东西的方法。好的,现在我们继续使用JavaScriptExecutor捕获Ajax调用。

 

在Selenium中使用JavaScriptExecutor处理Ajax调用?

由于这些情况,我们的测试将暂时失败。因此,等待Ajax调用完成总是明智的想法。这可以使用我们的JavaScriptExecutor接口完成。这个想法很简单,如果所有JQuery执行完成,那么它将返回jQuery.active == 0,我们可以在Wait.Until方法中使用它等待脚本返回为true。

 

等待Ajax调用完成

要理解本章,您必须已经学习了早期WebDriver等待Selenium中的智能等待章节中讨论的概念你也应该理解Java中函数和谓词    

下面是一个示例代码,用于展示使用Selenium Webdriver处理AJAX控件。您可以将它集成到测试执行类中。

Boolean isJqueryCallDone =(Boolean)((JavascriptExecutor)driver).executeScript(“ return jQuery.active == 0 ”);

因为上面的脚本会返回True False但我们需要运行此代码,直到我们得到真或指定的时间结束。要做到这一点,我们需要有Selenium WebDriver等,这将为我们提供直至的 方法。

我们将在新的Wait类中创建一个until方法,该方法将包含WebDriverWait的逻辑此函数将WebDriver Function <WebDriver,Boolean>  作为参数。函数<WebDriver,Boolean>声明它将需要驱动程序并返回bool。 withTimeout 将决定等待条件成立的时间。

让我们编写一个完整的方法,它将从Page Objects方法调用,最终将使用上面创建的until方法。

在上面,调用了Until方法,它将驱动程序和函数作为参数传递给等待条件。那个等待条件实际上是我们的Ajax查询。

如果理解太多,请尝试从下面的屏幕截图中了解。

阿贾克斯等待5

 

在Selenium中使用JavaScriptExecutor等待页面加载

通常Selenium WebDriver处理软件应用程序的页面加载或等待页面加载由它自己如果您已经使用了隐式等待在您的软件自动化测试中。但是许多开发站点都有页面加载问题,并且每次软件测试迭代都会花费更多或更少的时间来加载页面。所以有时候你的测试会在没有任何问题的情况下运行,有时候由于页面加载问题,它将无法找到一些元素。

我们可以使用下面给出的java脚本语法在我们的软件自动化测试中检查(加载)页面的状态。
document.readyState

当页面完全加载时,它将返回“ 完成 ”。

这也以同样的方式实现。唯一的变化是这个使用document.readyState

 

在框架中实现等待实用程序

1.创建一个新包,并将其命名为,通过右键点击的src / test / java下,选择新建>>软件包由于这与Selenium WebDriverWait有关,我喜欢将其称为selenium包。

2.创建一个新类,  并将其命名为Wait,方法  是右键单击上面创建的Package并选择New >> Class。 

3.现在将上面创建的方法放在该文件中。

Wait.java

注意:您会注意到上述类中每个方法名称都使用了两次。在编程中,如果参数不同,则可以在同一个类中使用相同的方法名称。现在,让我们理解为什么我们这样做。元素可能需要20秒才能加载,而其他元素需要90秒才能加载。在这种情况下,最好打开方法以接受方法用户的时间。但是,如果用户不关心时间,那么用户不应该强迫提供相同的时间。因此,在这种情况下,我们默认设置超时,我们的自身只是在我们的属性配置文件中指定为隐式等待的相同数量。

 

用Wait.untilJqueryIsDone()替换页面对象中的Thread.Sleep

到目前为止,我们在代码中使用了很多Thread.sleep,现在是时候用Ajax Wait方法替换所有了。更改代码后,checkout页面对象类将如下所示:

CheckoutPage.java

 

 

运行黄瓜测试

以JUnit身份运行

现在我们都准备好进行Cucumber测试了。 右键点击  上  的TestRunner  类,然后单击  运行方式>> JUnit测试。 Cucumber  将以与在Selenium WebDriver中运行相同的方式运行脚本,   结果将显示 在JUnit  选项卡的左侧 项目浏览器窗口中 

您会注意到执行完所有步骤后,执行将进入钩子并执行  quitDriver()

 

Project Explorer

阿贾克斯等待5

 

 

posted @ 2019-03-17 12:06  嗯哼~  阅读(767)  评论(0编辑  收藏  举报