メニュー

Seleniumでスクリーンショットを撮る方法

how take screenshot selenium

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

このチュートリアルでは、Seleniumスクリーンショットの重要性と、Ashotを使用してSeleniumアプリケーションでスクリーンショットを撮る方法を例を挙げて説明します。

スクリーンショットは基本的にバグ分析に使用されます。これらは、アプリケーションがユーザーの要件に従って機能するかどうかを理解するのに役立ちます。

テストケースごとに、受信する出力が異なる場合があります。正しい出力が受信される場合、エラーが発生する場合、入力データがないか不十分なためにエラーメッセージが表示される場合などがあります。スクリーンショットは、アクション/出力の証明を追跡するのに役立ちます。受け取りました。

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

Seleniumのスクリーンショット

銀行アプリケーションのサンプルテストケース

このチュートリアルでは、Seleniumのスクリーンショットが必要な場所を学習します。 Ashotについて説明し、SeleniumでAshotを使用する方法（ashot（）のインストールと構成）、Seleniumでスクリーンショットをキャプチャする方法（Webページ全体、ページ上の1つの要素、現在開いているウィンドウ）について説明し、比較も行います。 2つの画像）次に、スクリーンショットが頻繁にキャプチャされるいくつかの例を見てください。

学習内容：

Seleniumスクリーンショットを理解する

GmailLogin

上の画像は、GmailWebサイトからコードを実行しているときにキャプチャされたスクリーンショットの例です。この画像は、ユーザーが正しいユーザー名とパスワードで電子メールアカウントに正常にログインしたことを確認するのに役立ちます。

したがって、スクリーンショットは、アクションの実行後に受信したアクション/出力をキャプチャするのに非常に役立ち、したがって、問題なく実行されているアクションを確認するのに役立ちます。

Seleniumは自動的にスクリーンショットを撮ることができます。スクリーンショットが必要なコード実行の過程で、スクリーンショットのコードを追加するだけです。

Seleniumのスクリーンショットはどこに必要ですか

以下が可能性です：

  • Webページで要素を見つけるのに問題がある場合。
  • ページ上のWeb要素の検索にタイムアウトがある場合。
  • システム/アプリケーションでエラーまたは問題が発生したとき。
  • アサーションエラーが発生したとき。

アショットとは

Ashot（）は、スクリーンショットをキャプチャするためにSeleniumWebドライバーによってサポートされているサードパーティのユーティリティです。

Ashot（）は、スクリーンショットをキャプチャする際の以下の操作を提供します。

  • ページ全体をキャプチャする
  • Web要素のキャプチャ
  • 画像の比較

次のセクションで、これがどのように正確に機能するかを見てみましょう。

Ashotの機能：

  • ページ全体のスクリーンショットを撮ることができます。
  • Android Emulator Browser、iOS Simulator Mobile Safari、さまざまなデスクトップブラウザなどのさまざまなプラットフォームでサポートされているWeb要素のスクリーンショットを撮ることもできます。
  • 柔軟なスクリーンショットの比較を提供します。
  • スクリーンショットを飾ります。

Ashotは、次の3つのステップでスクリーンショットを撮ることができます。

  • ページ全体のスクリーンショットをキャプチャします。
  • 要素のサイズと位置を見つけます。
  • 元のスクリーンショットを切り抜きます。

SeleniumでAshotをどのように使用できますか

マシンにAshotをダウンロードして構成するには、次の手順を検討してください。

  1. に移動します リンク。
  2. Ashotに存在するjarファイルの最新バージョンを見つけます。
  3. jarファイルをダウンロードして、マシンの特定のパスに保存します。
  4. Eclipseでjarファイルをプロジェクトに追加するには–プロジェクトに移動–>右クリック–>プロパティに移動->ビルドパスを選択->ライブラリ->外部jarを追加
  5. ダウンロードしたjarファイルが保存されているパスを参照します。
  6. jarファイルを選択し、(適用)をクリックして、閉じます。

Seleniumでスクリーンショットをキャプチャする方法

Seleniumは、スクリーンショットをキャプチャするための組み込み機能を提供します。要件に従って、 TakesScreenshot インターフェイスは、Seleniumスクリプトの実行中にスクリーンショットを撮るために使用されます。したがって、Selenium Webdriverは、コードの実行中にスクリーンショットをキャプチャするのに役立ちます。

以下のセクションでは、キャプチャされるさまざまなスクリーンショットの種類について学習します。

タイプは次のとおりです。

次のスクリーンショットをキャプチャします。

  • 現在開いているウィンドウ
  • Webページ全体
  • 特定のWeb要素のみ
  • スクリーンショット画像と元の画像の比較

以上の点を詳しく理解していきましょう。

＃1）現在開いているウィンドウ

現在開いているウィンドウのSeleniumでスクリーンショットを処理するためのコードの実装を見てみましょう。

package SeleniumPrograms; import java.io.File; import java.io.IOException; import java.util.concurrent.TimeUnit; import org.apache.commons.io.FileUtils; import org.openqa.selenium.OutputType; import org.openqa.selenium.TakesScreenshot; import org.openqa.selenium.WebDriver; import org.openqa.selenium.firefox.FirefoxDriver; import org.testng.annotations.Test; @Test public class Screenshot { public static void main(String() args) throws IOException { // TODO Auto-generated method stub WebDriver drv = new FirefoxDriver(); drv.manage().window().maximize(); //always write wait code after this drv.manage().timeouts().pageLoadTimeout(10, TimeUnit.SECONDS);//for page load drv.get('https://opensource-demo.orangehrmlive.com/'); //Testing webpage drv.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); //for Implicit wait //Capturing the screenshot File f = ((TakesScreenshot) drv).getScreenshotAs(OutputType.FILE); FileUtils.copyFile(f, new File('C:/Users/Chait/Desktop/Screenshots/screenshot01.png')); //screenshot copied from buffer is saved at the mentioned path. System.out.println('The Screenshot is captured.'); } }

以下の画像は、上記のコード実装の出力です。ここでは、OrangeHRMサイトが開いており、ログインページのスクリーンショットがキャプチャされています。

現在開いているウィンドウ

(画像 ソース )

したがって、コードの実行中に必要な場所でスクリーンショットをキャプチャできます。キャプチャされたスクリーンショットは、拡張子が.pngまたは.jpegのファイルに保存されます。画像ファイルを保存する必要があるパスを指定する必要があります。

C ++用のEclipseをセットアップする方法

＃2）Webページ全体

Selenium WebdriverのAshotを使用して、ページ全体のスクリーンショットをキャプチャするための以下の実装コードを見てみましょう。このために、–からのページ（Jmeter-user-defined-variables）の例を考えてみましょう。 softwaretestinghelp.com 。

package SeleniumPrograms; import java.io.File; import java.io.IOException; import java.util.ArrayList; import java.util.concurrent.TimeUnit; import javax.imageio.ImageIO; import org.apache.commons.io.FileUtils; import org.openqa.selenium.By; import org.openqa.selenium.JavascriptExecutor; import org.openqa.selenium.OutputType; import org.openqa.selenium.TakesScreenshot; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; import ru.yandex.qatools.ashot.AShot; import ru.yandex.qatools.ashot.Screenshot; import ru.yandex.qatools.ashot.shooting.ShootingStrategies; public class Screenshot_EntirePage { public static void main(String() args) throws InterruptedException, IOException { WebDriver drv = new FirefoxDriver(); drv.manage().window().maximize(); //always write wait code after this drv.manage().timeouts().pageLoadTimeout(10, TimeUnit.SECONDS); //for page load drv.get('https://www.softwaretestinghelp.com/'); //Testing webpage drv.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); //for Implicit wait WebElement auto = drv.findElement(By.xpath('//ul(@id='mega-menu-primary')/li(6)')); auto.click(); //click Automation tab WebElement jmeter = drv.findElement(By.linkText('JMeter')); //link to JMeter page jmeter.click(); //scroll down to open a link among various links, in the Video Tutorials section of the page JavascriptExecutor js = (JavascriptExecutor) drv; js.executeScript('window.scrollBy(0,1700)'); //scrolling downwards Thread.sleep(1500); WebElement udv = drv.findElement(By.linkText('User-Defined Variables')); udv.click(); //opening User-Defined Variables link Thread.sleep(1500); //Capturing the Screenshot with the help of ashot() Screenshot screenshot=new AShot().takeScreenshot(drv); ImageIO.write(screenshot.getImage(),'PNG',new File('C:\Users\Chait\Desktop\Screenshots\entirepage.png')); //The screenshot to be captured will be in .png image format and would be saved at above mentioned path. System.out.println('Screenshot for full page is captured successfully!'); } }

ここでは、 jmeter-user-defined-variables 当社のウェブサイトのページ： www.softwaretestinghelp.com が開かれ、この完全なWebページのスクリーンショットが（セレンのashot（）を使用して）.png形式で撮影され、目的のパスに保存されました。同じ方法で、任意のWebページのページ全体のスクリーンショットをキャプチャできます。

したがって、ページ全体のスクリーンショットをキャプチャするために上記のコードを実装すると、受信した出力は、完全なWebページのスクリーンショットの次の画像のようになります。

全体ページ

＃3）Web要素

以下の実装コードを見てみましょう。SeleniumWebドライバーでAshotを使用して、Webページ上の特定のWeb要素のスクリーンショットをキャプチャします。

package SeleniumPrograms; import java.io.File; import java.io.IOException; import java.util.concurrent.TimeUnit; import javax.imageio.ImageIO; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxDriver; import org.testng.annotations.Test; import ru.yandex.qatools.ashot.AShot; import ru.yandex.qatools.ashot.Screenshot; import ru.yandex.qatools.ashot.shooting.ShootingStrategies; @Test public class Screenshot_WebEle_Ashot { public static void main(String() args) throws IOException { // TODO Auto-generated method stub WebDriver drv = new FirefoxDriver(); drv.manage().window().maximize(); //always write wait code after this drv.manage().timeouts().pageLoadTimeout(10, TimeUnit.SECONDS); //for page load drv.get('https://opensource-demo.orangehrmlive.com/'); //Testing webpage drv.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); //for Implicit wait WebElement uname = drv.findElement(By.id('txtUsername')); //Username....ID.... uname.sendKeys('Admin'); WebElement pword = drv.findElement(By.id('txtPassword')); //Password....ID.... pword.sendKeys('admin123'); WebElement login_b = drv.findElement(By.xpath('//input(@id='btnLogin')')); login_b.click(); //Login button....XPATH.... WebElement ele = drv.findElement(By.linkText('Maintenance')); ele.click(); //opening link for element for which we want screenshot // pass driver as well as the element in takeScreenshot() method. Screenshot Screenshot_webele = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(100)).takeScreenshot(drv, ele); // For saving the screenshot in .png/.jpeg format at the desired location ImageIO.write(Screenshot_webele.getImage(),'png',new File('C:\Users\Chait\Desktop\Screenshots\element.jpeg')); System.out.println('Screenshot for specified element captured successfully!'); } }

したがって、特定の要素（ここでは(メンテナンス)タブ）のスクリーンショットをキャプチャするための上記のコードを実装すると、 受信した出力は下の画像のようになります。

Maintenance_WebElement 1

ここでは、スクリーンショットが必要な要素として「メンテナンス」タブを選択します。スクリーンショットを保存するパスを指定します。同じように、そのようなWebサイトで他の要素のスクリーンショットをキャプチャすることもできます。

＃4）スクリーンショットと元の画像の比較

Selenium WebドライバーでAshotを使用して、Webページ上のロゴ要素のスクリーンショットをキャプチャして元のロゴと比較する以下の実装コードを見てみましょう。

このために、の例を考えてみましょう naukri.com ：

package SeleniumPrograms; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import java.util.concurrent.TimeUnit; import javax.imageio.ImageIO; import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.chrome.ChromeDriver; import org.openqa.selenium.firefox.FirefoxDriver; import ru.yandex.qatools.ashot.AShot; import ru.yandex.qatools.ashot.Screenshot; import ru.yandex.qatools.ashot.comparison.ImageDiff; import ru.yandex.qatools.ashot.comparison.ImageDiffer; public class Screen_Compare { public static void main(String() args) throws IOException { // TODO Auto-generated method stub WebDriver drv = new FirefoxDriver(); drv.manage().window().maximize(); //always write wait code after this drv.manage().timeouts().pageLoadTimeout(10, TimeUnit.SECONDS); //for page load drv.get('https://www.naukri.com/nlogin/login'); //Testing webpage drv.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS); //for Implicit wait // Finding the logo element and capturing its screenshot WebElement logo = drv.findElement(By.xpath('//a(@class='nLogo fl')/img')); Screenshot logoSrcshot = new AShot().takeScreenshot(drv, logo); // Reading the image for comparision BufferedImage expectedImage = ImageIO.read(new File('C:\Users\Chait\Desktop\naukri_Logo.png')); BufferedImage actualImage = logoSrcshot.getImage(); ImageDiffer img_differnece = new ImageDiffer(); // Creating ImageDiffer object and calling the method makeDiff() ImageDiff differnece = img_differnece.makeDiff(actualImage, expectedImage); if (differnece.hasDiff() == true) //Checking the difference using in-built functions) { System.out.println('Both logo images matched') //in case when no difference found } else { System.out.println('The logo images are different'); //in case when difference found } } }

したがって、ロゴ要素（ここではnaukri.comロゴ）のスクリーンショットを比較するために上記のコードを実装すると、受信した出力は次の画像のようになります。

naukriロゴ

ここでは、「naukri.com」のロゴを選択し、そのスクリーンショットをキャプチャして、元のロゴと比較します。画像間の違いは、組み込み関数を使用して見つけられます。 2つのロゴ画像に違いがない場合、プログラムは出力を「 両方のロゴ画像が一致しました 」elseは「 ロゴ画像が異なります 」。

スクリーンショットが頻繁にキャプチャされる例

＃1）ログアウト確認

Webサイトにログインするには、正しいユーザー名とパスワードを入力する必要があります。その後、Webサイトにログインします。次に、ユーザーは必要なオプションを実行し、作業が完了すると、ユーザーはログアウトされます。

したがって、ログアウト後にスクリーンショットのコードを提供すると、ログアウトアクションを確認するログインページが再度表示されます。 詳細については、以下の画像を参照してください。

ログアウト確認

＃2）新しく作成されたレコードの確認

C ++コードでのハッシュテーブルの実装

新しいレコードを作成した後にスクリーンショットのコードを追加すると、レコードが正常に作成されたことを確認できます。 詳細については、以下のスクリーンショットを参照してください。

新しく作成されたレコードの確認

レコードが作成されていない場合、コードはスクリーンショットのキャプチャに進みません。これにより、レコードが正常に作成されていないことが確認されます。

＃3）出力の欠落/不正確の例

この例には、OrangeHRMWebサイトでの役職の新しいレコードの作成が含まれます。ここで、(役職)フィールドには「*」のマークが付いています。これは、必須フィールドであることを意味します。したがって、必要なフィールドが入力されるまでレコードは作成されません。その後、レコードを保存できるのは私たちだけです。 詳細については、以下のスクリーンショットを参照してください。

出力の欠落/不正確の例

結論

したがって、この記事では、Seleniumのスクリーンショットが必要な場所、Seleniumでスクリーンショットを処理する方法、Ashotとは何か、Seleniumでダウンロード、構成、および実際に使用する方法について説明しました。スクリーンショットを処理するためのコードの実装を理解し、スクリーンショットが頻繁にキャプチャされるいくつかの例も確認しました。

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

推奨読書

^