Protractor问题：Chrome浏览器设为50%缩放后无法识别元素

我之前也碰到过一模一样的问题！用document.body.style.zoom='50%'这种方式调整页面缩放后，Selenium就找不到元素了——这是因为zoom属性属于浏览器非标准特性，它会直接改变页面元素的实际布局坐标和尺寸，导致Selenium的定位逻辑和渲染后的元素位置不匹配，自然就识别不到了。

给你两个靠谱的解决方案：

方案一：使用浏览器原生缩放参数（推荐） #

这种方式是直接告诉浏览器以指定比例渲染页面，和用户手动调整浏览器缩放的效果一致，Selenium能完美适配：

Chrome浏览器 #

通过ChromeOptions添加--force-device-scale-factor参数：

ChromeOptions options = new ChromeOptions();
// 设置缩放比例为50%
options.addArguments("--force-device-scale-factor=0.5");
WebDriver driver = new ChromeDriver(options);
driver.get("你的目标URL");

Firefox浏览器 #

修改Firefox的layout.css.devPixelsPerPx偏好设置：

FirefoxOptions options = new FirefoxOptions();
// 0.5对应50%缩放，1是默认100%
options.addPreference("layout.css.devPixelsPerPx", "0.5");
WebDriver driver = new FirefoxDriver(options);
driver.get("你的目标URL");

方案二：改用CSS Transform缩放 #

如果必须通过JS动态调整缩放，可以用CSS的transform: scale()替代zoom——它只是视觉上缩放元素，不会改变DOM元素的原始布局坐标，Selenium能正常定位：

browser.get("你的目标URL");
// 缩放50%，并设置缩放原点为左上角，避免页面偏移
browser.driver.executeScript("document.body.style.transform='scale(0.5)'; document.body.style.transformOrigin='0 0';");

我当时用第一种方案解决了问题，原生浏览器缩放比JS调整稳定得多，你可以根据自己的需求选一个试试~

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