使用Selenium测试Leaflet标记位置：如何获取固定坐标值？

使用Selenium测试Leaflet标记位置时，遇到核心问题：同一经纬度的标记，每次获取的X、Y像素坐标都不一致，连标记的transform属性矩阵值也不固定。

测试代码如下：

var marker = driver.FindElement(By.XPath("//img[@src='" + URL + "css/images/marker-icon.png']"));
var markerX = ((OpenQA.Selenium.WebElement)marker).Location.X;  
var markerY = ((OpenQA.Selenium.WebElement)marker).Location.Y;  
var transform = marker.GetCssValue("transform"); //can i get anything from this?

请问应该如何获取标记的固定位置？

• 直接读取DOM元素的Location或transform不可靠，因为Leaflet会根据地图缩放层级、容器渲染差异、浏览器排版误差等调整标记像素位置，这些都是非确定性的。
• 优先通过Leaflet JavaScript API直接获取标记绑定的经纬度，这才是标记的"固定位置"：
  1. 利用Selenium的ExecuteScript在浏览器上下文执行Leaflet代码，通过DOM元素的_leaflet_id关联到对应的marker实例：

     // 获取纬度
     var latitude = (double)driver.ExecuteScript(@"
         var markerEl = arguments[0];
         var marker = window.map._layers[markerEl._leaflet_id];
         return marker.getLatLng().lat;
     ", marker);
     // 获取经度
     var longitude = (double)driver.ExecuteScript(@"
         var markerEl = arguments[0];
         var marker = window.map._layers[markerEl._leaflet_id];
         return marker.getLatLng().lng;
     ", marker);
     

  2. 如果页面有全局可访问的标记数组，可直接从数组中提取：

     var latLng = (Dictionary<string, object>)driver.ExecuteScript(@"
         // 假设window.markers是页面上的标记实例数组，取第一个标记为例
         return window.markers[0].getLatLng();
     ");
     var latitude = (double)latLng["lat"];
     var longitude = (double)latLng["lng"];
     

• 若必须验证像素位置，需先固定地图状态再获取坐标：
  1. 先通过Leaflet API锁定地图的缩放层级和中心位置：

     driver.ExecuteScript(@"
         // 设置地图中心为目标经纬度，缩放层级固定为10（可根据需求调整）
         window.map.setView([目标纬度, 目标经度], 10);
     ");
     // 等待地图渲染完成，建议用显式等待替代Thread.Sleep
     Thread.Sleep(1000);
     

  2. 解析transform矩阵计算最终像素位置：transform: matrix(a,b,c,d,e,f)中，e和f是X、Y方向的位移值，需结合元素本身的offsetLeft/offsetTop得到最终坐标：

     var transformStr = marker.GetCssValue("transform");
     var matrixRegex = new Regex(@"matrix\(([^,]+),([^,]+),([^,]+),([^,]+),([^,]+),([^,]+)\)");
     var match = matrixRegex.Match(transformStr);
     if (match.Success)
     {
         var transformX = double.Parse(match.Groups[5].Value);
         var transformY = double.Parse(match.Groups[6].Value);
         var offsetLeft = (double)driver.ExecuteScript("return arguments[0].offsetLeft;", marker);
         var offsetTop = (double)driver.ExecuteScript("return arguments[0].offsetTop;", marker);
         var finalX = offsetLeft + transformX;
         var finalY = offsetTop + transformY;
     }
     

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