Браузерные логи

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

Получение браузерных логов

WebdriverIO использует метод getLogs, который позволяет извлекать записи логов из браузера. Метод поддерживает несколько типов логов, например:

  • browser — консольные сообщения браузера (console.log, console.error и др.).
  • driver — сообщения драйвера WebDriver.
  • performance — события производительности.
  • client — логи клиента (зависит от драйвера и браузера).

Пример получения логов браузера:

const logs = await browser.getLogs('browser');
console.log(logs);

Каждая запись лога представляет собой объект с ключами:

  • level — уровень сообщения (INFO, WARNING, SEVERE).
  • message — текст сообщения.
  • timestamp — время появления записи.

Фильтрация логов

Часто необходимо отслеживать только ошибки или предупреждения. WebdriverIO позволяет фильтровать записи по уровню:

const logs = await browser.getLogs('browser');
const errors = logs.filter(log => log.level === 'SEVERE');
console.log(errors);

Такой подход позволяет интегрировать проверку ошибок браузера в автоматические тесты, что особенно важно для выявления скрытых JavaScript-ошибок.

Использование логов для отладки

Логи браузера могут содержать информацию о:

  • исключениях JavaScript,
  • сетевых ошибках,
  • предупреждениях о устаревших API,
  • проблемах с безопасностью (например, смешанный контент).

Пример анализа ошибок на странице:

const logs = await browser.getLogs('browser');
logs.forEach(log => {
    if (log.level === 'SEVERE') {
        console.error(`Ошибка в браузере: ${log.message} (время: ${new Date(log.timestamp)})`);
    }
});

Это помогает не только выявлять ошибки, но и связывать их с конкретными действиями теста.

Логи производительности и сети

WebdriverIO поддерживает тип логов performance, который позволяет отслеживать события загрузки страницы, выполнение скриптов и сетевые запросы. Эти данные полезны для анализа производительности веб-приложений.

const perfLogs = await browser.getLogs('performance');
perfLogs.forEach(log => {
    const message = JSON.parse(log.message).message;
    if (message.method === 'Network.responseReceived') {
        console.log(`URL: ${message.params.response.url}, Статус: ${message.params.response.status}`);
    }
});

Использование логов производительности позволяет интегрировать в тесты проверку времени ответа сервера и корректности сетевых запросов.

Настройка логирования через capabilities

Чтобы получать логи браузера, необходимо убедиться, что драйвер настроен на соответствующий уровень логирования. Для Chrome это настраивается через goog:loggingPrefs:

capabilities: [{
    browserName: 'chrome',
    'goog:loggingPrefs': {
        browser: 'ALL',
        performance: 'ALL'
    }
}]

Для Firefox используется аналогичная настройка с ключом moz:firefoxOptions и параметром log:

capabilities: [{
    browserName: 'firefox',
    'moz:firefoxOptions': {
        log: { level: 'trace' }
    }
}]

Это гарантирует, что все необходимые типы логов будут доступны через WebdriverIO.

Автоматическая проверка ошибок в тестах

Браузерные логи можно интегрировать в тестовые сценарии для автоматической проверки отсутствия критических ошибок:

it('не должно быть ошибок в консоли', async () => {
    await browser.url('https://example.com');
    const logs = await browser.getLogs('browser');
    const errors = logs.filter(log => log.level === 'SEVERE');
    expect(errors).toHaveLength(0);
});

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

Ограничения и особенности

  1. Поддержка браузеров — не все типы логов доступны во всех браузерах. Например, performance логи лучше всего работают в Chrome.
  2. Асинхронность — логи формируются динамически, поэтому важно получать их после выполнения действий на странице, иначе некоторые сообщения могут не успеть появиться.
  3. Объем данных — логи могут быть обширными, особенно тип performance, поэтому фильтрация и структурирование данных критически важны для удобного анализа.

Практические рекомендации

  • Всегда фильтровать логи по уровню (SEVERE/WARNING) для фокусировки на критических событиях.
  • Использовать логи производительности для анализа времени ответа и оптимизации фронтенда.
  • Интегрировать проверки логов в тесты для выявления JavaScript-ошибок на ранних этапах.
  • Настраивать драйвер на полный уровень логирования на этапе написания тестов, чтобы не упустить важные сообщения.

Браузерные логи в WebdriverIO предоставляют детализированную картину работы приложения на клиентской стороне и становятся незаменимым инструментом при отладке и автоматизированном тестировании сложных веб-приложений.

Оглавление