检查网站是否响应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(() =>

  [...document.querySelectorAll('*')]

  .map(el => el.offsetWidth)

  .filter(width => width > 375)

  .length > 0;

);

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