SeleniumBase 製作WEB使用者使用導覽，並匯出 JS-使用筆記（三）

星尘的博客發表於2024-04-12
WebJS筆記

自動化福音(爬蟲、辦公、測試等) SeleniumBase 使用筆記（三）

SeleniumBase 製作WEB使用者使用導覽，並匯出 JS

SeleniumBase 包含強大的 JS 程式碼生成器，用於將 Python 轉換為 JavaScript，而製作使用者導覽，就是其中的應用之一，使用者導覽能將 SaaS 產品採用率提高 10 倍或更多

目錄

  1. 建立導覽 的API
  2. 新增導覽步驟 API
  3. 播放導覽 API
  4. 匯出 JS API
  5. 啟用命令
  6. 例子
  7. 執行效果

建立導覽

建立導覽需要使用特定的方法（API）來編寫 Py 指令碼，支援 5 個 JavaScript 庫

# 最短版本
# name      如果同時建立多個導覽，請使用它來標記。
self.create_tour(name=None, theme=None)  # 預設使用 IntroJS

# 利用 Shepherd JS 建立
# theme     可選"light"/"arrows", "dark", "default", "square", and "square-dark"
self.create_shepherd_tour(name=None, theme=None)  # 等同於：self.create_tour(theme="shepherd")

# 利用 Bootstrap Tour 庫建立
self.create_bootstrap_tour(name=None)  # 等同於：self.create_tour(theme="bootstrap")

# 利用 IntroJS 庫建立
self.create_introjs_tour(name=None)  # 等同於：self.create_tour(theme="introjs")

# 利用 DriverJS  庫建立
self.create_driverjs_tour(name=None)  # 等同於：self.create_tour(theme="driverjs")

# 利用 Hopscotch Library 建立
self.create_hopscotch_tour(name=None)  # 等同於：self.create_tour(theme="hopscotch")

新增導覽步驟

要新增遊覽步驟，請使用以下方法：

# 引數說明：
# message   要顯示的訊息
# selector  要附加到的元素的 CSS 選擇器
# name      如果同時建立多個導覽，請使用它來標記。
# title     顯示在郵件上方的其他標題文字。
# theme     設定網站導覽的預設主題。
# alignment 從top", "bottom", "left", "right"中進行選擇。（“top”是預設值，但是 Hopscotch 和 DriverJS 預設 bottom ）
# duration  自動執行下一步時的延遲（僅限 Bootstrap 主題生效）
self.add_tour_step(message, selector=None, name=None, title=None, theme=None, alignment=None, duration=None,)

播放導覽

使用以下方法播放導覽：

# 引數：
# name      如果同時建立多個導覽，請使用它來標記。
# interval  表示將在經過 n 秒後，自動重播
self.play_tour(name=None, interval=0)

匯出導覽

如果要將建立的遊覽儲存為 JavaScript 檔案，請使用下方方法，匯出後的JS，複製到“開發者工具》控制檯”中，提前開啟對應的網站，即可執行：

# name=指定標記匯出，filename=js檔案
self.export_tour(name=None, filename="my_tour.js")

啟用命令

使用下面的命令，直接執行指令碼

# 正常啟動
pytest my_tour.py

# 禁用網站內容的安全策略（不一定對此網站有效），
pytest my_tour.py --disable-csp

例子

例子啟動命令：pytest my_tour.py --firefox --disable-csp 使用火狐瀏覽器，並禁用CSP，CSP是一種安全策略，它允許網站不去載入外部JS。

#!/usr/bin/env python3
# -*- coding: UTF-8 -*-
"""
@ Project     : selenium-base-student 
@ File        : my_tour.py
@ Author      : yqbao
@ Version     : V1.0.0
@ Description : my_tour
"""
from seleniumbase import BaseCase

BaseCase.main(__name__, __file__)


class MyTourClass(BaseCase):
    def test_taobao_tour_intro_js(self):
        self.open('https://www.taobao.com/')  # 開啟頁面
        self.wait_for_element('div.main .main-inner')  # 等待頁面元素可見

        self.create_tour()  # 建立，這等同：self.create_tour(theme='IntroJS')

        self.add_tour_step("歡迎來到淘寶網！", title="開始使用者導覽")  # 新增步驟，指明開始
        self.add_tour_step('商品搜尋框', "input#q", alignment='bottom')  # 下方
        self.add_tour_step('搜尋', "button.btn-search", alignment='bottom')
        self.add_tour_step("您如果有賬號，則登入點這個裡。", 'div.member-ft a:nth-of-type(1)', alignment='bottom')
        self.add_tour_step("您如果沒有賬號，則點這個裡可以註冊屬於您自己的賬號。", 'div.member-ft a:nth-of-type(2)',
                           alignment='bottom')
        self.add_tour_step("分類欄，可以幫助你按照類別查詢。", 'div.J_Service ', alignment='right')  # 右側
        self.add_tour_step("你已經學會使用淘寶啦。", title="使用者導覽結束")  # 新增步驟，指明結束

        self.export_tour(filename="taobao_introjs_tour.js")  # 匯出導覽js

        self.play_tour()  # 播放導覽

