css - 如何使用 intern js 截取 DOM 元素的屏幕截图？

Question

我正在使用 intern.js测试网络应用程序。我可以执行测试并在测试失败时创建屏幕截图。我想为特定元素创建一个屏幕截图，以便使用 resemble.js 等工具进行一些 CSS 回归测试。 .是否可以？我能怎么做？谢谢!

Answer 1

driver.get("http://www.google.com");
WebElement ele = driver.findElement(By.id("hplogo"));   

//Get entire page screenshot
File screenshot = ((TakesScreenshot)driver).getScreenshotAs(OutputType.FILE);
BufferedImage  fullImg = ImageIO.read(screenshot);

//Get the location of element on the page
Point point = ele.getLocation();

//Get width and height of the element
int eleWidth = ele.getSize().getWidth();
int eleHeight = ele.getSize().getHeight();

//Crop the entire page screenshot to get only element screenshot
BufferedImage eleScreenshot= fullImg.getSubimage(point.getX(), point.getY(), eleWidth,
    eleHeight);
ImageIO.write(eleScreenshot, "png", screenshot);

//Copy the element screenshot to disk
File screenshotLocation = new File("C:\\images\\GoogleLogo_screenshot.png");
FileUtils.copyFile(screen, screenshotLocation);

取自here .