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方法只调用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();
                }
            });
        });
    })

如何使用实习生js截取DOM元素的屏幕截图？

2 个答案: