Menu

Jak zrobić zrzut ekranu w Selenium

how take screenshot selenium

Wypróbuj Nasz Instrument Do Eliminowania Problemów

Ten samouczek wyjaśnia znaczenie Selenium Screenshot i jak używać Ashota do robienia zrzutu ekranu w aplikacji Selenium z przykładami:

Zrzuty ekranu są zasadniczo używane do analizy błędów. Pomagają w zrozumieniu, czy aplikacja działa zgodnie z wymaganiami użytkownika, czy nie.

Dla każdego przypadku testowego otrzymane dane wyjściowe mogą być inne, czasami otrzymywane są prawidłowe dane wyjściowe, czasami otrzymujemy błąd, czasami pojawia się komunikat o błędzie z powodu braku lub niewystarczających danych wejściowych itp. Zrzut ekranu pomaga w śledzeniu dowodów działań / wyników Odebrane.

=> Sprawdź WSZYSTKIE samouczki dotyczące Selenium tutaj

Zrzuty ekranu Selenium

W tym samouczku dowiemy się, gdzie potrzebne są zrzuty ekranu Selenium. Omówimy Ashot i jak możemy używać Ashota w Selenium (instalacja i konfiguracja ashot ()), nauczymy się przechwytywać zrzuty ekranu w Selenium (dla całej strony internetowej, dla pojedynczego elementu na stronie i dla aktualnie otwartego okna, również porównując 2 obrazy), a następnie spójrz na kilka przykładów, w których zrzuty ekranu są często przechwytywane.

Czego się nauczysz:

Zrozumienie zrzutów ekranu Selenium

Gmail logowanie

Powyższy obraz jest przykładem zrzutu ekranu przechwyconego podczas wykonywania kodu ze strony Gmaila. Obraz pomaga w potwierdzeniu, że użytkownik pomyślnie zalogował się na konto e-mail przy użyciu poprawnej nazwy użytkownika i hasła.

W związku z tym zrzuty ekranu są bardzo pomocne w przechwytywaniu działań / wyników otrzymywanych po wykonaniu akcji, a tym samym pomagają w potwierdzeniu wykonania czynności bez żadnego problemu.

Selenium może automatycznie robić zrzuty ekranu; musimy po prostu dodać kod do zrzutu ekranu w procesie wykonywania dowolnego kodu, w którym potrzebne są zrzuty ekranu.

Gdzie potrzebne są zrzuty ekranu z selenu

Oto możliwości:

  • Gdy występuje problem ze znalezieniem elementu na stronie internetowej.
  • Gdzie występuje przekroczenie limitu czasu podczas znajdowania elementów internetowych na stronie.
  • Gdy w systemie / aplikacji wystąpi błąd lub problem.
  • Napotkanie błędu asercji.

Co to jest Ashot

Ashot () to narzędzie innej firmy, które jest obsługiwane przez sterownik sieciowy Selenium do przechwytywania zrzutów ekranu.

Ashot () udostępnia poniższe operacje w przechwytywaniu zrzutów ekranu:

  • Przechwytywanie całej strony
  • Przechwytywanie elementu WWW
  • Porównywanie obrazów

Zobaczmy, jak dokładnie to działa w następnej sekcji.

Cechy Ashot:

jak otworzyć okna plików bin
  • Możliwe jest wykonanie zrzutu całej strony.
  • Możliwe jest również wykonanie zrzutu ekranu elementu internetowego, który jest obsługiwany na różnych platformach, takich jak przeglądarka emulatora Androida, iOS Simulator Mobile Safari, różne przeglądarki komputerowe).
  • Zapewnia elastyczne porównanie zrzutów ekranu.
  • Ozdabia zrzuty ekranu.

Ashot może robić zrzuty ekranu w trzech krokach:

  • Przechwytuje zrzut ekranu całej strony.
  • Znajdź rozmiar i położenie elementu.
  • Przycina oryginalny zrzut ekranu.

Jak możemy wykorzystać Ashot w selenie

Rozważ następujące kroki, aby pobrać i skonfigurować Ashot na swoim komputerze:

  1. Przejdź do połączyć.
  2. Znajdź najnowszą wersję pliku jar obecnego dla Ashot.
  3. Pobierz i zapisz plik jar w określonej ścieżce na komputerze.
  4. Teraz, aby dodać plik jar do projektu w Eclipse - przejdź do swojego projektu -> kliknij prawym przyciskiem myszy -> przejdź do właściwości -> wybierz opcję Build Path -> Libraries -> add External Jars
  5. Przeglądaj ścieżkę, w której zapisany jest pobrany plik jar.
  6. Wybierz plik jar, kliknij Zastosuj i zamknij.

Jak robić zrzuty ekranu w Selenium

Selenium zapewnia wbudowaną funkcjonalność do przechwytywania zrzutów ekranu. Zgodnie z wymaganiami RobesScreenshot Interfejs służy do robienia zrzutów ekranu podczas wykonywania skryptów Selenium. W ten sposób Selenium Webdriver pomaga w przechwytywaniu zrzutów ekranu podczas wykonywania kodu.

W poniższej sekcji dowiemy się o różnych typach zrzutów ekranu, które są przechwytywane.

Oto typy:

Przechwytywanie zrzutu ekranu:

  • Aktualnie otwarte okno
  • Cała strona internetowa
  • Tylko określony element sieciowy
  • Porównanie obrazu zrzutu ekranu z oryginalnym obrazem

Rozumiemy szczegółowo powyższe punkty.

# 1) Bieżące otwarte okno

Przyjrzyjmy się implementacji kodu do obsługi zrzutów ekranu w Selenium dla aktualnie otwartego okna:

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.'); } }

