如何解决Selenium Mobile WebDriver指定元素截图缩放错位问题？

这问题我之前做移动端自动化截图时也踩过坑！根本原因是Chrome移动模拟模式会启用设备像素比(DPR)，你代码里用的element.Location和element.Size是逻辑坐标/尺寸，但GetScreenshot()获取的是物理像素分辨率的截图，两者缩放比例不匹配，自然裁剪出来的位置和大小全错了。

修复步骤 #

核心就是把元素的逻辑坐标转换为截图对应的物理像素坐标：

1. 通过JavaScript获取当前页面的设备像素比window.devicePixelRatio
2. 用这个比例值，把元素的位置和尺寸都乘以它，得到真实的裁剪区域
3. 再用转换后的区域去裁剪全屏截图

修改后的代码（C#） #

IWebElement element = driver.FindElement(By.XPath(elementSelector));
// 获取设备像素比
var dpr = (double)((IJavaScriptExecutor)driver).ExecuteScript("return window.devicePixelRatio;");
// 截取全屏截图
var byteArray = ((ITakesScreenshot)driver).GetScreenshot().AsByteArray;
var screenshot = new Bitmap(new MemoryStream(byteArray));
// 转换元素的逻辑坐标为物理像素坐标
int physicalX = (int)(element.Location.X * dpr);
int physicalY = (int)(element.Location.Y * dpr);
int physicalWidth = (int)(element.Size.Width * dpr);
int physicalHeight = (int)(element.Size.Height * dpr);
// 创建正确的裁剪区域
var croppedImage = new Rectangle(physicalX, physicalY, physicalWidth, physicalHeight);
// 裁剪截图
var finalScreenshot = screenshot.Clone(croppedImage, screenshot.PixelFormat);
return finalScreenshot;

为什么桌面模式没问题？ #

桌面浏览器默认的设备像素比通常是1（高DPI屏幕可能例外，但模拟桌面模式时一般不会启用移动端的缩放逻辑），所以逻辑坐标和物理像素完全一致，直接裁剪就正常。

额外注意点 #

• 确保你的Driver实例支持IJavaScriptExecutor（ChromeDriver是支持的）
• 如果页面有滚动，要先确保元素在视口内，否则Location可能不是相对于整个文档的坐标（可以先执行滚动脚本把元素带到视口）

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