Question

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

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

例如，如果我们打开一个在移动设备上响应的网站（例如Iphone 6，其分辨率为375x667），并且我们分析了所有HTML元素（div，span，{{1 }}，header，section），我们将看到它们的宽度都没有超过375。

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

为此，我尝试以下代码：

footer

在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);中，我有很多桌子，其中一个桌子的宽度为600px（比iPhone 6的375px大）：

http://stackoverflow.com/my-example.html

如何使用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

1 个答案: