Правене на екранни снимки с Selenium WebDriver

1. Общ преглед

Когато работим с автоматизирани тестове, използващи Selenium, често се налага да направим екранна снимка на уеб страница или част от уеб страница. Това може да бъде полезно, особено когато отстраняване на грешки при тестови грешки или проверка на поведението на нашето приложение е последователно в различни браузъри.

В този бърз урок ще разгледаме няколко начина, по които можем да заснемем екранни снимки с помощта на Selenium WebDriver от нашите тестове JUnit . За да научите повече за тестването със Селен, разгледайте нашето страхотно ръководство за Селен.

2. Зависимости и конфигурация

Нека започнем с добавяне на зависимостта от селен към нашия pom.xml :

 org.seleniumhq.selenium selenium-java 3.141.59 

Както винаги, най-новата версия на този артефакт може да бъде намерена в Maven Central.

Сега нека конфигурираме нашия драйвер да използва Chrome от нашия модулен тест:

private static ChromeDriver driver; @BeforeClass public static void setUp() { System.setProperty("webdriver.chrome.driver", resolveResourcePath("chromedriver.mac")); Capabilities capabilities = DesiredCapabilities.chrome(); driver = new ChromeDriver(capabilities); driver.manage() .timeouts() .implicitlyWait(5, TimeUnit.SECONDS); driver.get("//www.google.com/"); }

Както виждаме, това е доста стандартна конфигурация на Selenium за ChromeDriver, която ще ни позволи да контролираме браузъра Chrome, работещ на нашата локална машина. Също така конфигурираме времето, което водачът трябва да изчака, когато търси елемент на страницата, до пет секунди.

И накрая, преди да стартира някой от нашите тестове, ние отваряме любима уеб страница, www.google.com в текущия прозорец на браузъра.

3. Направете снимка на екрана на видимата зона

В този първи пример ще разгледаме интерфейса TakesScreenShot , който Selenium предлага нестандартно. Както подсказва името, можем да използваме този интерфейс за правене на екранни снимки на видимата област.

Нека създадем прост метод за правене на екранни снимки с помощта на този интерфейс:

public void takeScreenshot(String pathname) throws IOException { File src = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE); FileUtils.copyFile(src, new File(pathname)); } 

В този кратък метод първо преобразуваме нашия драйвер в TakesScreenshot с помощта на гласове. След това можем да извикаме метода getScreenshotAs , с посочения OutputType, за да създадем файл с изображение .

След това можем да копираме файла на всяко желано място, използвайки метода на Apache Commons IO copyFile . Много готино! Само в два реда можем да заснемем екранни снимки .

Сега нека видим как можем да използваме този метод от единичен тест:

@Test public void whenGoogleIsLoaded_thenCaptureScreenshot() throws IOException { takeScreenshot(resolveTestResourcePath("google-home.png")); assertTrue(new File(resolveTestResourcePath("google-home.png")).exists()); }

В този единичен тест запазваме получения файл с изображение в нашата папка за тест / ресурси, като използваме името на файла google-home.png, преди да заявим дали файлът съществува.

4. Заснемане на елемент на страницата

В този следващ раздел ще разгледаме как можем да направим екранна снимка на отделен елемент на страницата. За целта ще използваме библиотека, наречена aShot, библиотека с помощни програми за скрийншот, която се поддържа от Selenium 3 нататък .

Тъй като aShot се предлага от Maven Central, можем просто да го включим в нашия pom.xml :

 ru.yandex.qatools.ashot ashot 1.5.4 

Библиотеката aShot осигурява Fluent API за конфигуриране как точно искаме да заснемем скрийншотове.

Сега нека видим как можем да заснемем логото от началната страница на Google от един от нашите модулни тестове:

@Test public void whenGoogleIsLoaded_thenCaptureLogo() throws IOException { WebElement logo = driver.findElement(By.id("hplogo")); Screenshot screenshot = new AShot().shootingStrategy(ShootingStrategies.viewportPasting(1000)) .coordsProvider(new WebDriverCoordsProvider()) .takeScreenshot(driver, logo); ImageIO.write(screenshot.getImage(), "jpg", new File(resolveTestResourcePath("google-logo.png"))); assertTrue(new File(resolveTestResourcePath("google-logo.png")).exists()); }

Започваме с намирането на WebElement на страницата с помощта на id hplogo. След това създаваме нов екземпляр AShot и задаваме една от вградените стратегии на снимане - ShootingStrategies.viewportPasting (1000) . Тази стратегия ще превърта прозореца, докато правим екранна снимка за максимум една секунда (1oooms) .

Сега имаме политика за това как искаме да направим конфигурираната ни екранна снимка.

Когато искаме да заснемем определен елемент на страницата, aShot ще намери размера и позицията на даден елемент и ще изреже оригиналното изображение. За това извикваме метода coordsProvider и предаваме клас WebDriverCoordsProvider, който ще използва API на WebDriver за намиране на всякакви координати.

Имайте предвид, че по подразбиране aShot използва jQuery за разделителна способност на координатите. Но някои драйвери имат проблеми с Javascript .

Сега можем да извикаме метода takeScreenshot, който предава нашия драйвер и елемент на лого, който от своя страна ще ни даде обект Screenshot, съдържащ резултата от нашето заснемане на екрана. Както и преди, завършваме теста си, като пишем файл с изображение и проверяваме съществуването му.

5. Заключение

В този бърз урок видяхме два подхода за заснемане на екранни снимки с помощта на Selenium WebDriver.

При първия подход видяхме как да заснемем целия екран, като използваме директно Селен. След това научихме как да заснемем определен елемент на страницата с помощта на страхотна помощна библиотека, наречена aShot.

Едно от основните предимства на използването на aShot е, че различните WebDrivers се държат по различен начин, когато правят снимки на екрана. Използването на aShot ни абстрахира от тази сложност и ни дава прозрачни резултати, независимо от драйвера, който използваме . Не забравяйте да разгледате цялата документация, за да видите всички поддържани налични функции.

Както винаги, пълният изходен код на статията е достъпен в GitHub.