Автоматизация browser тестов

Автоматизация браузерных тестов с помощью Jasmine

Jasmine представляет собой популярный фреймворк для юнит-тестирования в JavaScript, который часто используется для написания тестов в различных приложениях, включая тестирование браузерных взаимодействий. Использование Jasmine для автоматизации тестов в браузере позволяет значительно повысить производительность разработки, улучшить качество кода и упростить процессы CI/CD.

Для начала стоит рассмотреть, как выглядят типичные тесты в Jasmine и как они могут быть адаптированы для тестирования браузерных сценариев. В Jasmine тесты состоят из трех основных частей:

  • describe — блок, который описывает группу тестов.
  • it — блок, в котором пишется конкретный тест.
  • expect — утверждения, которые проверяют корректность работы программы.

Пример простого теста:

describe("Мой браузерный тест", function() {
  it("должен работать корректно", function() {
    expect(true).toBe(true);
  });
});

Интеграция с браузером

Для автоматизации браузерных тестов с Jasmine требуется использовать инструменты, которые позволяют управлять браузером. Обычно это делается с помощью таких библиотек, как Selenium WebDriver или Puppeteer. Эти инструменты позволяют эмулировать поведение пользователя в браузере, запускать тесты и взаимодействовать с DOM.

Selenium WebDriver

Selenium — это фреймворк для автоматизации браузерных тестов, который поддерживает работу с множеством браузеров (Chrome, Firefox, Safari и другие). В связке с Jasmine Selenium позволяет написать тесты, которые будут автоматически проверять взаимодействие с веб-страницей.

Пример интеграции Jasmine с Selenium:

  1. Установка зависимостей:
npm install --save-dev jasmine selenium-webdriver
  1. Пример теста с использованием Selenium:
const { Builder, By, until } = require('selenium-webdriver');
const jasmine = require('jasmine');

describe("Тестирование формы", function() {
  let driver;

  beforeAll(async function() {
    driver = await new Builder().forBrowser('chrome').build();
  });

  afterAll(async function() {
    await driver.quit();
  });

  it("должен заполнять и отправлять форму", async function() {
    await driver.get('http://example.com/form');
    let input = await driver.findElement(By.id('name'));
    await input.sendKeys('Тестовое имя');
    let submitButton = await driver.findElement(By.id('submit'));
    await submitButton.click();
    let confirmationMessage = await driver.wait(until.elementLocated(By.id('confirmation')), 10000);
    let text = await confirmationMessage.getText();
    expect(text).toBe('Форма отправлена!');
  });
});

Этот тест открывает веб-страницу с формой, заполняет её, нажимает кнопку отправки и проверяет, что сообщение о подтверждении отображается.

Puppeteer

Puppeteer — это библиотека для Node.js, предназначенная для работы с браузером Chrome или Chromium. Она позволяет более эффективно работать с браузером по сравнению с Selenium, так как ориентирована на работу с Headless-браузерами, что делает её быстрее для некоторых сценариев.

Пример использования Puppeteer с Jasmine:

  1. Установка зависимостей:
npm install --save-dev jasmine puppeteer
  1. Пример теста с использованием Puppeteer:
const puppeteer = require('puppeteer');

describe("Тестирование страницы", function() {
  let browser;
  let page;

  beforeAll(async function() {
    browser = await puppeteer.launch();
    page = await browser.newPage();
  });

  afterAll(async function() {
    await browser.close();
  });

  it("должен заполнять и отправлять форму", async function() {
    await page.goto('http://example.com/form');
    await page.type('#name', 'Тестовое имя');
    await page.click('#submit');
    await page.waitForSelector('#confirmation');
    const text = await page.$eval('#confirmation', el => el.innerText);
    expect(text).toBe('Форма отправлена!');
  });
});

Этот код выполняет те же действия, что и пример с Selenium, но в Puppeteer они выполняются быстрее и с меньшими затратами ресурсов.

Запуск тестов в различных браузерах

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

Запуск тестов в Chrome

Для запуска тестов в браузере Chrome, можно использовать ChromeDriver, который интегрируется с Selenium:

const { Builder } = require('selenium-webdriver');
const chrome = require('selenium-webdriver/chrome');

const options = new chrome.Options();
options.addArguments('--headless'); // Режим без интерфейса
options.addArguments('--no-sandbox');
options.addArguments('--disable-dev-shm-usage');

let driver = new Builder().forBrowser('chrome').setChromeOptions(options).build();

Запуск тестов в Firefox

Для запуска в Firefox необходимо использовать GeckoDriver, который также интегрируется с Selenium:

const { Builder } = require('selenium-webdriver');
const firefox = require('selenium-webdriver/firefox');

const options = new firefox.Options();
options.addArguments('--headless');

let driver = new Builder().forBrowser('firefox').setFirefoxOptions(options).build();

Работа с динамическим контентом

Современные веб-приложения активно используют динамический контент, который может загружаться после начальной загрузки страницы (AJAX-запросы, WebSocket-соединения и т. д.). Для таких сценариев важно добавить в тесты ожидания (wait), чтобы тесты корректно работали с динамическим контентом.

В Jasmine можно использовать различные методы ожидания в зависимости от используемой библиотеки. Например, для Selenium WebDriver можно использовать метод driver.wait:

let element = driver.wait(until.elementLocated(By.id('dynamicElement')), 10000);

Этот метод будет ждать, пока элемент с id dynamicElement не появится на странице, или пока не истечет тайм-аут в 10 секунд.

Обработка ошибок и отчёты

Автоматизация браузерных тестов требует надлежащей обработки ошибок и формирования отчётов о результатах тестирования. Jasmine поддерживает создание отчётов с помощью различных репортеров.

Для генерации подробных отчётов о результатах тестирования можно использовать репортеры, такие как jasmine-spec-reporter или jasmine-reporters.

Пример использования jasmine-spec-reporter:

  1. Установка:
npm install --save-dev jasmine-spec-reporter
  1. Конфигурация в файле jasmine.json:
{
  "reporters": [
    {
      "name": "jasmine-spec-reporter"
    }
  ]
}

Этот репортер выведет результаты тестов в удобном формате в консоли, с цветовым выделением успешных и неудачных тестов.

Интеграция с CI/CD

Автоматизация браузерных тестов позволяет интегрировать их в систему CI/CD, что существенно ускоряет процесс тестирования и выпуска новых версий приложения. Важнейшие инструменты для этого — Jenkins, Travis CI и CircleCI.

Для интеграции с CI/CD необходимо:

  1. Установить необходимые зависимости и настроить окружение на сервере CI.
  2. Настроить тесты, чтобы они запускались автоматически при каждом коммите или при создании новой версии приложения.
  3. Получить отчёты о результатах тестов и настроить уведомления о сбоях.

Использование браузерных тестов в рамках CI/CD гарантирует, что каждый новый функционал или исправление будет проверяться на работоспособность в реальных условиях.

Заключение

Автоматизация браузерных тестов с помощью Jasmine и инструментов, таких как Selenium или Puppeteer, позволяет значительно упростить процесс тестирования веб-приложений. Это не только повышает качество кода, но и улучшает производительность разработки. Важно учитывать особенности работы с динамическим контентом, выбирать подходящий инструмент для взаимодействия с браузером и интегрировать тесты в систему CI/CD для автоматического выполнения тестов.

Оглавление