如何在 watir 中滚动 Web 应用程序答案

【问题标题】：how to scroll a web application in watir如何在 watir 中滚动 Web 应用程序
【发布时间】：2014-09-19 16:21:24
【问题描述】：

如何在 Watir 中滚动 Web 应用程序？

我试过@browser.send_keys :space

这只会使整个页面下降。但是我在应用程序中有一个滚动条，我需要在我的自动化测试中向下和向上滚动垂直滚动条，请帮助我！

谢谢！

<div dojoattachpoint="containerNode" class="containerNode tabContentPane typeNavigationSingleChild" style="overflow: auto; left: 5px; top: 10px; width: 1549px; height: 535px;">
  <div pageid="lifecycle_theme_home_page_dashboard_pageId" id="lifecycle_theme_home_page_dashboard_pageId" style="height: 535px; padding: 0px; width: 1549px;" widgetid="lifecycle_theme_home_page_dashboard_pageId" title="" role="group" class="dijitContentPane wcs-nullLayout">

【问题讨论】：

你能分享页面的html，或者至少是滚动的部分吗？我们是在谈论滚动 iframe 还是像 div 标签之类的东西？
您要测试浏览器滚动条是否有效吗？
滚动条是浏览器上显示的web应用，滚动条是应用的&它有div标签。

标签： scroll watir

【解决方案1】：

解决方案 1) 滚动到最后一个元素

我认为 Vinay 的方法应该奏效。但是，在当前表单中，它假定该元素已经存在于页面上。我猜你想要的元素只有在你滚动得足够远时才可见。所以你可以做的是滚动到 div 中的最后一个元素。

Watir-Webdriver

在 Watir-Webdriver 中：

div_with_scroll = browser.div(:class => 'containerNode tabContentPane typeNavigationSingleChild')
div_with_scroll.elements.last.wd.location_once_scrolled_into_view

Watir-经典

在 Watir-Classic 中，它是不同的，因为它不使用 selenium-webdriver：

div_with_scroll = browser.div(:class => 'containerNode tabContentPane typeNavigationSingleChild')
div_with_scroll.elements.last.document.scrollIntoView

解决方案 2）使用 ScrollTop 属性

作为替代方案，如果上述方法不起作用，您可以设置scrollTop 属性来移动 div 元素的滚动条。这适用于我正在开发的应用程序，该应用程序的内容只有在您滚动到底部时才会加载。

Watir-Webdriver

要将滚动条跳到底部，理论上应该触发下面的内容加载，请将scrollTop属性设置为scrollHeight：

div_with_scroll = browser.div(:class => 'containerNode tabContentPane typeNavigationSingleChild')
scroll_bottom_script = 'arguments[0].scrollTop = arguments[0].scrollHeight'
div_with_scroll.browser.execute_script(scroll_bottom_script, div_with_scroll)

要跳回顶部，请将scrollTop 设置为零。

div_with_scroll = browser.div(:class => 'containerNode tabContentPane typeNavigationSingleChild')
scroll_top_script = 'arguments[0].scrollTop = 0'
div_with_scroll.browser.execute_script(scroll_top_script, div_with_scroll)

您还可以根据需要去的地方使用介于两者之间的任何值。

Watir-经典

在 Watir-Classic 中，您可以更直接地设置scrollHeight：

div_with_scroll = browser.div(:class => 'containerNode tabContentPane typeNavigationSingleChild')

#Go to bottom
div_with_scroll.document.scrollTop = div_with_scroll.document.scrollHeight

#Go to top
div_with_scroll.document.scrollTop = 0

【讨论】：

【解决方案2】：

如果元素位于页面底部，它将加载更多内容：

browser.element.wd.location_once_scrolled_into_view

【讨论】：

它不是用来测试滚动条是否有效。它更多地用于测试页面的加载，当我们滚动条时加载下面的内容。这里还有一个 div 标签的快照，它实际上有我需要滚动的滚动条。
browser.element.wd.location_once_scrolled_into_view 没有帮助:-(

【解决方案3】：

使用 Watir-Classic，Justin Ko 提供的第二种方法非常适合遍历可滚动部分以查找特定内容。这是一个例子：

div_with_scroll = browser.div(:class => 'containerNode tabContentPane typeNavigationSingleChild')
scroll_value = 50 # change this number to match how much you want to scroll each iteration
max_loop = div_with_scroll.document.scrollHeight / scroll_value
if div_with_scroll.document.scrollHeight % scroll_value > 0 # accounts for any remainder height
    max_loop = max_loop + 1
end
for i in 0..max_loop do
    div_with_scroll.document.scrollTop = i * scroll_value # moves the scrollbar
    if div_with_scroll.text.include? 'Search Text'
        puts 'Search Text found in iteration: ' + i.to_s()
        break # exits the loop when found
    end
end

可能有一种更有效的方法来做我正在做的事情，但你明白了。

【讨论】：

【解决方案4】：

使用 Javascript（例如页面底部）：

browser.execute_script("window.scrollTo(0, document.body.scrollHeight);\n")

【讨论】：

【解决方案5】：

使用正确的 javascript 执行程序来实现此结果 - 下面我编写了一些代码来向您展示“在我看来”实现此目标的最佳和最可靠的方法：

页面底部：

((IJavaScriptExecutor)webapplication).ExecuteScript("window.scrollTo(0, document.body.scrollHeight - 5)");

页首：

((IJavaScriptExecutor)webapplication).ExecuteScript("window.scrollTo(0, document.body.scrollHeight 0)");

您还可以设置不同的值以滚动到不同的高度 - 例如，我已将滚动到底部代码设置为距页面底部 5px。祝你好运，希望这对你有点用处。

【讨论】：