Selenium WebDriver 實作特定網頁元素截圖

Selenium WebDriver 實作特定網頁元素截圖。本站提醒廣大學習愛好者：此文章僅供參考，不一定能完全符合您的需求。以下是完整實作正文

用過 WebDriver 的同學都知道，WebDriver 可以對瀏覽器中的頁面進行截圖。例如：

public byte[] takeScreenshot() throws IOException {
    TakesScreenshot takesScreenshot = (TakesScreenshot) driver;
    return takesScreenshot.getScreenshotAs(OutputType.BYTES);
}

這樣產生的圖片是整個網頁。但有時我們不需要整個網頁，只需要某些特定的 WebElement，以避免干擾。

雖然 WebDriver 本身沒有提供這樣的 API，但我們可以自己實作，就是在全螢幕截圖中再進行裁剪，如下：

public BufferedImage createElementImage(WebElement webElement) throws IOException {
    // 取得 webElement 的位置和大小
    Point location = webElement.getLocation();
    Dimension size = webElement.getSize();
    // 建立全螢幕截圖
    BufferedImage originalImage = ImageIO.read(new ByteArrayInputStream(takeScreenshot()));
    // 裁剪 webElement 所在區域的子圖
    BufferedImage croppedImage = originalImage.getSubimage(
            location.getX(), location.getY(),
            size.getWidth(), size.getHeight());
    return croppedImage;
}

其中 ImageIO 和 BufferedImage 分別來自 javax.imageio 和 java.awt.image。

這種方法可以很好地減小截圖大小，也避免了一些不確定因素（如日期時間等），是測試中保留截圖的很好做法。

註：如果測試的網頁包含 iframe，則需要用更複雜的方法計算 WebElement 的位置，詳見：計算網頁中某個元素的位置。