วิธีถ่ายภาพหน้าจอใน Selenium ไดรเวอร์เว็บ
⚡ สรุปอย่างชาญฉลาด
ถ่ายภาพหน้าจอใน Selenium WebDriver อธิบายวิธีการบันทึกภาพเพื่อใช้ในการดีบั๊กและการตรวจสอบความผิดพลาดที่เกิดขึ้น โดยครอบคลุมถึงคำสั่ง TakesScreenshot, การจับภาพหน้าจอแบบเต็มหน้า, การจับภาพองค์ประกอบ และคำสั่ง AShot

ภาพหน้าจอใน Selenium
A ภาพหน้าจอใน Selenium ไดรเวอร์เว็บ ใช้สำหรับการวิเคราะห์จุดบกพร่อง Selenium webdriver สามารถจับภาพหน้าจอโดยอัตโนมัติระหว่างการดำเนินการ แต่หากผู้ใช้จำเป็นต้องจับภาพหน้าจอด้วยตนเอง ต้องใช้วิธี TakeScreenshot ซึ่งแจ้งให้ WebDrive จับภาพหน้าจอและเก็บไว้ใน Selenium.
วิธีถ่ายภาพหน้าจอใน Selenium
นี่คือกระบวนการทีละขั้นตอนในการจับภาพหน้าจอใน Selenium WebDriver
ขั้นตอน 1) แปลงวัตถุไดรเวอร์เว็บเป็น TakeScreenshot
TakesScreenshot scrShot =((TakesScreenshot)webdriver);
ขั้นตอน 2) เรียกเมธอด getScreenshotAs เพื่อสร้างไฟล์รูปภาพ
File SrcFile=scrShot.getScreenshotAs(OutputType.FILE);
ขั้นตอน 3) คัดลอกไฟล์ไปยังตำแหน่งที่ต้องการ
ตัวอย่าง: ในตัวอย่างนี้เราจะจับภาพหน้าจอของ https://demo.guru99.com/V4/ และบันทึกเป็น C:/Test.png
นี่คือโค้ดภาพหน้าจอใน Selenium:
package Guru99TakeScreenshot; import java.io.File; 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.testng.annotations.Test; public class Guru99TakeScreenshot { @Test public void testGuru99TakeScreenShot() throws Exception{ WebDriver driver ; System.setProperty("webdriver.gecko.">driver","C:\\geckodriver.exe"); driver = new FirefoxDriver(); //goto url driver.get("https://demo.guru99.com/V4/"); //Call take screenshot function this.takeSnapShot(driver, "c://test.png") ; } /** * This function will take screenshot * @param webdriver * @param fileWithPath * @throws Exception */ public static void takeSnapShot(WebDriver webdriver,String fileWithPath) throws Exception{ //Convert web driver object to TakeScreenshot TakesScreenshot scrShot =((TakesScreenshot)webdriver); //Call getScreenshotAs method to create image file File SrcFile=scrShot.getScreenshotAs(OutputType.FILE); //Move image file to new destination File DestFile=new File(fileWithPath); //Copy file at destination FileUtils.copyFile(SrcFile, DestFile); } }
หมายเหตุ: Selenium เวอร์ชัน 3.9.0 ขึ้นไปไม่มี Apache Commons IO JAR คุณสามารถดาวน์โหลดได้ Good Farm Animal Welfare Awards และเรียกพวกเขาในโครงการของคุณ
Ashot API คืออะไร
Ashot เป็นโปรแกรมอรรถประโยชน์บุคคลที่สามโดย Yandex สนับสนุนโดย Selenium WebDriver เพื่อจับภาพหน้าจอ โดยจะจับภาพหน้าจอของ WebElement แต่ละรายการ รวมถึงภาพหน้าจอแบบเต็มหน้าของหน้าเว็บ ซึ่งมีความสำคัญมากกว่าขนาดหน้าจอ
จะดาวน์โหลดและกำหนดค่า Ashot API ได้อย่างไร
มีสองวิธีในการกำหนดค่า Ashot API
- การใช้มาเวน
- ด้วยตนเองโดยไม่ต้องใช้เครื่องมือใดๆ
วิธีกำหนดค่าผ่าน Maven:
- ไปที่ https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
- คลิกที่เวอร์ชันล่าสุดทันที มันคือ 1.5.4
- คัดลอกโค้ดการพึ่งพาและเพิ่มลงในไฟล์ pom.xml ของคุณ
- บันทึกไฟล์ แล้ว Maven จะเพิ่ม jar ให้กับเส้นทางการ build ของคุณ
- และตอนนี้คุณก็พร้อมแล้ว!!!
เพื่อกำหนดค่าด้วยตนเองโดยไม่ต้องใช้เครื่องมืออ้างอิงใดๆ
- ไปที่ https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
- คลิกที่เวอร์ชันล่าสุดทันที มันคือ 1.5.4
- คลิกที่ขวด ดาวน์โหลดและบันทึกลงในเครื่องของคุณ
- เพิ่มไฟล์ jar ในเส้นทางการ build ของคุณ:
- In Eclipseคลิกขวาที่โปรเจ็กต์ -> ไปที่คุณสมบัติ -> Build Path -> Libraries -> เพิ่ม Jars ภายนอก
- เลือกไฟล์ jar
- ใช้และปิด
จับภาพหน้าจอแบบเต็มหน้าด้วย AHot API
ขั้นตอน 1) สร้างวัตถุ Ashot และเรียกใช้เมธอด takeScreenshot() หากคุณต้องการภาพหน้าจอสำหรับหน้าขนาดหน้าจอ
Screenshot screenshot = new Ashot().takeScreenshot(driver);
แต่ถ้าคุณต้องการภาพหน้าจอของหน้าที่ใหญ่กว่าขนาดหน้าจอ ให้เรียกใช้เมธอด ShootingStrategy() ก่อนที่จะเรียกเมธอด takeScreenshot() เพื่อตั้งค่านโยบาย จากนั้นเรียกใช้เมธอด takeScreenshot() ผ่าน webdriver เช่น
Screenshot screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).takeScreenshot(driver);
ที่นี่ 1000 เวลาถูกเลื่อนออกในหน่วยมิลลิวินาที ดังนั้นสำหรับการจับภาพหน้าจอ โปรแกรมจะเลื่อนทุกๆ 1000 มิลลิวินาที
ขั้นตอนที่ 2): ตอนนี้รับภาพจากภาพหน้าจอแล้วเขียนลงในไฟล์ คุณสามารถระบุประเภทไฟล์เป็น jpg, PNG ฯลฯ
ImageIO.write(screenshot.getImage(), "jpg", new File(".\\screenshot\\fullimage.jpg"));
การจับภาพหน้าจอแบบเต็มหน้าของหน้าที่ใหญ่กว่าขนาดหน้าจอ
ตัวอย่าง: นี่คือตัวอย่างการจับภาพหน้าจอแบบเต็มหน้าของ https://demo.guru99.com/test/guru99home/ และบันทึกเป็นไฟล์ “screenshot.jpg”
เนื่องจากการใช้คลาส ShootingStrategy ของ Ashot API เราจะสามารถจับภาพเต็มหน้าที่ใหญ่กว่าขนาดหน้าจอได้
นี่คือโค้ดภาพหน้าจอในโปรแกรม Selenium:
package Guru99; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; import org.openqa.selenium.By; import org.openqa.selenium.WebElement; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; import ru.yandex.qatools.ashot.AShot; import ru.yandex.qatools.ashot.Screenshot; import ru.yandex.qatools.ashot.shooting.ShootingStrategies; public class TestScreenshotUsingAshot { public static void main(String[] args) throws IOException { System.setProperty("webdriver.chrome.">driver", "c:\\chromedriver.exe"); WebDriver driver = new ChromeDriver(); driver.get("https://demo.guru99.com/test/guru99home/"); driver.manage().window().maximize(); Screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).takeScreenshot(driver); ImageIO.write(screenshot.getImage(), "jpg", new File("c:\\ElementScreenshot.jpg")); } }
จับภาพหน้าจอขององค์ประกอบเฉพาะของหน้า
ตัวอย่าง: นี่คือตัวอย่างการจับภาพหน้าจอขององค์ประกอบ Guru โลโก้ 99 บน https://demo.guru99.com/test/guru99home/ หน้าและบันทึกลงในไฟล์ “ElementScreenshot.jpg”
นี่คือโค้ดภาพหน้าจอใน Selenium:
package Guru99; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; import org.openqa.selenium.By; import org.openqa.selenium.WebElement; import org.openqa.selenium.WebDriver; import org.openqa.selenium.chrome.ChromeDriver; import ru.yandex.qatools.ashot.AShot; import ru.yandex.qatools.ashot.Screenshot; import ru.yandex.qatools.ashot.shooting.ShootingStrategies; public class TestElementScreenshotUsingAshot { public static void main(String[] args) throws IOException { System.setProperty("webdriver.chrome.">driver", "c:\\chromedriver.exe"); WebDriver driver = new ChromeDriver(); driver.get("https://demo.guru99.com/test/guru99home/"); driver.manage().window().maximize(); // Find the element to take a screenshot WebElement element = driver.findElement(By.xpath ("//*[@id=\"site-name\"]/a[1]/img")); // Along with driver pass element also in takeScreenshot() method. Screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)).takeScreenshot(driver,element); ImageIO.write(screenshot.getImage(), "jpg", new File("c:\\ElementScreenshot.jpg")); } }
การเปรียบเทียบภาพโดยใช้ AHot
package Guru99; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import ru.yandex.qatools.ashot.AShot; import ru.yandex.qatools.ashot.Screenshot; import ru.yandex.qatools.ashot.comparison.ImageDiff; import ru.yandex.qatools.ashot.comparison.ImageDiffer; public class TestImageComaprison { public static void main(String[] args) throws IOException { System.setProperty("webdriver.chrome.">driver", "C:\\chromedriver.exe"); WebDriver driver = new ChromeDriver(); driver.get("https://demo.guru99.com/test/guru99home/"); // Find the element and take a screenshot WebElement logoElement = driver.findElement(By.xpath("//*[@id=\"site-name\"]/a[1]/img")); Screenshot logoElementScreenshot = new AShot().takeScreenshot(driver, logoElemnent); // read the image to compare BufferedImage expectedImage = ImageIO.read(new File("C:\\Guru99logo.png")); BufferedImage actualImage = logoElementScreenshot.getImage(); // Create ImageDiffer object and call method makeDiff() ImageDiffer imgDiff = new ImageDiffer(); ImageDiff diff = imgDiff.makeDiff(actualImage, expectedImage); if (diff.hasDiff() == true) { System.out.println("Images are same"); } else { System.out.println("Images are different"); } driver.quit(); } }



