メニュー

SeleniumWebdriverでスクロールバーを処理する方法

how handle scroll bar selenium webdriver

問題を排除するために楽器を試してください

このチュートリアルでは、スクロールバー、スクロールバーの種類、およびSeleniumでのスクロールバーの処理方法について説明します。

スクロールバーは、コンピューターのディスプレイの端にある細い長いセクションです。スクロールバーを使用すると、コンテンツ全体を表示したり、マウスを使用して上下または左右にスクロールしながらページ全体を表示したりできます。

まず、スクロールバーを参照して使用されるノブ、トラック、ボタンなどの用語を理解しましょう。

=> ここですべてのSeleniumチュートリアルを確認してください

配列javaへの値の追加

Seleniumでのスクロールバーの処理

このチュートリアルでは、スクロールバーの種類について学習します。また、HTMLのスクロールバーを見て、Seleniumでスクロールバーを処理するためのコードの実装を理解し、最後にスクロールバーが一般的に使用される例/アプリケーションを理解します。

学習内容：

スクロールバーを理解する

次の画像は、2種類のスクロールバーを示しています。

スクロールバーの種類

ノブ、トラック、ボタンとは

スクロールバーには ボタン バーの両端には、水平スクロールバーの場合は進むボタンと戻るボタン、垂直スクロールバーの場合は上下のボタンがあります。

つまみ スクロールバーの可動部分です。水平スクロールバーの場合は左右に移動でき、垂直スクロールバーの場合は上下に移動できます。

追跡 は、完全なコンテンツを表示するためにノブを移動できるスクロールバーのセクションです。

以下の画像は、概念を明確に説明しています。

ノブ、トラック、ボタン

(画像 ソース )

スクロールバーの種類

スクロールバーの種類

基本的に、2つのタイプがあります：

  • 水平スクロールバー
  • 垂直スクロールバー

＃1）水平スクロールバー

水平スクロールバーを使用すると、ユーザーは左または右にスクロールして、ウィンドウ上のすべてのコンテンツを表示できます。

水平スクロールバー

上の画像は、赤で強調表示された水平スクロールバーを示しています。スクロールバーを左から右に、またはその逆に移動して、画面に表示されているコンテンツ全体を表示できることがわかります。

＃2）垂直スクロールバー

垂直スクロールバーを使用すると、ユーザーは上下にスクロールしたり、その逆を行ったりして、ウィンドウにコンテンツ全体を表示できます。

垂直スクロールバー

上の画像は、赤で強調表示された垂直スクロールバーを示しています。スクロールバーを上から下に、またはその逆に移動して、画面に表示されているコンテンツ全体を表示できることがわかります。

通常、Webページには多くのコンテンツがあり、垂直スクロールバーがある良い例です。

HTMLのスクロールバー

これは、さまざまなWebサイト、システムアプリケーション、およびほぼすべての場所で非常に一般的に使用されています。これにより、ユーザーは上下または左右にスクロールしてページのコンテンツを完全に表示できます。

以下の画像は、Htmlで作成されたそのような例の1つです。

scrollhtml

上記の画像については、次のHtmlコードを参照してください。

Scroll Bar #text { width: 200px; height: 200px; border: 1px solid; font-size: 30px; overflow: scroll; text-align: center; } Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World! Hello World!

したがって、垂直スクロールバーを使用して上下にスクロールすると、コンテンツ全体が表示されるHTMLページを確認できます。

Seleniumでスクロールバーを処理するためのコード

Seleniumは、さまざまな方法でスクロール操作を処理します。 さまざまな方法は次のとおりです。

＃1）組み込みのスクロールオプションを使用するか、Actionsクラスを使用する

スクロールは、以下の実装コードに示すように、組み込みのスクロールオプションを使用してSeleniumで処理できます。

組み込みのスクロールオプションを使用したスクロールバーの構文：

Actions act = new Actions(driver); //Object of Actions class act.sendKeys(Keys. PAGE_DOWN ).build().perform(); //Page Down act.sendKeys(Keys. PAGE_UP ).build().perform(); //Page Up

組み込みのスクロールオプションを使用してスクロールバーを処理するためのコード。

