如何使用實習生js截取DOM元素？

Question

我使用intern.js來測試一個web應用程序。我可以在失敗時執行測試並創建屏幕截圖。我想爲特定元素創建屏幕截圖，以便使用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。

Answer 2

有沒有內置的方式來與Intern做到這一點。 takeScreenshot方法只需調用Selenium的屏幕截圖服務，該服務將整個頁面的屏幕截圖作爲base-64編碼的PNG返回。在將結果交給用戶之前，實習生的takeScreenshot將其轉換爲節點緩衝區。

要裁剪圖像，您需要使用外部庫或工具，例如png-crop（請注意，我從來沒有使用過）。該代碼可能看起來像下面（未經測試）：

var image; 
var size; 
var position; 

return this.remote 
    // ... 
    .takeScreenshot() 
    .then(function (imageBuffer) { 
     image = imageBuffer; 
    }) 
    .findById('element') 
    .getSize() 
    .then(function (elementSize) { 
     size = elementSize; 
    }) 
    .getPosition() 
    .then(function (elementPosition) { 
     position = elementPosition; 
    }) 
    .then(function() { 
     // assuming you've loaded png-crop as PNGCrop 
     var config = { 
      width: size.width, 
      height: size.height, 
      top: position.y, 
      left: position.x 
     }; 
     // need to return a Promise since PNGCrop.crop is an async method 
     return new Promise(function (resolve, reject) { 
      PNGCrop.crop(image, 'cropped.png', config, function (err) { 
       if (err) { 
        reject(err); 
       } 
       else { 
        resolve(); 
       } 
      }); 
     }); 
    })