Есть ли возможность сделать CSS Coverage для нескольких размеров экрана за один сеанс?

Question

Я пытаюсь создать отчет о покрытии CSS с помощью Puppeteer. Он отлично работает для одного размера экрана / устройства за раз. Но я хочу сделать это для нескольких размеров экрана за один прогон, поэтому у меня есть один отчет в конце, и я могу проанализировать его, чтобы создать один файл CSS для всех размеров экрана. Синтаксический анализ не является проблемой, а отчет содержит только результаты последнего размера устройства / экрана.

Я надеялся, что что-то подобное сработает, но это не так:

const puppeteer = require('puppeteer');
const deviceDescriptors = require('puppeteer/DeviceDescriptors');

const coverage = async (host, pageSlug, device) => {
  let browser = await puppeteer.launch({
    args: [
      `--window-size=${device.width},${device.height}`
    ]
  });
  let page = await browser.newPage();
  await page.setViewport({
    width: device.width,
    height: device.height
  });

  await page.coverage.startCSSCoverage({ resetOnNavigation: false });

  await page.goto(host + '/' + pageSlug + '?fullcss');
  await page.emulate(deviceDescriptors['iPhone 7']);
  await page.reload();
  let cssCoverage = await page.coverage.stopCSSCoverage();

  await browser.close();
  return cssCoverage;
};

Возможно ли это даже теоретически? Так как медиа-запросы отсутствуют в результате, в любом случае, даже если бы у меня был «полный» отчет, все стили для мобильных и настольных компьютеров были бы в одном файле без медиа-запросов. Кто-нибудь пытался сделать что-то подобное?

Answer 1

Самый простой способ сделать это - запустить отчеты один за другим, как показано ниже:

// the configs you want to test
const configs = [
  {host: '...', pageSlug: '...', device: { /* ... */ } },
  {host: '...', pageSlug: '...', device: { /* ... */ } },
  {host: '...', pageSlug: '...', device: { /* ... */ } },
];

const coverage = async ({ host, pageSlug, device }) => {
  // ... your code
};

const results = [];

for(const config of configs) {
  const result = await coverage(config);
  results.push(result);
}

После выполнения переменная results будет содержать результаты теста.