是否有可能在一个会话中对多个屏幕尺寸进行 CSS 覆盖？

Question

我正在尝试使用 Puppeteer 创建 CSS 覆盖率报告。它一次适用于一种屏幕尺寸/设备。但我想在一个运行中针对多个屏幕尺寸执行此操作，因此我在最后有一份报告，可以解析它以创建一个 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;
};

理论上可行吗？由于结果中无论如何都缺少媒体查询，即使我有 "full" 报告，移动和桌面的样式都将在没有媒体查询的情况下全部存在于单个文件中。有人试过这样做吗？

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将包含测试结果。

是否有可能在一个会话中对多个屏幕尺寸进行 CSS 覆盖？

Is there a possibility to do CSS Coverage for multiple screen sizes in one session?

puppeteer