Selenium 简明教程
Selenium WebDriver - Capture Screenshots
Selenium Webdriver 可用于在运行自动化步骤时截取网页的屏幕截图。屏幕截图是借助 TakeScreenshot 方法截取的。
此方法向 Selenium Webdriver 发出截取屏幕截图的指令。要在所需位置截取屏幕截图，我们需要使用 getScreenshotAs() 方法。
Element Identify on Web Page
右键单击网页，然后在 Chrome 浏览器中单击“检查”按钮。然后，将显示整个页面的相应 HTML 代码。要调查页面上的编辑框，请单击可见 HTML 代码顶部的左上箭头。
一旦我们单击并用箭头指向编辑框（在下图中突出显示），它的 HTML 代码就会出现，反映输入标签名称。
Example 1 - Take Screenshot of Complete Page
我们来看一下上页的示例，我们首先使用 sendKeys() 方法在输入框中输入一些文本，然后截取整个网页的屏幕截图。
package org.example;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;
import java.io.File;
import java.io.IOException;
import java.util.concurrent.TimeUnit;
public class ScreenshotCapture {
public static void main(String[] args) throws InterruptedException, IOException {
// Initiate the Webdriver
WebDriver driver = new ChromeDriver();
// adding implicit wait of 15 secs
driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);
// Opening the webpage where we will identify an element
driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");
// Identify the input box with xpath locator
WebElement e = driver.findElement(By.xpath("//*[@id='name']"));
// enter text in input box
e.sendKeys("Selenium");
// Get the value entered
String text = e.getAttribute("value");
System.out.println("Entered text is: " + text);
// take full screenshot and store in project location
File scrFile = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(scrFile, new File("./ImageFullPage.png"));
// Closing browser
driver.quit();
}
}在 pom.xml 文件中添加的依赖项：
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>org.example</groupId>
<artifactId>SeleniumJava</artifactId>
<version>1.0-SNAPSHOT</version>
<properties>
<maven.compiler.source>16</maven.compiler.source>
<maven.compiler.target>16</maven.compiler.target>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
</properties>
<!-- https://mvnrepository.com/artifact/org.seleniumhq.selenium/selenium-java -->
<dependencies>
<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>4.11.0</version>
</dependency>
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.12.0</version>
</dependency>
</dependencies>
</project>一个名为 ImageFullPage.png 的屏幕截图在项目目录中被截取。点击它，我们将获得整个网页的截取的屏幕截图。
Example 2 - Take Screenshot of Single Element
让我们取上面讨论的相同的示例，我们首先在编辑框中输入一些文本，然后仅截取该元素的屏幕截图。可以使用 getScreenShotAs() 方法来完成此操作。
package org.example;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;
import java.io.File;
import java.io.IOException;
import java.util.concurrent.TimeUnit;
public class ScreenshotCaptureElement {
public static void main(String[] args) throws InterruptedException, IOException {
// Initiate the Webdriver
WebDriver driver = new ChromeDriver();
// adding implicit wait of 15 secs
driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);
// Opening the webpage where we will identify an element
driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");
// Identify the input box with xpath locator
WebElement e = driver.findElement
(By.xpath("//*[@id='name']"));
// enter text in input box
e.sendKeys("Selenium");
// Get the value entered
String text = e.getAttribute("value");
System.out.println("Entered text is: " + text);
// take screenshot of input box and store in project location
File scrFile = e.getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(scrFile, new File("./ImageElement.png"));
// Closing browser
driver.quit();
}
}一个名为 ImageElement.png 的屏幕截图在项目目录中被截取。点击它，我们将获得我们输入文本 Selenium 的输入框的截取的屏幕截图。
Example 3 - Take Screenshot on Exception
让我们考虑上面讨论过的相同示例，其中我们将尝试在输入框中输入一些文本，然后仅在该步骤失败的情况下截取该步骤的屏幕截图。可以使用添加到 catch 块（通常用于异常处理）中的 getScreenShotAs() 方法来实现此目的。
package org.example;
import org.apache.commons.io.FileUtils;
import org.openqa.selenium.*;
import org.openqa.selenium.chrome.ChromeDriver;
import java.io.File;
import java.io.IOException;
import java.util.concurrent.TimeUnit;
public class ScreenshotCaptureException {
public static void main(String[] args) throws InterruptedException, IOException {
// Initiate the Webdriver
WebDriver driver = new ChromeDriver();
// adding implicit wait of 15 secs
driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);
// Opening the webpage where we will identify an element
driver.get("https://www.tutorialspoint.com/selenium/practice/selenium_automation_practice.php");
try {
// Identify the input box with xpath locator
WebElement e = driver.findElement(By.xpath("//*[@id='names']"));
// enter text in input box
e.sendKeys("Selenium");
System.out.println("Step successfully executed");
}
catch(Exception e) {
// take screenshot on failure and store in project location
File scrFile
= ((TakesScreenshot) driver).
getScreenshotAs(OutputType.FILE);
FileUtils.copyFile(scrFile, new File("./ImageException.png"));
System.out.println("Element could not be found - Step failed");
}
// Closing browser
driver.quit();
}
}Output
Element could not be found - Step failed
Process finished with exit code 0在上面的示例中，我们的测试启动了一个网页并尝试与一个元素交互。在无法识别元素后，执行流转到 catch 块，然后我们在控制台中收到消息 - Element could not be found - Step failed 。
最后，收到了消息 Process finished with exit code 0 ，表示代码成功执行。
此外，带有文件名称 ImageException.png 的屏幕截图会捕获到项目目录中。单击它，我们将获得失败的测试步骤的捕获屏幕截图（这意味着，未在输入框中输入 Selenium）。