Poniższy obraz jest wynikiem powyższej implementacji kodu. Tutaj witryna OrangeHRM jest otwarta i przechwytywany jest zrzut ekranu strony logowania.

Bieżące otwarte okno

(wizerunek źródło )

W ten sposób możemy przechwytywać zrzuty ekranu, gdziekolwiek jest to wymagane podczas wykonywania kodu. Przechwycony zrzut ekranu jest zapisywany w pliku z rozszerzeniem .png lub .jpeg. Musimy podać ścieżkę, w której plik obrazu ma zostać zapisany.

# 2) Cała strona internetowa

Przyjrzyjmy się poniższemu kodowi implementacji do przechwytywania zrzutu ekranu całej strony za pomocą Ashot w webdriverze Selenium. W tym celu rozważmy przykład strony (zmienne zdefiniowane przez użytkownika Jmeter) z - 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!'); } }

Tutaj jmeter-zmienne-zdefiniowane-przez-użytkownika strona naszej witryny: www.softwaretestinghelp.com jest otwarty, a następnie zrobiliśmy zrzut ekranu tej całej strony internetowej (przy pomocy ashot () w selenie) w formacie .png i zapisaliśmy w żądanej ścieżce. W ten sam sposób możemy zrobić zrzut ekranu całej strony dla dowolnej strony internetowej.

Zatem po zaimplementowaniu powyższego kodu do przechwytywania zrzutu ekranu całej strony, otrzymane dane wyjściowe są takie, jak pokazano na poniższym obrazku, aby uzyskać pełny zrzut ekranu strony internetowej.

Entire_Page

# 3) Element sieciowy

Spójrzmy na poniższy kod implementacji, z wykorzystaniem Ashota w webdriverze Selenium do przechwytywania zrzutu ekranu określonego elementu WWW na stronie internetowej.

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!'); } }

Zatem po zaimplementowaniu powyższego kodu do przechwytywania zrzutu ekranu określonego elementu (tutaj zakładka Maintenance), otrzymane dane wyjściowe są takie, jak pokazano na poniższym obrazku.

Maintenance_WebElement 1

Tutaj wybieramy zakładkę „Konserwacja” jako element, dla którego wymagany jest zrzut ekranu. Podaj ścieżkę, w której chcemy zapisać zrzut ekranu. W ten sam sposób możemy przechwycić zrzut ekranu dla dowolnego innego elementu, jak również na dowolnej takiej stronie internetowej.

# 4) Porównanie zrzutu ekranu z oryginalnym obrazem

Przyjrzyjmy się poniższemu kodowi implementacji z wykorzystaniem Ashota w webdriverze Selenium do przechwycenia zrzutu ekranu elementu logo na stronie internetowej i porównania go z oryginalnym logo.

W tym celu rozważmy przykład 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 } } }

Dlatego po zaimplementowaniu powyższego kodu do porównania zrzutu ekranu elementu logo (tutaj logo naukri.com), otrzymane dane wyjściowe są takie, jak pokazano na poniższym obrazku.

logo naukri

Tutaj wybieramy logo „naukri.com”, robimy zrzut ekranu, a następnie porównujemy je z oryginalnym logo. Różnicę między obrazami można znaleźć za pomocą wbudowanych funkcji. Jeśli nie ma różnicy w 2 obrazach logo, program drukuje dane wyjściowe jako „ Oba obrazy logo są dopasowane ”Else drukuje” Obrazy logo są różne ”.

Przykłady, w których często wykonywane są zrzuty ekranu

# 1) Potwierdzenie wylogowania

Aby zalogować się do serwisu, musimy podać poprawną nazwę użytkownika i hasło, po czym zostajemy zalogowani do serwisu. Następnie użytkownik wykonuje wymagane opcje i po zakończeniu pracy użytkownik zostaje wylogowany.

Tak więc, jeśli podamy kod do zrzutu ekranu po wylogowaniu, ponownie pojawi się strona logowania, która potwierdzi wylogowanie. Więcej informacji można znaleźć na poniższym obrazku:

potwierdzenie wylogowania

# 2) Potwierdzenie nowo utworzonego rekordu

Dodanie kodu do zrzutu ekranu po utworzeniu nowego rekordu potwierdza pomyślne utworzenie rekordu. Aby uzyskać więcej informacji, zobacz poniższy zrzut ekranu.

Potwierdzenie nowo utworzonego rekordu

W przypadku, gdy rekord nie zostanie utworzony, kod nie będzie kontynuował przechwytywania zrzutu ekranu, co potwierdziłoby, że rekord nie został pomyślnie utworzony.

# 3) Przykład brakującego / nieprawidłowego wyjścia

Ten przykład obejmuje tworzenie nowego rekordu dla stanowiska w witrynie OrangeHRM. W tym przypadku pole Stanowisko jest oznaczone „*”, co oznacza, że ​​jest to pole obowiązkowe. Tak więc rekord nie zostałby utworzony, dopóki wymagane pola nie zostaną wypełnione i tylko wtedy będziemy mogli zapisać rekord. Aby uzyskać więcej informacji, zobacz poniższy zrzut ekranu.

Przykład brakującego / nieprawidłowego wyjścia

Wniosek

Tak więc w tym artykule widzieliśmy, gdzie potrzebne są zrzuty ekranu Selenium, jak możemy obsłużyć zrzuty ekranu w Selenium, czym jest Ashot, jak można go pobrać, skonfigurować i faktycznie używać w Selenium. Zrozumieliśmy implementację kodu do obsługi zrzutów ekranu, a także zobaczyliśmy kilka przykładów, w których zrzuty ekranu są często przechwytywane.

=> Przeczytaj cały przewodnik po Selenium

rekomendowane lektury

^