package SeleniumPrograms; import org.openqa.selenium.By; import org.openqa.selenium.Keys; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; import org.openqa.selenium.interactions.Actions; public class Scroll { public static void main(String() args) throws InterruptedException { WebDriver dr = new FirefoxDriver(); dr.manage().window().maximize(); dr.get('https://opensource-demo.orangehrmlive.com/'); //testing webpage WebElement uname = dr.findElement(By.id('txtUsername')); //username uname.sendKeys('Admin'); WebElement pwd = dr.findElement(By.name('txtPassword')); //password pwd.sendKeys('admin123'); WebElement login_button = dr.findElement(By.xpath('//input(@id='btnLogin')')); login_button.click(); //login button WebElement admin = dr.findElement(By.id('menu_admin_viewAdminModule')); admin.click(); WebElement job = dr.findElement(By.id('menu_admin_Job')); job.click(); WebElement jobtitle_link = dr.findElement(By.linkText('Job Titles')); jobtitle_link.click(); Actions act = new Actions(dr); act.sendKeys(Keys.PAGE_DOWN).build().perform(); //Page Down System.out.println('Scroll down perfomed'); Thread.sleep(3000); act.sendKeys(Keys.PAGE_UP).build().perform(); //Page Up System.out.println('Scroll up perfomed'); Thread.sleep(3000); } }

上記のプログラムコードでは、スクロールはSeleniumで次を使用して処理されます 行動 クラス。これは、ドライバーを渡してActionsクラスのオブジェクトを作成することによって行われます。また、上向きのスクロールと下向きのスクロールに組み込みのスクロールオプションが使用されていることも確認しました。

上記のコードの出力：

スクロールダウン1

(画像 ソース )

スクロールアップする

アニメを無料で見るウェブサイト

したがって、組み込みのスクロールオプションを使用して、またはを使用してSelenium Webdriverを使用して実行された、スクロールダウンおよびスクロールアップ操作を確認できます。 行動 クラスメソッド。

＃2）JavascriptExecutorまたはPixelによる使用

この方法は、上または下にスクロールするピクセル数を指定することで、Webページをスクロールするのに役立ちます。以下は、PixelによるスクロールまたはJavascriptExecutorを使用するための実装コードです。

package SeleniumPrograms; import org.openqa.selenium.By; import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; public class ScrollBar { public static void main(String() args) throws InterruptedException { WebDriver dr = new FirefoxDriver(); dr.manage().window().maximize(); dr.get('https://opensource-demo.orangehrmlive.com/'); //testing webpage WebElement uname = dr.findElement(By.id('txtUsername')); //username uname.sendKeys('Admin'); WebElement pwd = dr.findElement(By.name('txtPassword')); //password pwd.sendKeys('admin123'); WebElement login_button = dr.findElement(By.xpath('//input(@id='btnLogin')')); login_button.click(); //loginbutton JavascriptExecutor js = (JavascriptExecutor)dr; js.executeScript('window.scrollBy(0,70)'); //Scroll Down(+ve) Thread.sleep(3000); System.out.println('Scrolled down..'); js.executeScript('window.scrollBy(0,-50)'); //Scroll Up (-ve) Thread.sleep(3000); System.out.println('Scrolled up..'); } }

上記のコードの出力：

scroll_down2

上の画像は、上記のコードで70（下向き）に記述されているように、ピクセル値によって実行されるスクロールダウンを示しています。同様に、スクロールアップ操作は、ピクセル値= -50（つまり上向き）を指定することによって実行されます。

以下の画像は、上にスクロール（50）を示しています。

scroll_up2

したがって、このメソッドでは、JavascriptExecutorを使用し、ピクセル値を指定して上下にスクロールしました。

例/アプリケーション

スクロールバーのアプリケーションや例は数多くあります。 それらのいくつかは以下に説明されているとおりです：

＃1）Excelファイルのスクロールバー：

私たちが知っているように、Excelファイルには大量のデータが保存されています。 1ページでコンテンツ全体を表示することが難しくなります。したがって、スクロールすると、ユーザーは現在の画面に表示されていないデータを表示するのに役立ちます。

写真付きのyoutubeからmp3へのコンバーター

example_excelファイル

＃2）メモ帳でスクロールする

example_notepad

上の画像では、スクロールバーが水平方向と垂直方向に表示されており、メモ帳ドキュメント内のデータを完全に表示できます。

＃3）ブラウザでのスクロールバーの使用

example_browsers
データを読んでいる間、ブラウザ画面には半分のデータしか表示されません。スクロールすると、ビュー全体を表示するために前後および上下に移動するのに役立ちます。したがって、水平および垂直のスクロールバーを使用することにより、ブラウザ画面全体のコンテンツを表示できます。

ユーザーが画面に表示された完全なデータを表示するのに役立つそのような例は他にもたくさんあります。

結論

このチュートリアルでは、スクロールバーとそのタイプについて学習しました。 HTMLページでスクロールバーを作成して使用することも確認しました

Seleniumを使用してスクロールバーを処理するためのコードを実装する方法を理解しました。つまり、組み込みのスクロールオプション/アクションクラスを使用し、JavascriptExecutor / by Pixelを使用して、スクロールバーが一般的に使用されるいくつかのアプリケーションを実行しました。

=> 完全なSeleniumガイドを読む

推奨読書

^