執行效果

例子執行效果
image

image

匯出的JS

////////  Load Tour Start Page (if not there now)  ////////

if (window.location.href != "https://www.taobao.com/") {
    window.location.href="https://www.taobao.com/";
}

////////  Resources  ////////

function injectCSS(css_link) {var head = document.getElementsByTagName("head")[0];var link = document.createElement("link");link.rel = "stylesheet";link.type = "text/css";link.href = css_link;link.crossorigin = "anonymous";head.appendChild(link);};
function injectJS(js_link) {var head = document.getElementsByTagName("head")[0];var script = document.createElement("script");script.src = js_link;script.defer;script.type="text/javascript";script.crossorigin = "anonymous";script.onload = function() { null };head.appendChild(script);};
function injectStyle(css) {var head = document.getElementsByTagName("head")[0];var style = document.createElement("style");style.type = "text/css";style.appendChild(document.createTextNode(css));head.appendChild(style);};
injectCSS("https://cdn.jsdelivr.net/npm/intro.js@5.1.0/minified/introjs.min.css");
injectStyle("        .introjs-button.introjs-nextbutton,        .introjs-button.introjs-donebutton {            color: #fff !important;            background-color: #367be5 !important;            border: 1px solid #245ac0 !important;            text-shadow: none;            box-shadow: none;        }        .introjs-button.introjs-nextbutton:hover,        .introjs-button.introjs-donebutton:hover {            color: #fff !important;            background-color: #245ac0 !important;            border: 1px solid #245ac0 !important;        }        .introjs-button {            box-sizing: content-box;            text-decoration: none;        }        .introjs-button.introjs-skipbutton {            color: #367be5;        }        .introjs-tooltip, .introjs-floating {            box-sizing: content-box;            position: absolute;        }");
injectJS("https://cdn.jsdelivr.net/npm/intro.js@5.1.0/intro.min.js");

////////  Tour Code  ////////

function loadTour() { if ( typeof introJs !== "undefined" ) {

    // IntroJS Tour
    function startIntro(){
    var intro = introJs();
    intro.setOptions({
    steps: [
    {
    intro: '<font size="3" color="#33477B"><center><b>開始使用者導覽</b></center><hr>歡迎來到淘寶網！</font>',
    position: 'top'},{element: 'input#q',
    intro: '<font size="3" color="#33477B">商品搜尋框</font>',
    position: 'bottom'},{element: 'button.btn-search',
    intro: '<font size="3" color="#33477B">搜尋</font>',
    position: 'bottom'},{element: 'div.member-ft a:nth-of-type(1)',
    intro: '<font size="3" color="#33477B">您如果有賬號，則登入點這個裡。</font>',
    position: 'bottom'},{element: 'div.member-ft a:nth-of-type(2)',
    intro: '<font size="3" color="#33477B">您如果沒有賬號，則點這個裡可以註冊屬於您自己的賬號。</font>',
    position: 'bottom'},{element: 'div.J_Service ',
    intro: '<font size="3" color="#33477B">分類欄，可以幫助你按照類別查詢。</font>',
    position: 'right'},{
    intro: '<font size="3" color="#33477B"><center><b>使用者導覽結束</b></center><hr>你已經學會使用淘寶啦。</font>',
    position: 'top'},]
    });
    intro.setOption("disableInteraction", true);
    intro.setOption("overlayOpacity", .29);
    intro.setOption("scrollToElement", true);
    intro.setOption("keyboardNavigation", true);
    intro.setOption("exitOnEsc", true);
    intro.setOption("hidePrev", true);
    intro.setOption("nextToDone", true);
    intro.setOption("exitOnOverlayClick", false);
    intro.setOption("showStepNumbers", false);
    intro.setOption("showProgress", false);
    intro.start();
    $tour = intro;
    };
    startIntro();

} else { window.setTimeout("loadTour();",100); } }
loadTour()

在火狐瀏覽器“開發者工具》控制檯”中複製匯出的JS執行
image

導覽，瞭解更多見這裡
GitHub SeleniumBase
本文章的原文地址
GitHub主頁

相關文章