javascript 使用Chrome无头捕获DOM元素截图Jest截图
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript 使用Chrome无头捕获DOM元素截图Jest截图相关的知识,希望对你有一定的参考价值。
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// Adjustments particular to this page to ensure we hit desktop breakpoint.
page.setViewport({width: 1000, height: 600, deviceScaleFactor: 1});
await page.goto('https://www.chromestatus.com/samples', {waitUntil: 'networkidle'});
/**
* Takes a screenshot of a DOM element on the page, with optional padding.
*
* @param {!{path:string, selector:string, padding:(number|undefined)}=} opts
* @return {!Promise<!Buffer>}
*/
async function screenshotDOMElement(opts = {}) {
const padding = 'padding' in opts ? opts.padding : 0;
const path = 'path' in opts ? opts.path : null;
const selector = opts.selector;
if (!selector)
throw Error('Please provide a selector.');
const rect = await page.evaluate(selector => {
const element = document.querySelector(selector);
if (!element)
return null;
const {x, y, width, height} = element.getBoundingClientRect();
return {left: x, top: y, width, height, id: element.id};
}, selector);
if (!rect)
throw Error(`Could not find element that matches selector: ${selector}.`);
return await page.screenshot({
path,
clip: {
x: rect.left - padding,
y: rect.top - padding,
width: rect.width + padding * 2,
height: rect.height + padding * 2
}
});
}
await screenshotDOMElement({
path: 'element.png',
selector: 'header aside',
padding: 16
});
browser.close();
})();
以上是关于javascript 使用Chrome无头捕获DOM元素截图Jest截图的主要内容,如果未能解决你的问题,请参考以下文章
无头 Chrome 屏幕截图的最大高度为 16,384 像素?
无头Chrome屏幕截图的最大高度为16,384px?
Nightwatch测试在Headless chrome模式下找不到元素
无法使用无头 chrome 在网页上定位元素
您如何将无头 Chrome 与 Selenium 一起使用?
如何通过无头 chrome 管理登录会话?