Перейти к основному содержимому

Создание скриншотов с помощью Selenium WebDriver

· 4 мин. чтения

1. Обзор​

При работе с автоматическими тестами с помощью Selenium нам часто нужно сделать скриншот веб-страницы или части веб-страницы. Это может быть полезно, особенно при отладке неудачных тестов или проверке согласованности поведения нашего приложения в разных браузерах.

В этом кратком руководстве мы рассмотрим несколько способов захвата снимков экрана с помощью Selenium WebDriver из наших тестов JUnit . Чтобы узнать больше о тестировании с помощью Selenium, ознакомьтесь с нашим замечательным руководством по Selenium .

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

Давайте начнем с добавления зависимости Selenium в наш pom.xml :

<dependency>
    <groupId>org.seleniumhq.selenium</groupId>
    <artifactId>selenium-java</artifactId>
    <version>3.141.59</version>
</dependency>

Как всегда, последнюю версию этого артефакта можно найти в Maven Central . Кроме того, последнюю версию драйвера Chrome можно загрузить с его веб-сайта .

Теперь давайте настроим наш драйвер для использования 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("http://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());
}

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

4. Захват элемента на странице​

В следующем разделе мы рассмотрим, как сделать снимок экрана отдельного элемента на странице. Для этого мы воспользуемся библиотекой под названием aShot , служебной библиотекой снимков экрана, изначально поддерживаемой Selenium 3 и более поздних версий .

Поскольку aShot доступен в Maven Central , мы можем просто включить его в наш pom.xml :

<dependency>
    <groupId>ru.yandex.qatools.ashot</groupId>
    <artifactId>ashot</artifactId>
    <version>1.5.4</version>
</dependency>

Библиотека 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 на странице с использованием идентификатора hplogo. Затем мы создаем новый экземпляр AShot и устанавливаем одну из встроенных стратегий стрельбы — ShootingStrategies.viewportPasting(1000) . Эта стратегия будет прокручивать область просмотра, пока мы делаем снимок экрана, в течение максимум одной секунды (1000 мс) .

Теперь у нас есть политика того, как мы хотим сделать скриншот.

Когда мы хотим захватить определенный элемент на странице, внутри aShot найдет размер и положение элемента и обрежет исходное изображение. Для этого мы вызываем метод coordsProvider и передаем класс WebDriverCoordsProvider , который будет использовать API WebDriver для поиска любых координат.

Обратите внимание, что по умолчанию aShot использует jQuery для разрешения координат. Но у некоторых драйверов проблемы с Javascript .

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

5. Вывод​

В этом кратком руководстве мы рассмотрели два подхода к созданию снимков экрана с помощью Selenium WebDriver.

В первом подходе мы увидели, как захватить весь экран напрямую с помощью Selenium. Затем мы научились захватывать определенный элемент на странице с помощью замечательной библиотеки утилит под названием aShot.

Одним из основных преимуществ использования aShot является то, что разные веб-драйверы ведут себя по-разному при создании снимков экрана. Использование aShot абстрагирует нас от этой сложности и дает прозрачные результаты независимо от используемого нами драйвера . Обязательно ознакомьтесь с полной документацией , чтобы увидеть все доступные поддерживаемые функции.

Как всегда, полный исходный код статьи доступен на GitHub .