Playwright中如何实现E2E测试时浏览器的放大与缩小功能？

代码失效原因 #

你使用的模拟Ctrl++快捷键的方式依赖浏览器全局快捷键捕获状态，一旦页面焦点落在输入框、iframe等特殊元素中，或者E2E实例没有激活窗口，快捷键就不会触发全局缩放，稳定性极低。

正确实现方案 #

以常用的Puppeteer/Playwright框架为例，有两种稳定实现方式：

方式一：调用原生缩放API（最稳定，和手动按Ctrl++效果完全一致）

直接调用Chrome DevTools Protocol提供的缩放接口，不需要模拟键盘，兼容性100%：

// Puppeteer 旧版本写法，缩放为原来的170%（对应按7次+的效果）
await page._client.send('Page.setZoomFactor', { factor: 1.7 })

// 最新版Puppeteer已经封装了原生方法，可以直接调用
await page.setZoomFactor(1.7)

Playwright框架调用CDP的写法稍有调整：

const client = await page.context().newCDPSession(page)
await client.send('Page.setZoomFactor', { factor: 1.7 })

注：参数为缩放倍率，1对应100%，大于1为放大，小于1为缩小

方式二：模拟真实用户键盘操作（仅适合需要验证快捷键的场景）

必须先激活页面窗口，确保焦点落在页面根节点后再模拟按键：

// 先激活当前页面窗口，确保能捕获全局快捷键
await page.bringToFront()
// 把焦点设置到页面body上，避免焦点落在其他元素导致快捷键失效
await page.evaluate(() => document.body.focus())
// 执行按键逻辑
await page.keyboard.down('Control');
for (let i = 0; i < 7; i++) {
  await page.keyboard.press('+');
}
await page.keyboard.up('Control');

注：Mac系统下缩放快捷键为Command，只需把按键参数替换为Meta即可兼容

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