網頁動畫測試程式如何凸顯電腦目前的操作狀態?

網頁動畫測試程式如何凸顯電腦目前的操作狀態?

這篇文章主要說明當自動化測試程式進行時，

往往因為電腦的操作速度很快，同時又沒有滑鼠游標的情況下，

我們怎麼知道當前電腦操作到哪裡?

因此，我們會提供一個簡單的程式(Java/Python)範例

說明當自動化測試程式進行中如何凸顯當下電腦操作的網頁元件。

程式如何實作?

要改變網頁元件的屬性顏色，我們主要透過 JavaScript 的執行來達成。driver.execute_script()

利用設定屬性的方式，將該網頁元件的 CSS style 改變。

driver.execute_script("arguments[0].setAttribute('style', arguments[1]);", WebElement,

"background: yellow; border: 5px solid red;")

當然在改變之前先把目前的 CSS style 狀態存下來以方便復原

original_style = element.get_attribute('style')

Selenium IDE 如何實作?

如果是使用 Selenium IDE 直接安裝 “Highlight Elements (Selenium IDE)”的 Addon 即可。是不是很方便?

https://addons.mozilla.org/en-us/firefox/addon/highlight-elements-selenium-id/

Python 完整範例程式

這個測試程式會執行下列動作

1. 啟動 fireFox

2. 瀏覽 Google

3. 找到 Search Bar 之後，highlights 該 Search Bar 為黃底，0.5秒後將該黃底的狀態恢復

4. 3. 找到 Search Button 之後，highlights 該Button為黃底紅框，0.5秒後將該顏色狀態恢復

[pastacode lang=”python” message=”” highlight=”” provider=”manual”]

from selenium import webdriver
import time

# Highlights (blinks) a Selenium Webdriver element
def highlight(element):
    driver = element._parent
    def apply_style(s):
        driver.execute_script("arguments[0].setAttribute('style', arguments[1]);", element, s)
    original_style = element.get_attribute('style')
    apply_style("background: yellow; border: 5px solid red;")
    time.sleep(.5)
    apply_style(original_style)

# test Google
driver = webdriver.Firefox()
url = 'http://www.google.com'
driver.get(url)
driver.maximize_window()

# highlight the search field
searchField = driver.find_element_by_name('q')
highlight(searchField)

# highlight the search Button
searchButton = driver.find_element_by_name('btnK')
highlight(searchButton)

time.sleep(5)

driver.quit()

[/pastacode]

Java Highlights 範例

[pastacode lang=”python” message=”” highlight=”” provider=”manual”]

public void highlightElement(WebElement element) {
	
	// Original in Python: https://gist.github.com/3086536
	
	String originalStyle = element.getAttribute("style");
	
	JavascriptExecutor js = (JavascriptExecutor) driver;
	js.executeScript("arguments[0].setAttribute('style', 'background: yellow; border: 3px solid red;');", element);
	
	try {
		Thread.sleep(3000);
	} 
	catch (InterruptedException e) {}
	
	js.executeScript("arguments[0].setAttribute('style', '" + originalStyle + "');", element);
	
}

[/pastacode]