Как обрезать скриншот селена так, чтобы изображение было того же размера, что и данный элемент DOM - PullRequest
Новая
       25

Как обрезать скриншот селена так, чтобы изображение было того же размера, что и данный элемент DOM

0 голосов
/ 22 мая 2019

Пример скриншота нецентрированного заголовка hackernews: attempt to take a screenshot of hackernews header Я пытаюсь сделать снимок экрана DOM-элемента с Selenium (nodejs). Я знаю, что это не поддерживается в Selenium, поэтому мой подход был сделать полноэкранный скриншот, а затем обрезать изображение с размерами элементов.

Моя проблема заключается в том, что координаты x и y, возвращаемые element.getRect (), не совпадают с кадрированием изображения. Я также пытался выполнить js (element.getClientBoundingRect ()) в браузер.

Я пытался использовать easyimage или sharp для обрезки изображений, но что-то в моих размерах неверно. Я также попытался изменить размер изображения до ширины и высоты области просмотра без удачи. Любая помощь будет оценена.

Существует несколько похожих вопросов о переполнении стека, но нет рабочих подходов / решений для среды узла. 

const easyimg = require('easyimage')
const webdriver = require('selenium-webdriver'),
    By = webdriver.By,
    until = webdriver.until;

const driver = new webdriver.Builder()
    .forBrowser('firefox')
    .build();

webdriver.WebDriver.prototype.saveScreenshot = async function (path, elem) {
    const data = elem ? await elem.takeScreenshot() : await driver.takeScreenshot()
    const base64Data = data.replace(/^data:image\/png;base64,/, "")
    const error = fs.writeFileSync(`${path}.png`, base64Data, 'base64')
    if (error) {
        console.error(error)
    }
}

(async () => {

await driver.get(url)
await driver.saveScreenshot('./images')

const cropInFile = async function (size, location, srcFile) {
    await easyimg.crop({
        src: srcFile,
        dst: srcFile,
        cropwidth: size.width,
        cropheight: size.height,
        x: location.x,
        y: location.y,
        gravity: 'NorthWest'
    }
};

 const { height, width, x, y } = await driver.executeScript(`return document.querySelector('${selector}').getBoundingClientRect()`)
 const size = {height, width}
 const location = {x, y}
 await cropInFile(size, location, `./images/name.png`)
})()
...