【C# 自动化测试】借助js获取浏览器滚动条高度

C#自动化测试滚动条操作语法与实战总结

一、基础操作语法速查

1. 滚动控制核心方法

// 滚动到页面底部（常用）
IJavaScriptExecutor js = (IJavaScriptExecutor)driver;
js.ExecuteScript("window.scrollTo(0, document.body.scrollHeight);");

// 滚动到指定坐标（X=0，Y=1000像素）
js.ExecuteScript("window.scrollTo(0, 1000);");

// 相对当前位置滚动（向下500像素）
js.ExecuteScript("window.scrollBy(0, 500);");

// 滚动到元素可见区域（自动定位目标元素）
IWebElement targetElement = driver.FindElement(By.Id("target"));
js.ExecuteScript("arguments[0].scrollIntoView();", targetElement);

2. 滚动条位置获取

//获取滚动条高度
var h1 = js.ExecuteScript("let ss = document.documentElement.scrollTop; return ss;");//512
var h2 = js.ExecuteScript("let ss = window.scrollY; return ss;");
var h3 = js.ExecuteScript("let ss = window.pageYOffset; return ss;");

// 获取垂直滚动距离（3种兼容写法）
int scrollY1 = (int)js.ExecuteScript("return window.scrollY;");          // 现代浏览器
int scrollY2 = (int)js.ExecuteScript("return window.pageYOffset;");      // 等同于scrollY
int scrollY3 = (int)js.ExecuteScript("return document.documentElement.scrollTop;"); // 标准模式

// 获取文档总高度（兼容不同浏览器）
int totalHeight = (int)js.ExecuteScript(@"
    return Math.max(
        document.body.scrollHeight, 
        document.documentElement.scrollHeight
    );
");

二、核心方法对比表

方法名称	作用描述	典型用法示例	兼容性说明
scrollTo(x, y)	绝对定位滚动（X/Y坐标）	js.ExecuteScript("window.scrollTo(0, 500);")	所有浏览器
scrollBy(dx, dy)	相对当前位置滚动（偏移量）	js.ExecuteScript("window.scrollBy(0, -100);")	所有浏览器
scrollIntoView()	滚动到元素可见区域（居中/顶部/底部）	js.ExecuteScript("arguments[0].scrollIntoView(true);", element)	现代浏览器（IE9+）
document.body.scrollHeight	文档总高度（内容高度）	js.ExecuteScript("return document.body.scrollHeight;")	需结合documentElement兼容

三、实战场景代码模板

场景1：动态加载页面分步滚动

// 每次滚动1/2视口高度，触发无限滚动（最多10次）
for (int i = 0; i < 10; i++) {
    // 获取当前视口高度
    int viewportHeight = (int)js.ExecuteScript("return window.innerHeight;");
    js.ExecuteScript($"window.scrollBy(0, {viewportHeight / 2});"); // 滚动半屏
    Thread.Sleep(800); // 等待异步加载（根据实际情况调整）
}

场景2：元素可见性验证（显式等待）

using OpenQA.Selenium.Support.UI;

// 等待元素完全可见（自定义条件）
WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
wait.Until(d => {
    IWebElement element = d.FindElement(By.Id("hidden-element"));
    // 获取元素在视口内的位置
    var rect = (Dictionary<string, object>)js.ExecuteScript(@"
        var el = arguments[0], rect = el.getBoundingClientRect();
        return { top: rect.top, bottom: rect.bottom };
    ", element);
    // 元素顶部≥0且底部≤视口高度则为可见
    return (double)rect["top"] >= 0 && (double)rect["bottom"] <= d.Manage().Window.Size.Height;
});

场景3：避开固定导航栏遮挡

// 滚动时预留100px安全距离（适用于顶部固定导航栏）
js.ExecuteScript(@"
    var el = arguments[0], rect = el.getBoundingClientRect();
    window.scrollTo(0, rect.top - 100); // 向上调整100px
", targetElement);

四、兼容性与最佳实践

1. 万能兼容写法（解决不同浏览器差异）

// 兼容所有浏览器的滚动位置获取
int scrollTop = (int)js.ExecuteScript(@"
    return window.pageYOffset || 
           document.documentElement.scrollTop || 
           document.body.scrollTop || 0;
");

// 文档总高度安全计算（处理DOCTYPE差异）
int fullHeight = (int)js.ExecuteScript(@"
    return Math.max(
        document.body.scrollHeight, 
        document.documentElement.scrollHeight, 
        document.body.offsetHeight, 
        document.documentElement.offsetHeight
    );
");

2. 性能优化技巧

• 合并JS执行：将多个滚动相关操作写入同一个脚本（减少通信开销）

  js.ExecuteScript(@"
      window.scrollTo(0, 500); 
      var height = document.body.scrollHeight; 
      return height;
  ");
  

• 使用相对滚动：优先scrollBy()处理连续滚动场景，避免重复计算绝对坐标
• 显式等待替代Sleep：使用WebDriverWait动态等待，避免固定延迟影响效率

五、快速记忆口诀

• 滚动到底用scrollTo(0, bodyHeight)
• 元素定位找scrollIntoView()
• 相对滚动选scrollBy(dx, dy)
• 高度获取记兼容（pageYOffset/scrollTop/scrollY）

通过以上代码模板和场景示例，可快速掌握C#自动化测试中滚动条操作的核心语法，适用于WebUI测试中的动态内容处理、元素可见性验证等常见场景。