检查网站是否响应Puppeteer

Question

我正在尝试创建一个代码，以检查某个页面是否具有响应式设计，我打算如何做到这一点？

简单，基本上是在网站响应时，它的所有元素（例如div，span，footer，header，section等）通常具有相同的屏幕宽度，或者通常不超过该宽度。

例如，如果我们打开一个网站，为响应移动设备（例如iPhone 6，具有375x667），并且我们分析所有的HTML元素（div，span，header，section，footer），我们会看到，他们都没有宽度375超过。

那我的主意是什么？使用操纵符创建代码进入网站，模拟移动设备（iPhone 6），抓取所有HTML元素，并检查每个HTML元素的宽度是否大于iphone 6的屏幕宽度（375像素）。

为此，我尝试以下代码：

const browser = await puppeteer.launch();

const page = await browser.newPage();

await page.goto('http://stackoverflow.com/my-example.html');

await await page.emulate(devices['iPhone 6']);

const allstyles = await page.$$('table');

await browser.close();

console.log(allstyles);

在http://stackoverflow.com/my-example.html我有很多表中，其中一个表的宽度为600像素（iPhone 6的宽度为375像素以上）：

<table align="center" border="0" cellpadding="0" cellspacing="0" width="600">

....

如何使用Puppeteer获取所有元素的宽度并检查宽度是否大于375px？

Answer 1

要直接回答您的问题：您可以使用来做到这一点page.evaluate。以下代码查询页面中的所有元素，获取它们的宽度，对其进行过滤，以便仅宽度大于375stay的元素，然后检查是否至少剩余一个元素。代码const await page.evaluate(() =>&nbsp; [...document.querySelectorAll('*')]&nbsp; .map(el => el.offsetWidth)&nbsp; .filter(width => width > 375)&nbsp; .length > 0;);但是，您应该考虑是否只想检查滚动条是否可见，例如通过比较document.body.offsetWidth和window.innerWidth。目前，可能有宽度大于页面宽度的元素，但是页面可能仍然负责，因为它可能隐藏在overflow:hidden容器中。