Проверка, реагирует ли сайт на Puppeteer

Question

Я пытаюсь создать код, который проверяет, есть ли у определенной страницы адаптивный дизайн, и как я собираюсь это сделать?

Простой, в основном, когда веб-сайт отзывчив, все его элементы, такие как div, span-ы, нижние колонтитулы, заголовки, разделы и т. Д. ... обычно имеют одинаковую ширину экрана или обычно не превышают ее.

Например, если мы открываем веб-сайт, который реагирует на мобильном устройстве (например, Iphone 6, который имеет 375x667), и мы анализируем все элементы HTML (div, span, 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 У меня много таблиц, одна из которых имеет ширину 600 пикселей (более 375 пикселей в iPhone 6):

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

Как я могу использовать Puppeteer, чтобы получить ширину всех элементов и проверить, больше ли ширина 375 пикселей?

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.