Selenium Webdriver でページを下または上にスクロールする方法

Seleniumでスクロールする

Selenium を使用してスクロールするには、Selenium Webdriver を介して JavaScript メソッドを実行するのに役立つ JavaScriptExecutor インターフェイスを使用できます。

構文:

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

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

次のように Selenium WebDriver を使用して Web ページを下にスクロールする様子を見てみましょう。wing 4つのシナリオ:

  • シナリオ 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("http://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)");
    }
}

スクリプトの説明: 上記のコードでは、まず Chrome ブラウザで指定された URL を起動します。 次に、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("http://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);
    }
}

スクリプトの説明: 上記のコードでは、まず 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("http://demo.guru99.com/test/guru99home/");

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

スクリプトの説明: 上記のコードでは、まず 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("http://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);
    }
}

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

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

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

Web ページの横スクロール

詳細については、こちらから JavaScriptエグゼキュータ

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

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

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

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

スクロールバー

スクロールバー

まとめ

  • 上記のチュートリアルでは、さまざまなシナリオを通じて Web ページのスクロールを説明します。
  • 最初のシナリオでは、ページをピクセルごとに下にスクロールする様子を示しました。
  • XNUMX 番目のシナリオでは、要素が表示されるまでページを下にスクロールする様子を示しました。
  • XNUMX 番目のシナリオでは、ページの下部にページの下へのスクロールを表示しました。
  • XNUMX 番目のシナリオでは、Web ページの横スクロールを示します。