Как сделать снимок экрана элемента DOM с помощью intern js?

Question

Я использую intern.js для тестирования веб-приложения. Я могу выполнять тесты и создавать скриншоты, когда они терпят неудачу. Я хочу создать скриншот для определенного элемента, чтобы выполнить некоторое регрессионное тестирование CSS с помощью таких инструментов, как resemble.js. Является ли это возможным? Как я могу сделать? Спасибо!

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

Существует не встроенный способ сделать это с Интернационалом. Метод takeScreenshot просто вызывает службу скриншотов Selenium, которая возвращает скриншот всей страницы в виде PNG с кодировкой базы 64. Intern's 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(); 
       } 
      }); 
     }); 
    })