如何使用Playwright在独立显示模式下测试PWA？

方法一：注入初始化脚本修改matchMedia结果 #

Playwright的emulateMedia方法目前不支持display-mode媒体查询，你可以通过页面初始化时注入脚本，覆盖原生matchMedia的行为，让针对(display-mode: standalone)的查询强制返回匹配状态。

示例代码：

await page.addInitScript(() => {
  const originalMatchMedia = window.matchMedia;
  window.matchMedia = (query) => {
    const result = originalMatchMedia(query);
    if (query === '(display-mode: standalone)') {
      return {
        ...result,
        matches: true,
        addListener: () => {},
        removeListener: () => {},
        addEventListener: () => {},
        removeEventListener: () => {},
        dispatchEvent: () => true
      };
    }
    return result;
  };
});

这段脚本会在页面加载前运行，替换原生方法后，你的应用中isStandalone变量会被设为true，可正常测试对应UI调整逻辑。

方法二：用Chrome--app启动参数模拟独立窗口 #

如果需要贴近真实PWA安装后的运行场景，可配置Chrome启动参数，让浏览器以独立应用窗口打开页面，此时浏览器原生会将display-mode设为standalone。

示例代码：

const browser = await chromium.launch({
  args: ['--app=https://你的PWA地址.com']
});
const context = await browser.newContext();
const page = await context.newPage();
// 此时页面已处于standalone模式，无需额外修改

验证方式 #

测试中可添加断言确认状态是否生效：

const isStandalone = await page.evaluate(() => {
  return window.matchMedia('(display-mode: standalone)').matches;
});
expect(isStandalone).toBe(true);

内容的提问来源于stack exchange，提问作者Ben