Selenide 和 Firefox 记录错误截图

Question

我正在使用 Selenide 和 Phantomjs 来测试 Web 应用程序。 我截图如下：

byte[] bytes = ((TakesScreenshot)webDriver).getScreenshotAs(OutputType.BYTES);
ByteArrayInputStream bis = new ByteArrayInputStream(bytes);
returnImage = ImageIO.read(bis);

但是，对于输入元素，屏幕截图如下所示：faulty screenshot

实际上是这样的（使用 chrome/firefox 时） how it's supposed to look

有趣的是，当我将 Selenide 设置为使用 phantomjs (Configuration.Browser = "phantomjs") 时，它会正确截取屏幕截图。 它也只发生在那种元素上。按钮等记录良好。有什么想法吗？

PS：本文所附的截图被裁剪，这里的代码截取了整个页面的截图。在我的代码中，我只将屏幕截图裁剪为所需的元素，但即使在显示整个屏幕的屏幕截图上，该元素也没有被正确记录。

Answer 1

您可以使用以下代码截取元素：-

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(screenshot, screenshotLocation);

现在在上面的代码中，你得到了 getWidth() 和 getHeight()。您可以尝试通过增加或减少值来调整它。