软件测试-如何使用selenium操作窗口滚动条

介

我们在进行自动化测试工作的时候，如果页面内容过多，一次性加载耗时太长的话，会使用分段加载来加载页面内容，比如开始只加载页面顶端的内容，而如果要加载更多的数据，就需要我们向下滑动，让页面加载后续的内容；尤其是网页特别长的时候，我们往往需要滑动较长的距离才可以滑动到页面的底端，本文就来介绍一下selenium操作窗口滚动条的方法。

操作步骤

环境准备

我们首先要准备好selenium环境和浏览器驱动，下载好chromedriver或者geckodriver并配置好浏览器驱动的环境变量，这里我们不做赘述，selenium环境配置的文章之前我们已经有介绍过如何配置环境了。

创建Selenium WebDriver实例对象

在使用Selenium之前，我们需要创建一个WebDriver实例，这个实例会充当浏览器的代理，踢我们执行各种操作。以下是一个创建Chrome WebDriver实例的示例：

python

复制代码

from selenium import webdriver # 创建一个Chrome WebDriver实例 driver=webdriver.Chrome()

访问目标网页

使用WebDriver，我们可以访问需要滚动的目标网页。这可以通过get方法来完成：

python

复制代码

# 导航到目标网页 driver.get("https://example.com")

滚动页面

我们有多种方法可以实现页面滚动，下面我们来逐一介绍滚动方法：

滚动到特定元素

可以滚动到特定元素，确保它在可见区域内。以下是一个示例代码，滚动到页面底部的某个元素：

python

复制代码

# 定位到要滚动到的元素 element_to_scroll_to=driver.find_element(By.ID, "element_id") # 使用JavaScript滚动到元素位置 driver.execute_script("arguments[0].scrollIntoView();", element_to_scroll_to)

滚动到页面的底部

如果我们只是想滚动到页面的底部，可以使用以下示例代码：

python

复制代码

# 使用JavaScript滚动到页面底部 driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")

滚动特定坐标

滚动到页面上的特定坐标位置。以下是示例代码，滚动到水平坐标0和垂直坐标500的位置：

python

复制代码

# 使用JavaScript滚动到特定坐标 driver.execute_script("window.scrollTo(0, 500);")

总结

本文主要介绍了使用selenium实现页面滚动的方法步骤，现在页面的内容越来越多，经常需要我们实现页面滚动才可以更好地运行我们地测试用例，希望本文能够帮助到大家。

霍格沃兹测试开发学社|免费学习资料大放送，助你事半功倍！ - 公众号 - 测试人社区

缝滚动是一种常见的网页效果，它可以使内容在页面上连续滚动，而不会出现明显的断裂，且鼠标移入滚动区域会暂停滚动。这种效果在新闻滚动、广告展示、大屏呈现等场景中非常常见。下面我们将介绍如何使用JavaScript和CSS来实现无缝滚动组件，本文实现的组件使用非常简单，只要在html中引入css和js，在需要实现无缝滚动的元素上添加约定的类（cl-seamless-container、cl-seamless-list）就可以自动实现无缝滚动。

HTML结构

首先，我们需要创建一个包含滚动内容的HTML结构，这里我们创建两个滚动示例，每个滚动项的列表数目不同，其中cl-seamless-container类的元素表示滚动组件的容器，cl-seamless-list类包含的是要滚动显示的列表项。接下来将介绍如何仅通过添加这两个类就能实现一个无缝滚动的效果且能够自适应列表项高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./animation.css">    
    <title>动画组件</title>
</head>

<body>
    <h3>无缝滚动组件示例一</h3>
    <div class="cl-seamless-container">
        <ul class="cl-seamless-list">
            <li>滚动项1</li>
            <li>滚动项2</li>
            <li>滚动项3</li>
        </ul>
    </div>

    <h3>无缝滚动组件示例二</h3>
    <div class="cl-seamless-container">
        <ul class="cl-seamless-list">
            <li>滚动项1</li>
            <li>滚动项2</li>
            <li>滚动项3</li>
            <li>滚动项4</li>
            <li>滚动项5</li>
            <li>滚动项6</li>
            <li>滚动项7</li>
            <li>滚动项8</li>
            <li>滚动项9</li>
            <li>滚动项10</li>
        </ul>
    </div>
    <script type="module" src="./animation.js"></script>
</body>

</html>

CSS样式

在进行具体的样式设置之前，先来分析一下怎么做到无缝滚动，下图中蓝色容器的内容才是可见的，想象两个完全相同的列表项向上滑动，从最初的0%的位置滑动到100%的位置后，再次恢复到最初0%的位置，我们发现0%和100%的位置容器内呈现的内容是一样的，也就是说用户感知不到100%到0%的这个切换的抖动，如此循环下去就实现了无缝滚动的效果。因此实现无缝滚动效果需要注意两个关键的点：

容器的高度不能超过滚动列表的高度，否则就会出现抖动；
需要复制一份完全相同的滚动列表填补滚动过程的空隙；

说明：通过类似的思路也可以实现横向无缝滚动，推荐读者动手去试试

接下来，我们就为滚动容器和滚动列表设置一些基本的CSS样式，主要使用css的transform中的translate平移来实现列表向上滚动的动画，@keyframes cl-scrolling定义了关键帧，translate(0px, 0%)表示列表最初的位置，translate(0px, -100%)表示y轴向上平移100%的位置，animation: cl-scrolling 6s infinite linear;表示在6s内完成0%到100%的一次动画并一直循环下去。显然，滚动列表的高度不断增加也会导致滚动的速度变快，因为6s内要完成一次完整滑动，可能会导致滚动太快而导致感知不适。因此，这里并没有在css中设置动画，而是借助js调节合适的速率后再进行设置动画。

.cl-seamless-container {
    overflow: hidden;
}

.cl-seamless-list {
    margin: auto 0;
    padding: auto 0;
    /* 滚动快慢会受滚动列表项的高度影响，在js中调节速率进行控制 */
    /* animation: cl-scrolling 6s infinite linear; */
}

/* 鼠标移入滚动区域变成手型 */
.cl-seamless-container:hover .cl-seamless-list {
    cursor: pointer;
}

/* 鼠标移入滚动区域暂停动画 */
.cl-seamless-container.pause .cl-seamless-list {
    animation-play-state: paused !important;
}

/* 动画关键帧 */
@keyframes cl-scrolling {
    from {
        transform: translate(0px, 0%);
    }

    to {
        transform: translate(0px, -100%);
    }
}

JavaScript逻辑

最后，我们需要编写JavaScript代码来控制滚动效果，JS代码主要实现如下功能：

设置容器的最大高度不能超过单个滚动列表的高度；
根据滚动列表项的高度调节动画播放速度；
复制滚动项列表并插入容器中；
监听鼠标移入和移出事件，向容器添加或移除pause类，实现暂停和恢复滚动效果；

function animation () {
    var seamless_container=document.getElementsByClassName("cl-seamless-container");
    for (let i=0; i < seamless_container.length; i++) {
        if (seamless_container[i].children.length > 0) {
            // 限制每个容器的高度
            let seamless_sub=seamless_container[i].children[0];
            seamless_container[i].style="max-height: " + seamless_sub.clientHeight + "px";
            // 调节滚动速率，使滚动速率不至于过快或过慢
            let scroll_speed=Math.max(4, Math.ceil(seamless_sub.clientHeight / 35));
            seamless_sub.style="animation: cl-scrolling " + scroll_speed + "s infinite linear";
            // 复制一份完全相同的列表，实现无缝滚动
            seamless_container[i].innerHTML +=seamless_container[i].innerHTML;
        }

        // 监听鼠标移入事件，暂停动画; 同时鼠标移出，继续动画
        seamless_container[i].addEventListener("mouseenter", function(event) {
            event.target.classList.add("pause");
            
        });
        seamless_container[i].addEventListener("mouseleave", function(event) {
            event.target.classList.remove("pause");
        })
    }
}

animation();

以上就是实现Web无缝滚动的基本方法，最终效果见开篇的gif动画。

天就给大家分享一个用CSS3技术来实现的横向滚动菜单效果，需要的朋友可以参考下：

具体实现效果图如下：

鼠标划过导航按钮时候，右侧内容会缓慢滑出显示！

实现代码如下：

html:

主要CSS：

该效果主要涉及到CSS3的动画属性，还有元素的隐藏 (overflow / visibility)；大家可以根据自己的需求来美化更好的效果，这主要讲解实现原理！

想学习更多知识，可以关注“恒星网络”头条号！

在线咨询

上一篇：Three.js 动效方案
下一篇：快速了解JavaScript富文本编辑

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

软件测试-如何使用selenium操作窗口滚动条

介

操作步骤

总结

HTML结构

CSS样式

JavaScript逻辑

您的项目需求