SeleniumBase产品导览功能深度解析：打造交互式网页引导体验-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00330/article/details/148415475

SeleniumBase产品导览功能深度解析：打造交互式网页引导体验

SeleniumBase seleniumbase/SeleniumBase: 一个 Python 库，用于自动化 Web 应用程序测试。特点是提供了一个简单易用的 API，可以用于模拟用户操作，包括点击、输入和滚动等。项目地址: https://gitcode.com/gh_mirrors/se/SeleniumBase

一、SeleniumBase导览功能概述

SeleniumBase作为一款强大的Python测试框架，其独特之处在于提供了产品导览(Tour)功能，能够帮助开发者快速创建交互式的网页引导体验。这项功能特别适合用于：

新用户产品引导
功能使用教学
产品更新说明
用户操作指引

二、核心JavaScript库支持

SeleniumBase的导览功能底层整合了五款主流的JavaScript引导库，开发者可以根据需求自由选择：

IntroJS - 简洁直观的引导库，适合基础引导需求
Bootstrap Tour - 与Bootstrap完美兼容的解决方案
DriverJS - 现代化设计，支持丰富的自定义选项
Shepherd - 功能全面，支持多种主题风格
Hopscotch - LinkedIn开源的轻量级引导库

三、创建导览的基本流程

3.1 初始化导览对象

创建导览时，可以选择特定主题或使用默认设置：

# 使用Shepherd主题创建导览
self.create_tour(theme="shepherd")

# 或直接使用特定库的专用方法
self.create_shepherd_tour()

Shepherd主题支持多种风格：dark、light/arrows、default、square和square-dark。

3.2 添加导览步骤

使用add_tour_step方法添加引导步骤：

self.add_tour_step(
    message="这里是引导信息内容",
    css_selector="#element-id",  # 关联的页面元素
    title="步骤标题",  # 可选
    alignment="right",  # 引导框位置，可选
    theme="dark"  # 仅Shepherd支持步骤级主题
)

参数说明：

message: 必填，显示给用户的引导信息
css_selector: 可选，关联的页面元素选择器
title: 可选，步骤标题
alignment: 可选，引导框相对于元素的位置(top/bottom/left/right)
theme: 可选，仅Shepherd支持步骤级主题设置

3.3 播放导览

创建完成后，使用play_tour方法播放：

self.play_tour(interval=2)  # interval参数可选，设置自动播放间隔(秒)

四、高级应用技巧

4.1 多导览管理

当需要在一个测试用例中创建多个导览时，可以使用name参数进行区分：

# 创建第一个导览
self.create_tour(name="main_tour")

# 创建第二个导览
self.create_tour(name="secondary_tour")

# 为不同导览添加步骤
self.add_tour_step("第一步", name="main_tour")
self.add_tour_step("补充说明", name="secondary_tour")

# 播放特定导览
self.play_tour(name="main_tour")

4.2 导览导出功能

SeleniumBase支持将创建的导览导出为独立的JavaScript文件：

self.export_tour(filename="custom_tour.js")

导出的文件可以：

脱离SeleniumBase环境独立使用
直接在浏览器控制台执行
集成到其他Web应用中

五、实战案例解析

以下是一个完整的Google搜索页面引导案例：

from seleniumbase import BaseCase

class GoogleTourTest(BaseCase):
    def test_google_search_tour(self):
        # 启用无头模式
        if not self.undetectable:
            self.get_new_driver(undetectable=True)
        
        # 打开Google并等待页面加载
        self.open('https://google.com/ncr')
        self.wait_for_element('input[title="Search"]')
        self.hide_elements("iframe")  # 隐藏干扰元素

        # 创建暗色主题导览
        self.create_tour(theme="dark")
        self.add_tour_step("欢迎使用Google搜索", title="欢迎")
        self.add_tour_step("在此输入搜索关键词", '[title="Search"]')
        self.play_tour()

        # 模拟用户输入
        self.highlight_type('input[title="Search"]', "SeleniumBase")
        self.wait_for_element('[role="listbox"]')  # 等待自动补全框出现

        # 创建第二个亮色主题导览
        self.create_tour(theme="light")
        self.add_tour_step("点击搜索按钮提交", '[value="Google Search"]')
        self.add_tour_step("或直接按Enter键", '[title="Search"]')
        self.play_tour()