ページ内を下または上にスクロールする方法 Selenium ウェブドライバー

⚡ スマートサマリー

ページをスクロールして Selenium WebDriverは Javascript実行するためのエグゼキュータインターフェース JavaWebDriverはDOMを直接操作するため、スクリプトによるスクロールコマンドが必要です。ピクセル単位のスクロール、要素へのスクロール、ページ下部へのスクロール、水平方向のスクロールという4つの実用的なシナリオを取り上げます。

  • 📜 Javascript実行者: Active Runs Javaスクリプトスクロールコマンド Selenium ウェブドライバー。
  • 🔢 ピクセル単位でスクロール: window.scrollBy(x,y) は、ページを指定されたピクセル数だけ移動します。
  • 🎯 要素までスクロールしてください: scrollIntoView() は、対象要素が完全に表示されるまでスクロールします。
  • (すなわち、 一番下までスクロールしてください: document.body.scrollHeight を使用した scrollTo はページの末尾に到達します。
  • ↔️ 横スクロール: scrollIntoView は、画面外の要素にも横方向に移動します。
  • 🧭 スクロールバーの基本: スクロールすると、画面に入ったときにのみ読み込まれる要素が表示されます。

ページを上下にスクロール Selenium webdriver

スクロールイン Selenium

を使用してスクロールするには Seleniumは、使用することができます Java実行を支援するScriptExecutorインターフェース Javaスクリプトメソッド Selenium ウェブドライバー

構文:

JavascriptExecutor js = (JavascriptExecutor) driver;  
   js.executeScript(Script,Arguments);
  • スクリプト – これは Java実行する必要があるスクリプト。
  • 引数 – スクリプトへの引数です。 それはオプションです。

スクロールバーとは何ですか?

スクロールバーは、現在のページのスクロールが画面の表示領域に収まらない場合に、画面内を水平方向または垂直方向に移動できるようにするものです。 ウィンドウを上下に移動するために使用します。

Selenium Webdriver は DOM を操作するため、アクションを実行するためにスクロールする必要はありません。ただし、特定の Web ページでは、ユーザーがスクロールした後にのみ要素が表示されます。このような場合、スクロールが必要になる場合があります。

スクロール バーには XNUMX つのタイプがあります。 水平な (NAIST) と 垂直 以下のスクリーンショットに示すように、スクロール バー。

スクロールバー

スクロールバー

Selenium ページを下にスクロールするスクリプト

次の 4 つのシナリオで、Selenium Web ドライバーを使用して Web ページをスクロールダウンしてみましょう。

  • シナリオ 1: Web ページをピクセル単位で下にスクロールします。
  • シナリオ 2: 要素の可視性によって Web ページを下にスクロールします。
  • シナリオ 3: Web ページをページの一番下までスクロールします。
  • シナリオ 4: Web ページの水平スクロール。

シナリオ 1: Web ページをピクセル単位で下にスクロールします。

Selenium スクリプト

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class ScrollByPixel {

    WebDriver driver;
    @Test
    public void ByPixel() {
        System.setProperty("webdriver.chrome.driver", "E://Selenium//Selenium_Jars//chromedriver.exe");
        driver = new ChromeDriver();

        JavascriptExecutor js = (JavascriptExecutor) driver;

        // Launch the application		
        driver.get("https://demo.guru99.com/test/guru99home/");

        //To maximize the window. This code may not work with Selenium 3 jars. If script fails you can remove the line below		
        driver.manage().window().maximize();

        // This  will scroll down the page by  1000 pixel vertical		
        js.executeScript("window.scrollBy(0,1000)");
    }
}

スクリプト Descriptexpression CMS上記のコードでは、まず指定されたものを起動します。 URL Chromeブラウザで、executeScriptを使ってページを1000ピクセルスクロールします。 Javascript メソッド ScrollBy() は、Web ページを特定のピクセル数までスクロールします。

ScrollBy() メソッドの構文は次のとおりです。

executeScript("window.scrollBy(x-pixels,y-pixels)");

x-pixels は x 軸の数値です。数値が正の場合は左に移動し、数値が負の場合は右に移動します。y-pixels は y 軸の数値で、数値が の場合は下に移動します。数値が負の場合は上に移動します。

例:

js.executeScript("window.scrollBy(0,1000)"); //Scroll vertically down by 1000 pixels

出力分析: 上記のスクリプトを実行したときの出力を次に示します。

Web ページをピクセル単位で下にスクロールする

シナリオ 2: 要素の可視性によって Web ページを下にスクロールします。

Selenium スクリプト

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class ScrollByVisibleElement {

    WebDriver driver;
    @Test
    public void ByVisibleElement() {
        System.setProperty("webdriver.chrome.driver", "G://chromedriver.exe");
        driver = new ChromeDriver();
        JavascriptExecutor js = (JavascriptExecutor) driver;

        //Launch the application		
        driver.get("https://demo.guru99.com/test/guru99home/");

        //Find element by link text and store in variable "Element"        		
        WebElement Element = driver.findElement(By.linkText("Linux"));

        //This will scroll the page till the element is found		
        js.executeScript("arguments[0].scrollIntoView();", Element);
    }
}

スクリプト Descriptイオン: 上記のコードでは、まず Chrome ブラウザで指定された URL を起動します。次に、現在のページで指定された要素が表示されるまでページをスクロールします。 Javascript メソッド scrollIntoView() は、指定された要素が完全に表示されるまでページをスクロールします。

js.executeScript("arguments[0].scrollIntoView();",Element );

「arguments[0]」は、0 から始まるページの最初のインデックスを意味します。

ここで、「 要素 」は Web ページ上のロケーターです。

出力分析: 上記のスクリプトを実行したときの出力を次に示します。

 要素の可視性に基づいて Web ページを下にスクロールします

シナリオ 3: Web ページをページの一番下までスクロールします。

Selenium スクリプト

import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class ScrollByPage {

    WebDriver driver;
    @Test
    public void ByPage() {
        System.setProperty("webdriver.chrome.driver", "E://Selenium//Selenium_Jars//chromedriver.exe");
        driver = new ChromeDriver();

        JavascriptExecutor js = (JavascriptExecutor) driver;

        // Launch the application		
        driver.get("https://demo.guru99.com/test/guru99home/");

        //This will scroll the web page till end.		
        js.executeScript("window.scrollTo(0, document.body.scrollHeight)");
    }
}

スクリプト Descriptイオン: 上記のコードでは、まず Chrome ブラウザで指定された URL を起動します。次に、ページの一番下までスクロールします。 Javascript メソッド scrollTo() はページの最後までスクロールします。

js.executeScript("window.scrollTo(0, document.body.scrollHeight)");

「document.body.scrollHeight」は、本文、つまり Web ページの完全な高さを返します。

出力分析: 上記のスクリプトを実行したときの出力は次のとおりです。

ページの下部にある Web ページを下にスクロールします

シナリオ 4: Web ページの水平スクロール

Selenium スクリプト

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.Test;

public class HorizontalScroll {

    WebDriver driver;
    @Test
    public void ScrollHorizontally() {
        System.setProperty("webdriver.chrome.driver", "E://Selenium//Selenium_Jars//chromedriver.exe");
        driver = new ChromeDriver();

        JavascriptExecutor js = (JavascriptExecutor) driver;

        // Launch the application		
        driver.get("https://demo.guru99.com/test/guru99home/scrolling.html");

        WebElement Element = driver.findElement(By.linkText("VBScript"));

        //This will scroll the page Horizontally till the element is found		
        js.executeScript("arguments[0].scrollIntoView();", Element);
    }
}

スクリプト Descriptイオン: 上記のコードでは、まず Chrome ブラウザで指定された URL を起動します。次に、現在のページで指定された要素が表示されるまでページを水平にスクロールします。 Javascript メソッド scrollIntoView() は、指定された要素が完全に表示されるまでページをスクロールします。

js.executeScript("arguments[0].scrollIntoView();",Element );

出力分析: 上記のスクリプトを実行したときの出力は次のとおりです。

Web ページの横スクロール

詳細については、こちらから Javaスクリプトエグゼキュータ

よくあるご質問

window.scrollBy には負のピクセル値を使用してください。例えば、js.executeScript with window.scrollBy(0,-1000) のように指定します。負の y 値はページを上方向へ移動させ、正の値は下方向へスクロールさせます。

はい。Keys.PAGE_DOWN、Keys.END、または矢印キーを要素に送信するか、Actions クラスを使用できます。 Selenium 4. Javascript執行者は依然として最も柔軟な選択肢である。

ブラウザは表示されているビューポートのみをキャプチャするため、スクリプトはページをスクロールし、セクションをキャプチャしてそれらを結合します。スクロールによって、スクリーンショットを撮る前に遅延読み込みされる画像やコンテンツもトリガーされます。

はい。AIアシスタントは、平易な指示からscrollBy、scrollIntoView、scrollToといったコードスニペットを生成し、ピクセル単位の計算式を説明します。 Revスイート内で実行する前に、ロケーターと待機条件を確認してください。

AIを活用したツールは、新しいコンテンツの読み込みが停止したことを検知し、スクロール深度を動的に調整し、要素が表示されるまでインテリジェントに待機します。これにより、ピクセル数をハードコーディングすることなく、無限スクロールフィードのテストを自動化できます。

scrollBy は現在位置から一定数のピクセルだけページを移動します。scrollIntoView は、特定の要素が表示されるまでスクロールします。距離を指定する場合は scrollBy を、要素を指定する場合は scrollIntoView を使用してください。