SeleniumeBasicでスクロールのハンドル　usage_scroll

2023年2月25日2023年3月19日

　SeleniumBasicを利用して、スクロールの利用方法をご紹介します。

利用目的は業務効率化です。（テスト自動化ではありません）
ブラウザはGoogleChromeが対象です。（EdgeやFirefoxは対象外）
原文のVBAでは現在エラー発生する場合が多いため、修正を加えてます。

Examples.xlsmの保存場所（ここをクリック）

　Examples.xlsmが保存されている場所は、SeleniumBasicがインストールされているサブフォルダ内になります。SeleniumBasicのインストール完了時に保存フォルダを確認することができます。ただ、大体以下フォルダのどちらかにファイル保存されています。

C:\Program Files\Seleniumbasic\Examples\Excel
shell:Local AppData\SeleniumBasic\Examples\Excel

Web要素が画面真中になる様にスクロール　その１

　JavaScriptでキャッチしたWeb要素が画面の真中に映る様にスクロールする構文を紹介します。

Private Sub Scroll_Element_To_Center()
    Dim drv As New ChromeDriver
    drv.Get "https://ja.wikipedia.org/wiki/メインページ"
    drv.Window.Maximize
    Dim elm As WebElement
    Set elm = drv.FindElementByXPath("//*[@id='新しい画像']/span[2]")
    elm.ExecuteScript _
        "this.scrollIntoView(true);" & _
        "window.scrollBy(0, -(window.innerHeight - this.clientHeight) / 2);"
    Debug.Assert 0
    drv.Quit
End Sub

３行目：ウィキペディアのページ取得
４行目：画面最大化
５行目：FindElementByXPathでWeb要素取得
７～９行目：JavaScript構文の実行
１０行目：画面確認のため、ストップ処理

Web要素が画面真中になる様にスクロール　その２

　JavaScriptでキャッチしたWeb要素が画面の真中に映る様にスクロールする構文の2例目を紹介します。前段と同様の動作になります。

Private Sub center()
    Dim elm As selenium.WebElement
    Dim drv As New ChromeDriver
    drv.Get "https://ja.wikipedia.org/wiki/メインページ"
    drv.Window.Maximize
    Set elm = drv.FindElementByXPath("//*[@id='新しい画像']/span[2]")
    Call ScrollIntoViewCenter(elm)
    Stop
    drv.Quit
End Sub

Private Function ScrollIntoViewCenter(element As WebElement)
Const JS_SCROLL_CENTER = _
    "this.scrollIntoView(true);" & _
    "var y = (window.innerHeight - this.offsetHeight) / 2;" & _
    "if (y < 1) return;" & _
    "for (var e=this; e; e=e.parentElement) {" & _
    "  if (e.scrollTop == 0) continue;" & _
    "  var yy = Math.min(e.scrollTop, y);" & _
    "  e.scrollTop -= yy;" & _
    "  if ((y -= yy) < 1) return;" & _
    "}" & _
    "window.scrollBy(0, -y);"
  
    element.ExecuteScript JS_SCROLL_CENTER
End Function

４行目：ウィキペディアのページ取得
５行目：画面最大化
６行目：FindElementByXPathでWeb要素取得
７行目：ScrollIntoViewCenter関数でJavaScript構文の実行

JavaScriptの構文も紹介しておきます。

this.scrollIntoView(true);
var y = (window.innerHeight - this.offsetHeight) / 2;
if (y < 1) return;
for (var e=this; e; e=e.parentElement) {
    if (e.scrollTop == 0) continue;  
    var yy = Math.min(e.scrollTop, y);
    e.scrollTop -= yy;
    if ((y -= yy) < 1) return;
}
window.scrollBy(0, -y);

ｙ軸移動値指定でスクロール

　ｙ軸の移動距離を数値軸指定で行う構文です。Web要素を取得していますが、構文上必要なだけでWeb要素の位置は特に移動とは関係無さそうです。

Private Sub 指定値移動()
    Dim elm As selenium.WebElement
    Dim drv As New ChromeDriver
    drv.Get "https://ja.wikipedia.org/wiki/メインページ"
    drv.Window.Maximize
    Set elm = drv.FindElementByXPath("//*[@id='新しい画像']/span[2]")
    drv.Wait 2000
    Call ScrollVertically(elm, 3500)
    drv.Wait 2000
    Stop
    drv.Quit
End Sub

Private Function ScrollVertically(element As WebElement, y As Long)
Const JS_SCROLL_Y = _
    "var y = arguments[0];" & _
    "for (var e=this; e; e=e.parentElement) {" & _
    "  var yy = e.scrollHeight - e.clientHeight;" & _
    "  if (yy === 0) continue;" & _
    "  yy = y < 0 ? Math.max(y, -e.scrollTop) : Math.min(y, yy - e.scrollTop);" & _
    "  if(yy === 0) continue;" & _
    "  e.scrollTop += yy;" & _
    "  if ((y -= yy) == 0) return;" & _
    "}" & _
    "window.scrollBy(0, y);"

    element.ExecuteScript JS_SCROLL_Y, y
End Function

４行目：ウィキペディアのページ取得
５行目：画面最大化
６行目：FindElementByXPathでWeb要素取得
８行目：ScrollVertically関数でJavaScript構文の実行
　　　　引数でｙ軸の移動距離を数値軸指定（=3500）

JavaScriptの構文も紹介しておきます。

var y = arguments[0];
for (var e=this; e; e=e.parentElement) {
    var yy = e.scrollHeight - e.clientHeight;
    if (yy === 0) continue;
    yy = y < 0 ? Math.max(y, -e.scrollTop) : Math.min(y, yy - e.scrollTop);
    if(yy === 0) continue;
    e.scrollTop += yy;
    if ((y -= yy) == 0) return;
}
window.scrollBy(0, y);

SeleniumBasic Exmaples リファレンス

よかったらシェアしてね！