วิธีถ่ายภาพหน้าจอใน Selenium ไดรเวอร์เว็บ

⚡ สรุปอย่างชาญฉลาด

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

  • 📷 เหตุผลที่ควรบันทึกภาพ: พิสูจน์ความล้มเหลวและบันทึกการดำเนินการ
  • 🛠️ ถ่ายภาพหน้าจอ: Cast WebDriver, เรียก getScreenshotAs, บันทึกไฟล์
  • 🖼️ การจับภาพองค์ประกอบ: Selenium 4 รองรับ getScreenshotAs บน WebElement
  • 📦 AShot: ทำการต่อภาพทั้งหน้าและเปรียบเทียบพิกเซล
  • 🤖 การทดสอบภาพด้วย AI: Applitools ตรวจจับความแตกต่างโดยไม่สนใจสิ่งรบกวน
  • 📊 รายงาน: ฝังภาพหน้าจอลงใน Allure หรือ ExtentReports

วิธีถ่ายภาพหน้าจอใน Selenium ไดรเวอร์เว็บ

ภาพหน้าจอใน Selenium

A ภาพหน้าจอใน Selenium ไดรเวอร์เว็บ ใช้สำหรับการวิเคราะห์จุดบกพร่อง Selenium webdriver สามารถจับภาพหน้าจอโดยอัตโนมัติระหว่างการดำเนินการ แต่หากผู้ใช้จำเป็นต้องจับภาพหน้าจอด้วยตนเอง ต้องใช้วิธี TakeScreenshot ซึ่งแจ้งให้ WebDrive จับภาพหน้าจอและเก็บไว้ใน Selenium.

ภาพหน้าจอใน 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

  1. การใช้มาเวน
  2. ด้วยตนเองโดยไม่ต้องใช้เครื่องมือใดๆ

วิธีกำหนดค่าผ่าน Maven:

กำหนดค่าผ่าน Maven

  • บันทึกไฟล์ แล้ว Maven จะเพิ่ม jar ให้กับเส้นทางการ build ของคุณ
  • และตอนนี้คุณก็พร้อมแล้ว!!!

เพื่อกำหนดค่าด้วยตนเองโดยไม่ต้องใช้เครื่องมืออ้างอิงใดๆ

  1. ไปที่ https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
  2. คลิกที่เวอร์ชันล่าสุดทันที มันคือ 1.5.4
  3. คลิกที่ขวด ดาวน์โหลดและบันทึกลงในเครื่องของคุณ

กำหนดค่าด้วยตนเองโดยไม่ต้องใช้เครื่องมืออ้างอิงใดๆ

  1. เพิ่มไฟล์ jar ในเส้นทางการ build ของคุณ:
  2. In Eclipseคลิกขวาที่โปรเจ็กต์ -> ไปที่คุณสมบัติ -> Build Path -> Libraries -> เพิ่ม Jars ภายนอก
  3. เลือกไฟล์ jar
  4. ใช้และปิด

จับภาพหน้าจอแบบเต็มหน้าด้วย 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();
    }
}

คำถามที่พบบ่อย

พวกเขาบันทึกความล้มเหลวและพิสูจน์ข้อผิดพลาดที่เกิดขึ้นเป็นระยะได้อย่างรวดเร็ว

เครื่องมืออย่าง Applitools เปรียบเทียบภาพหน้าจออย่างชาญฉลาด โดยไม่สนใจเนื้อหาที่เปลี่ยนแปลงตลอดเวลา

ใช่แล้ว เครื่องมือ AI สร้างฟังก์ชัน TakesScreenshot, AShot และอื่นๆ Selenium 4 ตัวอย่าง

ใช้ AShot หรือ Selenium 4. ใช้ Chrome DevTools Page.captureScreenshot

TakesScreenshot จะจับภาพหน้าจอ ส่วน AShot จะต่อภาพทั้งหน้าเข้าด้วยกัน

โปรแกรมนี้บันทึกสิ่งที่แสดงผล ควรลบข้อมูลที่ละเอียดอ่อนออกก่อนแชร์

บันทึกไฟล์ที่ได้จากฟังก์ชัน getScreenshotAs ด้วยตัวคุณเอง

ใช่แล้ว ใช้ element.getScreenshotAs(OutputType.FILE) โดยตรงได้เลย

สรุปโพสต์นี้ด้วย: