探索Selenium：通过JavaScript增强UI测试效率和效果

在自动化测试中，模拟用户的行为只是任务的一部分。许多时候，测试人员需要更多的控制和灵活性，以验证应用程序的功能和性能。Selenium WebDriver 提供了执行 JavaScript 代码的能力，这一特性为测试人员打开了新的可能性。本文将深入探讨使用 Selenium 执行同步和异步 JavaScript 脚本的技巧和方法，特别是如何利用 JavaScript 来控制页面的滚动条。

1. 同步执行 JavaScript

Selenium 的 execute_script 方法允许测试脚本直接执行 JavaScript 代码。这在需要对 DOM 元素执行操作或调用页面上存在的 JavaScript 函数时非常有用。

driver.execute_script("alert('Hello, World!');")

2. 异步执行 JavaScript

对于需要等待异步操作（如 AJAX 请求）完成的场合，execute_async_script 可以派上用场。它会继续执行，直到指定的 JavaScript 代码返回一个Promise对象。

script = '''
var callback = arguments[arguments.length - 1];
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => callback(data));
'''
result = driver.execute_async_script(script)

3. 控制页面滚动条

有时，测试案例需要验证在页面的不同部分显示的元素。通过 JavaScript 来控制滚动条是一个高效的方法。

a. 滚动到特定元素

element = driver.find_element(By.ID, "targetElementId")
coordinates = element.location_once_scrolled_into_view
driver.execute_script(f"window.scrollTo({coordinates['x']}, {coordinates['y']});")

b. 滚动到页面底部

driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")

c. 平滑滚动

有时候，测试需要模拟真实的用户滚动行为，比如平滑滚动。

driver.execute_script("window.scrollBy({ top: -document.body.scrollHeight, behavior: 'smooth' });")

4. 页面交互

JavaScript 的执行不仅限于页面滚动。通过 JavaScript，可以实现更复杂的页面交互，例如模拟用户的鼠标点击、键盘输入等。

js = '''
var element = document.getElementById('buttonId');
if (element) {
    element.click();
}
'''
driver.execute_script(js)

5. 动态修改样式

测试中可能需要改变元素的样式来验证某些条件下的 UI 表现。

driver.execute_script("document.getElementById('myElement').style.display = 'none';")

**6.示例代码 **

```python
#!/usr/bin/python3
# coding=utf-8
"""
@author: Jeffky
@file: demo12.py
@time: 2024-6-19 9:19
"""
from selenium import webdriver
from time import sleep

from selenium.webdriver import ActionChains, Keys
from selenium.webdriver.common.by import By


class TestCase(object):

    def __init__(self):
        self.driver = webdriver.Chrome()  # 初始化 Chrome 浏览器驱动
        self.driver.maximize_window()  # 最大化浏览器窗口
        self.driver.get('https://www.baidu.com/')  # 打开百度首页

    def test1(self):
        self.driver.execute_script("('test')")  # 执行 JavaScript 代码
        sleep(2)  # 等待 2 秒
        self.driver.switch_to..accept()  # 切换到弹出的对话框并点击确认按钮（此处有误，需要修改）
        sleep(2)  # 等待 2 秒

    def test2(self):
        js = "return document.title"  # 定义获取网页标题的 JavaScript 代码
        title = self.driver.execute_script(js)  # 执行 JavaScript 代码并获取网页标题
        print(title)  # 打印网页标题

    def test3(self):
        js = 'var q = document.getElementById("kw"); q.style.border="2px solid red"'  # 定义设置搜索框边框颜色的 JavaScript 代码
        self.driver.execute_script(js)  # 执行 JavaScript 代码
        sleep(5)  # 等待 5 秒

    def test4(self):
        self.driver.find_element(By.ID, 'kw').send_keys('selenium')  # 在搜索框中输入关键词 "selenium"
        self.driver.find_element(By.ID, 'su').click()  # 点击搜索按钮
        sleep(2)  # 等待 2 秒
        js = 'window.scrollTo(0, document.body.scrollHeight)'  # 定义滚动到页面底部的 JavaScript 代码
        self.driver.execute_script(js)  # 执行 JavaScript 代码
        sleep(5)  # 等待 5 秒

if __name__ == '__main__':
    case = TestCase()  # 创建测试用例对象
    # case.test1()  # 执行 test1 方法（已注释掉）
    # case.test2()  # 执行 test2 方法（已注释掉）
    # case.test3()  # 执行 test3 方法（已注释掉）
    case.test4()  # 执行 test4 方法

#### **7. 总结**

通过 Selenium 的 `execute_script` 和 `execute_async_script` 方法，测试人员可以灵活地执行同步或异步 JavaScript 代码，实现从简单的 DOM 操作到复杂的页面交互和数据获取。这些能力极大地扩展了自动化测试的范围，使得测试脚本能够更贴近真实世界的使用场景。掌握这些技巧，将使自动化测试不仅能够验证基本的用户界面行为，还能深入到页面渲染的细节之中，提高测试覆盖率和有效性。