WebdriverIO自动化测试中无法实现50%页面缩放的问题求助

以下是几个可行的代码优化方案，解决页面无法缩放到50%的问题：

• 方案1：改用CSS transform实现全局缩放
  原生zoom属性存在浏览器兼容性差异，且易被页面内的CSS规则覆盖。使用transform: scale()作用于根元素，兼容性更强且效果稳定：

  describe('demoqa web testing', () => {
      beforeEach(async function(){
          await browser.maximizeWindow();
      });
  
      it('form testing', async() => {
          await browser.url("https://demoqa.com/automation-practice-form");
          await browser.execute(() => {
              // 对根元素应用缩放，0.5对应50%
              document.documentElement.style.transform = 'scale(0.5)';
              // 设置缩放原点为左上角，避免页面偏移
              document.documentElement.style.transformOrigin = 'top left';
              // 隐藏body滚动条，防止缩放后出现异常滚动
              document.body.style.overflow = 'hidden';
          });
      })
  })
  

• 方案2：通过DevTools协议设置浏览器原生缩放
  如果需要浏览器级别的原生缩放效果（而非页面元素缩放），可以使用Chrome DevTools Protocol（CDP）直接控制浏览器缩放，这个方法不受页面CSS影响：

  describe('demoqa web testing', () => {
      beforeEach(async function(){
          await browser.maximizeWindow();
      });
  
      it('form testing', async() => {
          await browser.url("https://demoqa.com/automation-practice-form");
          // 获取当前窗口尺寸，用于保持窗口大小不变仅调整缩放
          const { width, height } = await browser.getWindowSize();
          // 通过CDP设置缩放为50%
          await browser.cdp('Emulation', 'setDeviceMetricsOverride', {
              width,
              height,
              deviceScaleFactor: 0.5,
              mobile: false,
              scale: 0.5
          });
      })
  })
  

• 方案3：移除页面缩放限制后再设置zoom
  部分页面会通过meta标签或CSS规则禁止缩放，可先移除这些限制再应用缩放：

  describe('demoqa web testing', () => {
      beforeEach(async function(){
          await browser.maximizeWindow();
      });
  
      it('form testing', async() => {
          await browser.url("https://demoqa.com/automation-practice-form");
          await browser.execute(() => {
              // 移除viewport的缩放限制
              const viewportMeta = document.querySelector('meta[name="viewport"]');
              if (viewportMeta) {
                  viewportMeta.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=yes');
              }
              // 设置页面缩放为50%
              document.body.style.zoom = '50%';
          });
      })
  })
  

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