使用 Puppeteer 检查网站是否响应

Question

我正在尝试创建一个代码来检查某个页面是否具有响应式设计，我打算如何执行此操作？

简单，基本上当一个网站是响应式的时候，它的所有元素，如 div、跨度、页脚、页眉、部分等等...通常具有相同的屏幕宽度，或者通常不会超过该宽度。

例如，如果我们在移动设备上打开一个响应式网站（例如 Iphone 6，它有 375x667），我们分析所有 HTML 个元素（div ,span,header,section,footer),我们会看到它们的宽度都没有超过375.

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

为此，我尝试了以下代码：

const browser = await puppeteer.launch();
const page = await browser.newPage();

await page.goto('http://whosebug.com/my-example.html');
await await page.emulate(devices['iPhone 6']);

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

await browser.close();
console.log(allstyles);

在http://whosebug.com/my-example.html中我有很多表格，其中一张有600px的宽度（超过375px的iPhone 6）：

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

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

Answer 1

直接回答您的问题：您可以使用 page.evaluate 来完成此操作。下面的代码查询页面中的所有元素，获取它们的宽度，过滤它们，只留下宽度大于375的元素，然后检查是否至少有一个元素剩余

代码

const await page.evaluate(() =>
  [...document.querySelectorAll('*')]
  .map(el => el.offsetWidth)
  .filter(width => width > 375)
  .length > 0;
);

但是，您应该考虑是否更愿意只检查滚动条是否可见，例如通过比较 document.body.offsetWidth 和 window.innerWidth。现在，可能有些元素的宽度大于您的页面，但页面可能仍然负责，因为这可能隐藏在 overflow:hidden 容器中。

使用 Puppeteer 检查网站是否响应

Checking if a website is responsive with Puppeteer

javascript

node.js

puppeteer