时间戳

首页 > 解决方案 > 如何用 puppeteer 模拟设备宽度？

unit-testing - 如何用 puppeteer 模拟设备宽度？

问题描述

我有以下 CSS 代码

body {
  background: white;    
}

@media screen and (min-device-width: 980px) /* Desktop */ {
  body {
    background: red;
  }
}

如何用 puppeteer 模拟设备大小？page.setVieport()或--window-size不工作，因为它模拟视口大小（不是设备）。

标签： unit-testingpuppeteer

解决方案

您可以使用page.emulate函数模拟设备。

文档中的示例：

const puppeteer = require('puppeteer');
const iPhone = puppeteer.devices['iPhone 6'];

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  await page.emulate(iPhone);
  await page.goto('https://www.google.com');
  // other actions...
  await browser.close();
});

如果您在设备列表中找不到您的设备，您可以构建自己的设备并将其传递给emulate.

推荐阅读