C# 獲取網頁元素佈局信息 (top/left/width/height)

需求

定位驗證碼圖片並截圖，需獲取任意元素在頁面上的幾何位置與尺寸。

核心思路

注入 jQuery 獲取 position()，將 top/left 寫入臨時屬性，再由 C# 讀取；width/height 直接讀取 CSS。

封裝方法

public dynamic GetRect(JQueryContext node) {
    node.Attr("pos_top", "0");
    node.Attr("pos_left", "0");
    Default.RunScript($@"var pos = $('{node.JQueryExpression}').position();
        $('{node.JQueryExpression}').attr('pos_top', pos.top);
        $('{node.JQueryExpression}').attr('pos_left', pos.left);");
    return new {
        top = node.Attr("pos_top"),
        left = node.Attr("pos_left"),
        width = node.Css("width"),
        height = node.Css("height")
    };
}

調用示例

public void Run() {
    Logger.ClearAll();
    Default.Navigate("https://www.gdtsearch.com/products.spiderstudio.codeviewer.htm");
    Default.Ready();

    var node = Default.SelectSingleNode("HTML > BODY > DIV > DIV > DIV > H2");
    var rect = GetRect(node);
    node.Css("background-color", "yellow"); // 高亮驗證

    Logger.Log($"top = {rect.top}px");
    Logger.Log($"left = {rect.left}px");
    Logger.Log($"width = {rect.width}");
    Logger.Log($"height = {rect.height}");
}

效果

應用場景

• 驗證碼定位截圖
• 元素可視性檢測
• 自動化測試斷言
• 頁面佈局分析