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;
};

理论上可行吗？由于无论如何结果都缺少媒体查询，即使我有“完整”报告，移动和桌面样式也都可以在一个文件中存在而无需媒体查询。有没有人尝试做这样的事情？

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覆盖？

1 个答案: