自動化測試如何處理動態網頁 Ajax?

自動化測試如何處理動態網頁 Ajax?

這篇文章主要說明當遇到動態網頁元件的時候，自動化測試要如何辨別這樣的動態元件?

動態元件表示該網頁元件的顯示會根據當下的狀態而定。

因此，自動化測試程式必須等待狀態的改變才能更進一步的處理。

這裡我們舉 Facebook 為例子，最後用 Java/Selenium實作一個完整的程式範例說明要如何處理這樣的狀況。

測試情境

https://www.facebook.com/

當我們到 faceBook首頁時，我頁右下方有一個元件連結 Why do I need to provide my birthday?

點選這個連結之後，就會出現關於生日的說明 ” Providing your birthday….”

1. 瀏覽 www.Facebook.com

2. 點擊 “Why do I need to provide my birthday”

3. 驗證生日說明出現的文字

對於生日說明這樣的網頁元件就算是動態網頁的一種，也是 Ajax網頁常見的技術

因為，生日說明這樣的網頁元件，會一直等到使用者點擊連結才會出現。網頁一開始載入的時候不會出現。

程式說明Explicit Wait

那麼對於生日說明這樣的動態網頁元件要如何處理呢?

我們這邊主要用到的技巧就是 Explicit Wait

舉例來說，下面這段就會等待到生日說明的出現

wait = new WebDriverWait(driver, 5);

wait.until(ExpectedConditions.presenceOfElementLocated(Birthday_Help_Msg_Xpath));

 

By變數的使用

另外，程式小技巧 By 的使用

Selenium 需要網頁元件的定位 (locator)來告訴 Selenium網頁元件的位置。因此會有許多的 By Xpath, name, CSS等

可以將這些 Xpath 的用變數處理，例如，這個 Xpath =  .//a

被存放在 BirthdayMsgXpath

By BirthdayMsgXpath = By.xpath(“.//a“);

因此之後如果需要用到該網頁元件程式語法就會變得簡潔。當網頁有修改也只要改變數就好

driver.findElement(BirthdayMsgXpath).click();

否則，如果不用變數處理，語法如下，缺點是當網頁就修改的時候，每個程式用到這個 Xpath都要修改，

driver.findElement(By.xpath(“.//a”)).click();

Java/Selenium程式範例

[pastacode lang=”java” message=”Selenium Explicit Wait” highlight=”” provider=”manual”]

package mySelenium;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.support.ui.ExpectedConditions;
import org.openqa.selenium.support.ui.WebDriverWait;
import org.testng.Assert;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;

public class AjaxExplictWait {
	
	private String URL = "https://www.facebook.com/";
	WebDriver driver;
	WebDriverWait wait;
	
	@BeforeClass
	public void setUp() {
		driver=new FirefoxDriver();
		driver.manage().window().maximize();
		driver.navigate().to(URL);
	}
	
	@Test
	public void test_FaceBook_AjaxMsg() throws InterruptedException {

		/*Wait for grid to appear*/
		By BirthdayMsgXpath = By.xpath(".//a");
		wait = new WebDriverWait(driver, 5);
		wait.until(ExpectedConditions.presenceOfElementLocated(BirthdayMsgXpath));
		
		/*Click on the Birthday for help Message*/
		driver.findElement(BirthdayMsgXpath).click();
	
		//driver.findElement(By.xpath(".//a")).click();
		/*Wait for Birthday Help message to disappear */

		By Birthday_Help_Msg_Xpath = By.xpath(".//*");
 
		wait.until(ExpectedConditions.presenceOfElementLocated(Birthday_Help_Msg_Xpath));

		String BirthDayHelpText = driver.findElement(Birthday_Help_Msg_Xpath).getText().trim();
		System.out.println(BirthDayHelpText);
		Assert.assertEquals(BirthDayHelpText,"Providing your birthday");
		
		driver.quit();
	}

}

[/pastacode]