javascript - 使用 Puppeteer 检查网站是否响应

标签 javascript node.js puppeteer

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

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

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

我的想法是什么?用 Puppeteer 创建一个代码 进入一个网站,模拟一个移动设备(iPhone 6),抓取所有的 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 我有很多表,其中一个有 600px 的宽度(超过 iPhone 6 的 375px):

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

如何使用 Puppeteer 获取所有元素的宽度并检查宽度是否超​​过 375px?

最佳答案

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

代码

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

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

关于javascript - 使用 Puppeteer 检查网站是否响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55955875/

相关文章:

javascript - 如何更改折叠元素的 CSS 填充类?

javascript - 语法错误: missing ) after argument list in express

puppeteer - Chrome Puppeteer : Is it better to do everything via JSHandles or through page. 执行()?

ubuntu - Puppeteer 在 Ubuntu 中运行时无法渲染表情符号

javascript - Puppeteer 没有正常工作(浏览器未聚焦时暂停/卡住)

javascript - css3 翻译成为 child 的相对定位

javascript - 如何设置水平滚动位置 react

javascript - e.preventDefault() 被跳过进行模态加载

node.js - Mongoose - 如何将模式中间件接入 'init' 事件?

node.js - Docker-Compose Postgres 5432 绑定(bind) : Address already in use error