如何使用WebdriverIO实现浏览器缩放？求正确实现代码

你的代码无法生效主要有几个原因：

• 组合键触发方式错误，WebdriverIO需要分步骤按住修饰键、执行操作、释放修饰键
• 不同系统的修饰键不同（Windows/Linux用Control，Mac用Command）
• 调用maximizeWindow()会重置浏览器缩放比例，抵消之前的操作

下面提供两种可靠的实现方式：

方式一：使用键盘按键（适配多系统） #

这种方式模拟真实的键盘操作，需要注意系统差异和按键顺序：

describe("Zoom in and zoom out using keyboard", function () {
  it("Should adjust browser zoom correctly", async function () {
    await browser.url("https://the-internet.herokuapp.com/key_presses");
    
    // 根据系统选择对应的修饰键
    const modifierKey = await browser.isMac() ? "Command" : "Control";
    
    // 执行两次缩小操作
    for (let i = 0; i < 2; i++) {
      await browser.keys([modifierKey]); // 按住修饰键
      await browser.keys("-"); // 按下减号
      await browser.keys(["NULL"]); // 释放修饰键
      await browser.pause(500); // 给浏览器响应时间
    }
    
    const search = await $("//input[@id='target']");
    await search.click();
    await browser.saveScreenshot("./screenshots/keypress_zoom_out.png");
    
    // 执行两次放大操作恢复
    for (let i = 0; i < 2; i++) {
      await browser.keys([modifierKey]);
      await browser.keys("+");
      await browser.keys(["NULL"]);
      await browser.pause(500);
    }
    await browser.saveScreenshot("./screenshots/keypress_zoom_in.png");
  });
});

方式二：使用Chrome DevTools协议（更稳定） #

这种方法不依赖键盘事件，直接通过DevTools控制浏览器缩放，兼容性更好：

describe("Zoom in and zoom out using DevTools", function () {
  it("Should adjust browser zoom via DevTools", async function () {
    await browser.url("https://the-internet.herokuapp.com/key_presses");
    
    // 获取当前窗口尺寸
    const { width, height } = await browser.getWindowSize();
    
    // 缩小到80%比例
    await browser.executeCdp("Emulation.setDeviceMetricsOverride", {
      width,
      height,
      deviceScaleFactor: 0,
      mobile: false,
      scale: 0.8
    });
    await browser.saveScreenshot("./screenshots/keypress_zoom_out_devtools.png");
    
    // 放大到120%比例
    await browser.executeCdp("Emulation.setDeviceMetricsOverride", {
      width,
      height,
      deviceScaleFactor: 0,
      mobile: false,
      scale: 1.2
    });
    await browser.saveScreenshot("./screenshots/keypress_zoom_in_devtools.png");
    
    // 恢复默认缩放比例
    await browser.executeCdp("Emulation.clearDeviceMetricsOverride");
  });
});

注意事项 #

• 不要在缩放后调用maximizeWindow()，该操作会重置浏览器的缩放设置
• DevTools方式仅支持Chrome、Edge等基于Chromium的浏览器
• 若使用键盘方式，确保页面处于可接收键盘事件的状态

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