인턴 즈를 사용하여 DOM 요소의 스크린 샷을 찍으려면 어떻게해야합니까?

Question

웹 응용 프로그램을 테스트하기 위해 intern.js을 사용하고 있습니다. 테스트를 실행하고 실패 할 때 스크린 샷을 만들 수 있습니다. 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

인턴에서 이렇게하는 방법은 없습니다. takeScreenshot 메서드는 전체 페이지의 스크린 샷을 base-64로 인코딩 된 PNG로 반환하는 Selenium의 스크린 샷 서비스를 호출하기 만합니다. 인턴의 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(); 
       } 
      }); 
     }); 
    })