[Java – Webdriver 19] – Capture multiple images (Take screenshot)

HƯỚNG DẪN TỰ ĐỘNG CAPTURE MULTI-IMAGE

Đây là một trong những dự án nhỏ đầu tiên hồi mình mới bước chân vào làm test automation.

Yêu cầu: Hiện tại mình có khoảng 500 -> 1000 site (muốn bao nhiêu thì các bạn tự thêm vào), giờ mình code ra 1 cái extension add vào 4 trình duyệt Chrome, Firefox, Safari, IE. Làm sao sau mỗi lần deploy mình kiểm tra cả 1000 site đó có tương thích về mặt giao diện (có xuất hiện và đúng vị trí) trên cả 4 trình duyệt hay không. Đến đoạn này thì mình đã làm xong, tiếp tục đến bước kiểm tra chức năng của extension trên từng trình duyệt thì bị việc auto bị pause lại.

Đây là document mình còn lưu lại:

Chạy trên nhiều máy (tất cả đặt mặc định trong ổ C):

Firefox:
• Firefox.bat
• Firefox.jar
• EuroBonus.xpi
• ReportFirefox (thư mục lưu kết quả hình ảnh được xuất ra)

Chrome:
• Chrome.bat
• Chrome.jar
• Chrome.zip (extension đã được đóng gói)
• chromedriver_win32 (Driver của trình duyệt)
• ReportChrome (thư mục lưu kết quả hình ảnh được xuất ra)

Safari:
• Safari.bat
• Safari.jar
• stoolbar.safariextz (extension đã được đóng gói)
• ReportSafari (thư mục lưu kết quả hình ảnh được xuất ra)

Internet Explorer: (đã cài đặt EuroBonus_Finder_IE_v1.0 39)
• IE.bat
• IE.jar
• IEDriverServerr (Driver của trình duyệt)
• ReportIE (thư mục lưu kết quả hình ảnh được xuất ra)

Cơ chế:
Sau khi chạy chương trình sẽ tự động duyệt qua từng link, chụp hình và lưu vào thư mục mặc định (Report), nếu gặp site lỗi/ ko thể kết nối đến server trình duyệt sẽ tự động đóng và bật 1 trình duyệt mới với link tiếp theo (đã capture lại link lỗi)

Source demo:

import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.concurrent.TimeUnit;

import org.apache.commons.io.FileUtils;
import org.openqa.selenium.OutputType;
import org.openqa.selenium.TakesScreenshot;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;
import org.openqa.selenium.firefox.FirefoxProfile;
import org.testng.annotations.Test;

public class Firefox {
 public String fileName;
 public WebDriver driver;

 @Test
 public void runTestcase() throws Exception {
 FirefoxProfile profile = new FirefoxProfile();
 File extension = new File("C:\\EuroBonus.xpi");
 profile.addExtension(extension);
 driver = new FirefoxDriver(profile);

 ArrayList arrDomainList = new ArrayList();
 arrDomainList.add("https://daominhdam.wordpress.com");
 arrDomainList.add("https://vntesters.com");

 try {
 for (int i = 0; i < arrDomainList.size(); i++) {
 driver.get(arrDomainList.get(i));
 System.out.println(arrDomainList.get(i));
 driver.manage().window().maximize();
 driver.manage().timeouts().implicitlyWait(20000, TimeUnit.SECONDS);

 fileName = driver.getCurrentUrl();
 fileName = fileName.replace("https", "");
 fileName = fileName.replace("http", "");
 fileName = fileName.replace("<", "");
 fileName = fileName.replace(";", "");
 fileName = fileName.replace(":", "");
 fileName = fileName.replace("'", "");
 fileName = fileName.replace("{", "");
 fileName = fileName.replace("}", "");
 fileName = fileName.replace("[", "");
 fileName = fileName.replace("]", "");
 fileName = fileName.replace("|", "");
 Firefox.takeSnapShot(driver, "C:\\ReportFirefox\\" + fileName + ".png");
 }
 } catch (Exception e) {
 driver.quit();
 driver = new FirefoxDriver(profile);
 }
 driver.close();
 }

 public static void takeSnapShot(WebDriver webdriver, String fileName) {
 TakesScreenshot scrShot = ((TakesScreenshot) webdriver);
 File sourceFile = scrShot.getScreenshotAs(OutputType.FILE);
 File destFile = new File(fileName);
 try {
 FileUtils.copyFile(sourceFile, destFile);
 } catch (IOException e) {
 e.printStackTrace();
 }
 }
}

Video demo: (1p50s là phần report chứa image được capture):

6 thoughts on “[Java – Webdriver 19] – Capture multiple images (Take screenshot)

  1. Hi Anh,
    Em thấy trong bài có để cập tới việc anh viết một extension mà k thấy source của extension đó.
    Anh có thể gửi cho e k ah?

    Like

  2. Hi em,
    Bài viết này nội dung về việc chụp ảnh màn hình qa từng website, mục đích check về UI xem add-on được cài trên browser có được hiển thị đúng hay ko. Nếu e muốn tải extension thì lên market của từng browser tải các gói offline về.
    Ví dụ: muốn xài extension firebug thì vào đây tải gói .xpi về
    https://getfirebug.com/releases/firebug/2.0/

    Like

  3. for (int i = 0; i “, “”);
    fileName = fileName.replace(“<", "");
    e k hiểu đoạn code này lắm. Vòng for hơi lạ với e k biết để làm gì.
    biến fileName được khai báo ở đâu nữa.
    Anh giúp e với hj!

    Like

    1. Hello, cái này chắc do blog wordpress nó tự bỏ mất mấy kí tự trong code rồi =((.
      Mình có update lại, bạn check lại xem nhé. Mục đích mình tạo 1 danh sách chứa tất cả các site mình cần duyệt qua và chụp hình, sau đó run qua từng site, biến fileName sẽ thay thế các kí tự đặc biệt thành kí tự trống để đặt tên cho ảnh đã chụp (window ko chấp nhận kí tự đặc biệt cho tên file)

      Like

  4. Cho e hỏi e muốn chụp ảnh màn hình và so sánh với ảnh khác thì làm sao ạ

    Like

    1. Trường hợp của em là test GUI (giao diện: font/ size/ color/…) thì Selenium API nó cũng có hỗ trợ những hàm để compare 2 hình (nguồn/ đích) với nhau được, nhưng nó sẽ không mạnh bằng mấy tool đặc thù chỉ cho việc check GUI. Em research và apply thử 1 số tool này nhé: Galen framework, Applitool, WebDriverCSS,…

      Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s