是否可以直接使用WebDriver捕获webelement的屏幕截图？

在Interface TakesScreenshot页，我发现这一点：是否可以直接使用WebDriver捕获webelement的屏幕截图？

捕获截图并将其存储在指定的位置。对于 webdriver的延伸TakesScreenshot，这使得尽力而为根据浏览器返回以下中优选顺序： - 整个页 - 当前窗口 - 当前帧的可见部分 - 包含整个显示器的屏幕截图浏览器

延长TakesScreenshot WebElement，这使得尽力而为根据浏览器返回以下的优先顺序： - HTML元素的全部内容 - HTML元素的visisble 部分。

所以我想知道它应该支持捕捉webelement的截图，但是现在找不到与此支持相关的任何文档。不知道它是否真的支持。

有人知道关于这方面的更多细节吗？谢谢。

来源

2011-12-27 Wahaha2001

该文件将表明它是支持，但在实践中，它不会（与净绑定至少不会）工作：

var screenshotTaker = element as ITakesScreenshot; 
var image = screenshotTaker.GetScreenshot(); 
image.SaveAsFile(fileName, ImageFormat.Jpeg); // << null exception thrown here

存在已经为我工作一个解决办法 - 在网页上执行JavaScript来获取元素的位置：

const string javascript = "return arguments[0].getBoundingClientRect()"; 
var obj = (Dictionary<string, object>)((IJavaScriptExecutor)_core.Driver).ExecuteScript(javascript, element); 
var rect = new Rectangle((int)double.Parse(obj["left"].ToString()), 
         (int)double.Parse(obj["top"].ToString()), 
         (int)double.Parse(obj["width"].ToString()), 
         (int)double.Parse(obj["height"].ToString()));

这会给你的元素的位置的视窗内，此时你可以把整个页面的截图和裁剪道n只是元素的边界。

希望帮助...

来源

2011-12-28 16:45:45 Anders

WebElement类本身不具有top，left，width和height的方法吗？看起来像Java绑定一样：元素。getLocation（）。getX（），element.getSize（）。getWidth（）等等，但是你提供这段代码片段是很好的。对于原生没有这些信息的语言绑定可能很有用。 – David 2013-01-24 01:50:23

继@Anders的想法，在Java中 - （使用javaPng）不需要的javascript：

byte[] imageBytes = ((TakesScreenshot)webDriver).getScreenshotAs(OutputType.BYTES); 
BufferedImage img = new PngImage().read(new ByteArrayInputStream(imageBytes), true); 

//set element to the required webElement 
BufferedImage crop = img.getSubimage(element.getLocation().x, 
    element.getLocation().y, element.getSize().width, element.getSize().height);

来源

2013-03-14 10:04:39 etov

对于这种类型的实现，我有时会遇到类似“RasterFormatException：（x + width）在Raster之外”的异常。但它不会一直发生。我只是使用元素坐标和大小，所以没有办法可能是错误的。有趣的是，使用其他库如http://www.javaxt.com/javaxt-core/javaxt.io.Image/没有问题 – David 2014-04-14 20:15:14

试试这个

WebDriver driver = new FirefoxDriver(); 
WebElement webElement = driver.findElements(By.xpath("//html")).get(0); 

File screen = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE); 
BufferedImage img = ImageIO.read(screen); 

File f = new File('element.png'); 

Point p = webElement.getLocation(); 
int width = webElement.getSize().getWidth(); 
int height = webElement.getSize().getHeight(); 
BufferedImage dest = img.getSubimage(p.getX(), p.getY(), width, height); 
ImageIO.write(dest, "png", f);

然后，在你验证了这个工程之后，用你自己的元素替换webElement。首先运行此代码，以确保您的webdriver具有屏幕截图功能，并且您的文件io按预期工作（即您将发现保存文件的位置）。

这是做什么捕获截图，将其保存到文件。然后，将该文件作为图像读取，并根据元素的位置抓取子图像。然后，它将该子图像保存到文件中。这需要两个文件写入和一个文件读取（所以这可能会有一个很好的优化）。

来源

2014-07-03 16:54:25

public static Bitmap FullScreen { get; set; } 
public static Bitmap Image { get; set; } 

public static void TakeScreenShot(ChromeDriver driver, IWebElement element) 
{ 
    Screenshot screenshot = ((ITakesScreenshot)driver).GetScreenshot(); 

    screenshot.SaveAsFile(Environment.CurrentDirectory + @"\screens\file.bmp", ImageFormat.Bmp); 

    FullScreen = new Bitmap(Environment.CurrentDirectory + @"\screens\file.bmp"); 

    Size element_size = element.Size; 
    Point element_location = element.Location; 

    Rectangle rect = new Rectangle(element_location, element_size); 

    Image = FullScreen.Clone(rect, PixelFormat.Format24bppRgb); 

    Image.Save(Environment.CurrentDirectory + @"\screens\file2.bmp", ImageFormat.Bmp); 

} 

void Main() 
{ 
    ChromeDriver driver = new ChromeDriver(); 

    driver.Navigate().GoToUrl("http://domain.com"); 

    Thread.Sleep(1500); 
    IWebElement _element = driver.findElementById("ElementIdGoesHere"); 
    TakeScreenShot(driver, _element); 
}

这个代码将网页的全屏截图，那么它会寻找_element位置和图像将使用元素的矩形大小被保存到磁盘。

来源

2014-11-06 21:54:59

是否可以直接使用WebDriver捕获webelement的屏幕截图？

回答

相关问题