كيفية التقاط لقطة للشاشة في Selenium ويب درايفر

⚡ ملخص ذكي

التقاط لقطة شاشة في Selenium يشرح WebDriver كيفية التقاط الأدلة المرئية لتصحيح الأخطاء والتراجع المرئي، ويغطي TakesScreenshot، والصفحة الكاملة، والتقاط العناصر، وAShot.

  • ؟؟؟؟ لماذا يتم التقاط الصور؟ إثبات حالات الفشل وتوثيق عمليات التشغيل.
  • 🛠️ أخذ لقطة شاشة: قم بتفعيل WebDriver، ثم استدعِ getScreenshotAs، واحفظ الملف.
  • 🖼️ التقاط العناصر: Selenium يدعم الإصدار 4 خاصية getScreenshotAs على عنصر ويب.
  • 📦 لقطة سريعة: يقوم بخياطة الصفحات الكاملة ومقارنة وحدات البكسل.
  • 🤖 اختبارات الذكاء الاصطناعي البصرية: يكتشف برنامج Applitools الاختلافات مع تجاهل التشويش.
  • 📊 تقارير: قم بتضمين لقطات الشاشة في Allure أو ExtentReports.

كيفية التقاط لقطة للشاشة في Selenium ويب درايفر

لقطة شاشة بتنسيق Selenium

A لقطة شاشة بتنسيق Selenium برنامج تشغيل الويب يستخدم لتحليل الأخطاء. Selenium يمكن لبرنامج تشغيل الويب التقاط لقطات الشاشة تلقائيًا أثناء التنفيذ. ولكن إذا كان المستخدمون بحاجة إلى التقاط لقطة شاشة بأنفسهم، فيجب عليهم استخدام طريقة 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

هذا هو رمز لقطة الشاشة في السيلينيوم:

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);

    }

}

NOTE: Selenium الإصدار 3.9.0 وما فوق لا يوفر Apache Commons IO JAR. يمكنك ببساطة تنزيلها اضغط هنا واتصل بهم في مشروعك

ما هو Ashot API؟

Ashot هي أداة مساعدة تابعة لجهة خارجية Yandex مدعوم من Selenium WebDriver لالتقاط لقطات الشاشة. فهو يأخذ لقطة شاشة لعنصر WebElement فردي بالإضافة إلى لقطة شاشة لصفحة كاملة للصفحة، وهو أمر أكثر أهمية من حجم الشاشة.

كيفية تنزيل وتكوين Ashot API؟

هناك طريقتان لتكوين Ashot API

  1. باستخدام Maven
  2. يدويا دون استخدام أي أداة

للتكوين من خلال Maven:

تكوين من خلال مخضرم

  • احفظ الملف، وسيقوم Maven بإضافة الجرة إلى مسار البناء الخاص بك
  • والآن أنت جاهز!!!

للتكوين يدويًا دون أي أداة تبعية

  1. انتقل إلى البرنامج المساعد في التأليف https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
  2. انقر على أحدث إصدار، في الوقت الراهن. إنه 1.5.4
  3. انقر على الجرة، وقم بتنزيلها وحفظها على جهازك

قم بالتكوين يدويًا دون أي أداة تبعية

  1. أضف ملف jar في مسار البناء الخاص بك:
  2. In Eclipse، انقر بزر الماوس الأيمن على المشروع -> انتقل إلى الخصائص -> مسار البناء -> المكتبات -> إضافة الجرار الخارجية
  3. حدد ملف الجرة
  4. تطبيق وإغلاق

التقط لقطة شاشة كاملة للصفحة باستخدام AShot API

الخطوة 1) قم بإنشاء كائن Ashot واستدعاء طريقة takeScreenshot() إذا كنت تريد فقط لقطة شاشة لصفحة حجم الشاشة.

Screenshot screenshot = new Ashot().takeScreenshot(driver);

لكن إذا كنت تريد أن تكون لقطة الشاشة للصفحة أكبر من حجم الشاشة، فاستدعاء طريقةshootingStrategy() قبل استدعاء طريقة takeScreenshot() لإعداد السياسة. ثم قم باستدعاء الأسلوب takeScreenshot() لتمرير برنامج تشغيل الويب، على سبيل المثال،

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، سنكون قادرين على التقاط صورة كاملة لصفحة أكبر من حجم الشاشة.

هذا هو الكود لقطة الشاشة في برنامج السيلينيوم:

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".

هذا هو رمز لقطة الشاشة في السيلينيوم:

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"));
	}
}

مقارنة الصور باستخدام AShot

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 بمقارنة لقطات الشاشة بذكاء، متجاهلة المحتوى الديناميكي.

نعم. تُنتج أدوات الذكاء الاصطناعي برامج مثل TakesScreenshot وAShot و Selenium أربع مقتطفات.

استخدم AShot أو Selenium 4 باستخدام أدوات مطوري Chrome Page.captureScreenshot.

يلتقط برنامج TakesScreenshot نافذة العرض. أما برنامج AShot فيقوم بدمج الصفحات الكاملة.

يلتقط البرنامج ما يتم عرضه. قم بإخفاء البيانات الحساسة قبل المشاركة.

احفظ الملف الذي تم إرجاعه بواسطة getScreenshotAs بنفسك.

نعم. استخدم element.getScreenshotAs(OutputType.FILE) مباشرةً.

تلخيص هذه التدوينة بـ: