Selenium 的自动截图

当脚本运行出错时可以使用截图功能截取元素的图片或者当前 Window 的图片来判断，WebDriver 还提供了截图相关的 API，即 WebDriver 的 getScreenshotAs() 方法，该方法可以截取整个浏览器窗口的图片，如果是 WebElement 调用该方法可以截取这个元素的图片。

知识点

• getScreenshotAs: 获取元素或者窗口的截图

  package cn.lanqiao.screen;
  
  import org.openqa.selenium.*;
  import org.openqa.selenium.chrome.ChromeDriver;
  
  
  import java.io.File;
  import org.apache.commons.io.FileUtils;
  
  public class ScreenCommandTest {
  
      @Test
      public void testElementShot() throws Exception{
          // 设置 WebDriver 的路径
          System.setProperty("webdriver.chrome.driver", "C:\\Users\\jingnan\\chromedriver.exe");
          WebDriver driver = new ChromeDriver();
          String url = "https://www.lanqiao.cn/";
  
          driver.get(url);
  
          WebElement input = driver.findElement(By.tagName("input"));
          input.sendKeys("selenium");
  
          Thread.sleep(2000);
  
          // 获取元素截屏
          File eleShot = input.getScreenshotAs(OutputType.FILE);
          FileUtils.copyFile(eleShot, new File("./input.png"));
  
          Thread.sleep(1000);
          driver.quit();
      }
  }

  通过 WebElement 对象调用 getScreenshotAs 方法可以获取元素的截屏，要获取当前浏览器窗口的截屏需要使用到一个 TakesScreenshot 类来调用，可以将 WebDriver 强转为 TakesScreenshot：

  TakesScreenshot take = (TakesScreenshot)driver;
  

  在 ScreenCommand 类中创建 testScreenShot 方法，在 main 方法中调用它，具体代码如下：

  package cn.lanqiao.screen;
  
  import org.openqa.selenium.*;
  import org.openqa.selenium.chrome.ChromeDriver;
  
  
  import java.io.File;
  import org.apache.commons.io.FileUtils;
  
  public class ScreenCommandTest {
  
      @Test
      public void testScreenShot() throws Exception{
          // 设置 WebDriver 的路径
          System.setProperty("webdriver.chrome.driver", "C:\\Users\\jingnan\\chromedriver.exe");
          WebDriver driver = new ChromeDriver();
          String url = "https://www.lanqiao.cn/";
  
          driver.get(url);
  
          WebElement input = driver.findElement(By.tagName("input"));
          input.sendKeys("selenium");
  
          Thread.sleep(2000);
  
          // 获取整个窗口的截屏
          File screenShot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
          FileUtils.copyFile(screenShot, new File("./screen.png"));
  
          Thread.sleep(1000);
          driver.quit();
      }
  }   
  

  执行上述代码，执行完成之后项目目录下会多出一张图片，分别是 screen.png 如下图所示：

  

  在后续框架中，可以将元素截图和窗口截图封装起来，在用例断言处添加截图方法，方便进行错误原因分析。