如何在 Selenium 网络驱动程序

⚡ 智能摘要

截屏 Selenium WebDriver 解释了如何捕获用于调试和视觉回归的视觉证据，涵盖 TakesScreenshot、全页、元素捕获和 AShot。

???? 为什么要进行捕获： 证明失败并记录运行情况。
🛠️ 截屏： 调用 WebDriver 函数，调用 getScreenshotAs 方法，保存文件。
🖼️ 元素捕获： Selenium 4 支持对 WebElement 使用 getScreenshotAs 方法。
📦 AShot： 缝合整页并比较像素。
🤖 人工智能视觉测试： Applitools 能够检测差异，同时忽略噪声。
📊 报告： 在 Allure 或 ExtentReports 中嵌入屏幕截图。

截图在 Selenium

A 截图在 Selenium 网络驱动程序 用于错误分析。 Selenium webdriver 可以在执行过程中自动截取屏幕截图。但如果用户需要自己截取屏幕截图，则需要使用 TakeScreenshot 方法，该方法通知 WebDrive 截取屏幕截图并将其存储在 Selenium.

如何在 Selenium

以下是有关如何在 selenium WebDriver 中捕获屏幕截图的分步过程

步骤1） 将 Web 驱动程序对象转换为 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。您可以直接下载开始并在你的项目中调用它们

什么是 Ashot API？

Ashot 是第三方实用程序 Yandex 通过支持 Selenium WebDriver 用于截取屏幕截图。它不仅截取单个 WebElement 的屏幕截图，还截取页面的整页屏幕截图，这比屏幕尺寸更重要。

如何下载和配置Ashot API？

配置 Ashot API 有两种方法

使用Maven
无需使用任何工具，手动操作

通过 Maven 配置：

在MyCAD中点击软件更新 https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
现在点击最新版本。它是 1.5.4
复制依赖项代码并添加到 pom.xml 文件中

保存文件，Maven 会将 jar 添加到你的构建路径
现在您已经准备好了！！！

无需任何依赖工具即可手动配置

在MyCAD中点击软件更新 https://mvnrepository.com/artifact/ru.yandex.qatools.ashot/ashot
现在点击最新版本。它是 1.5.4
点击 jar，下载并保存到你的机器上

在您的构建路径中添加 jar 文件：
In Eclipse，右键单击项目->转到属性->构建路径->库->添加外部 jar
选择 jar 文件
申请和关闭

使用 AShot API 截取整页截图

步骤1） 如果您只想要屏幕尺寸页面的屏幕截图，请创建一个 Ashot 对象并调用 takeScreenshot() 方法。

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

但是，如果您想要截取大于屏幕尺寸的页面截图，请在调用 takeScreenshot() 方法来设置策略之前调用 shootingStrategy() 方法来设置策略。然后调用传递 webdriver 的 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”。

由于使用了 Ashot API 的 ShootingStrategy 类，我们将能够捕获大于屏幕尺寸的页面的完整图像。

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

使用 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 等工具能够智能地比较屏幕截图，忽略动态内容。

是的。AI 工具会生成 TakesScreenshot、AShot 和 Selenium 4 个片段。

使用 AShot 或 Selenium 4 使用 Chrome DevTools Page.captureScreenshot。

TakesScreenshot 截取视口内容。AShot 拼接整个页面。

它会捕获渲染结果。分享前请对敏感数据进行编辑。

请自行保存getScreenshotAs返回的文件。

是的。直接使用 element.getScreenshotAs(OutputType.FILE)。