•  Selenium網頁自動化測試的圖形比對

    這篇文章主要說明如何進行兩張圖形比對。

    主要用在當畫面比較複雜時,網頁元件的驗證與比對相對複雜,

    如果每次執行整個畫面都有預期一定的結果時,就可以直接擷取畫面,

    用圖形比對的方式驗證。最後也舉一個完整的程式範例說明。

     測試情境

    1. 這裡用 google 為例

    2. 瀏覽Google 網頁,將網頁的呈現結果螢幕畫面擷取下來。

    3. 將該擷取畫面的圖檔與之前準備好的圖檔比較。看看兩個畫面擷取的圖檔是否相同

    程式說明

    這個程式主要用到幾個小技巧

    • 畫面擷取:Selenium內建這個功能可以幫助擷取螢幕畫面 getScreenshotAs

    File screenshotFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
    FileUtils.copyFile(screenshotFile, new File(scrFile));

    • 圖形比對:CompareUtil.CompareImage

    圖形比對的部分,這裡運用到其他的比對工具。另外,其實也可以直接將該檔案取 MD5,直接比對 MD5也是另一個比較簡單的做法

    程式範例

    package mySelenium;
    
    import org.openqa.selenium.firefox.FirefoxDriver;
    import org.openqa.selenium.*;
    import org.apache.commons.io.FileUtils;
    import org.junit.*;
    import static org.junit.Assert.*;
    import java.io.File;
    
    public class ImgCompareTest {
    	
    	public WebDriver driver;
    		
    	@Before
    	public void setUp() throws Exception { 
    		driver = new FirefoxDriver();
    	}
    
    	@Test
    	public void imgCompare() throws Exception {
    	
    		String scrFile = "c:\\Google_screenshot.png";
    		String baseScrFile = "c:\\baseScreenshot.png";
    		
    		//Open the BMI Calculator Page and get a Screen Shot of Page into a File
    		driver.get("http://www.google.com");
    		File screenshotFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
    		FileUtils.copyFile(screenshotFile, new File(scrFile));
    		
    		//Verify baseline image with actual image
    		// Here we will need "CompareUtil" class. If you need the class, leave a message.
    		assertEquals(CompareUtil.Result.Matched, CompareUtil.CompareImage(baseScrFile,scrFile));
    		
    	}
    	
    	@After
    	public void tearDown() throws Exception {
    		//Close the browser
    		driver.quit();
    		
    		
    	}
    }
    Selenium Image Comparison

    (程式範例參考來源Syed Sayem大師)

    Tags:

  • Selenium 自動化測試:如何啟動Chrome

    這篇文章主要說明如何用 Selenium啟動 Chrome 瀏覽器來做測試。

    要達到這個目標,必須要下載Chorme WebDriver並且在程式中做一點設定。

    最後舉一個完整的程式範例說明。

     

    Chrome WebDriver

    Selenium 透過WebDriver 來跟瀏覽器溝通。每一種瀏覽器都有相對應的 WebDriver

    筆者在寫這篇文章的時候,Chrome WebDriver最新版為 2.5,可以到下列網址下載。

    http://chromedriver.storage.googleapis.com/index.html?path=2.15/

    下載完後解壓縮為一個執行檔,chromedriver.exe

    程式範例

    例如,這篇文章的程式範例,將chromedriver.exe放置 c:\\

    與預設FireFox程式不同的是下列兩行:

    System.setProperty(“webdriver.chrome.driver”, “c:\\chromedriver.exe”);
    WebDriver driver = new ChromeDriver();

    這個程式執行的時候,就會啟動 Chrome,瀏覽 Www.google.com,並且輸入 Selenium

     

    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.firefox.FirefoxProfile;
    import org.openqa.selenium.interactions.Actions;
    
    
    public class testChrome {
    
        public static void main(String[] args) {
            //FirefoxProfile profile = new FirefoxProfile();
            //profile.setEnableNativeEvents(true);
            //WebDriver driver = new FirefoxDriver(profile);
        	
        	// Download the Chrome WebDriver here
        	// http://chromedriver.storage.googleapis.com/index.html?path=2.15/
            System.setProperty("webdriver.chrome.driver", "c:\\chromedriver.exe");
            WebDriver driver = new ChromeDriver();
    
            driver.get("http://www.google.com");
            driver.findElement(By.xpath("//input[@name='q']")).sendKeys("Selenium");
            
            
            
        }
    
    }

     

     

    Tags:

  • 網站自動化測試Selenium的 Hello World

    Selenium HelloWorld

    這篇文章主要用一個範例程式說明 Selenium的基本運作。

    這個範例程式會自動啟動 FireFox,瀏覽 Google網站,

    模擬使用者輸入 “Hello World”的搜尋關鍵字,接著就讓 google 開始搜尋。

    Selenium的Hello World與其他程式不同,主要是因為Selenium必須與 Browser 溝通互動。

    因此 Selenium 模擬輸入的 “Hello World”必須確認是否 Browser 有收到並且正確的在該瀏覽器上執行。

    測試情境

    這個 Selenium 測試程式,主要會自動進行下列動作

    1. 啟動 Firefox

    2. 瀏覽至 www.google.com並且將視窗最大化

    3. 輸入 Hello World並執行

     

    實務經驗

    這個程式範例為了容易了解操作 Selenium相關的 API,所以這樣的範例比較直覺了解。

    但是實務上的測試自動化通常程式”架構”不是這樣的.

    為什麼呢? 哪裡不一樣?

    因為自動化測試的目的是要驗證(assertion)測試結果,並且有許多的測試個案(testing cases)。

    所以,實務上進行自動化測試通常會利用 Java Junit 或是 python unittest 的這種 unit testing 的模組來完成。

    透過使用 unit testing 的模組可以更容易的做到

    • 測試個案的管理
    • 每個測試個案的執行結果,格式化與報表輸出
    • 驗證(assertion)測試結果

     

    程式範例

    package mySelenium;
    
    import java.util.concurrent.TimeUnit;
    
    import org.openqa.selenium.By;
    import org.openqa.selenium.WebDriver;
    import org.openqa.selenium.WebElement;
    import org.openqa.selenium.firefox.FirefoxDriver;
    import org.openqa.selenium.support.ui.ExpectedCondition;
    import org.openqa.selenium.support.ui.WebDriverWait;
    
    public class Selenium2Example  {
        public static void main(String[] args) throws InterruptedException {
    
        	// Create a new instance of the Firefox driver
    
            WebDriver driver = new FirefoxDriver();
            //By default, it will wait for 10 sec
            driver.manage().timeouts().implicitlyWait(10,TimeUnit.SECONDS);
    
            // Launch the FireFox browser and Visit Google page
            driver.get("http://www.google.com");
            //  Max the window
            driver.manage().window().maximize();
    
            // Locate the search input field by name = "q"
            WebElement element = driver.findElement(By.name("q"));
    
            // Text Input "Selenium" 
            element.sendKeys("Hello World");
                    
            
            // simulate the click search button
            element.submit();
    
            // Check the title of the page
            System.out.println("Page title is: " + driver.getTitle());
            
            
            //Close the browser
            //sleep for 3 sec before close the browser
            Thread.sleep(3000);
            driver.quit();
        }
    }
    Selenium Hello World

     

     

     

    Tags: