Ошибки выполнения JavaScript

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

Типы ошибок выполнения JavaScript

Ошибки JavaScript могут быть условно разделены на несколько категорий:

  1. Ошибки синтаксиса – возникновение проблем из-за неправильного использования JavaScript. Например, забытые скобки или неверные операторы.
  2. Ошибки выполнения – ошибки, которые возникают в процессе выполнения кода, например, попытка доступа к неопределённой переменной или вызов метода на несуществующем объекте.
  3. Ошибки асинхронного кода – проблемы, связанные с обработкой промисов и асинхронных функций, когда их выполнение не синхронизировано должным образом.
  4. Ошибки браузера – связанные с особенностями браузера или его конфигурации, такие как ошибки загрузки страниц, неправильное отображение элементов и др.

Логирование ошибок в Puppeteer

Для диагностики и устранения ошибок критически важно получать как можно больше информации о проблеме. Puppeteer позволяет собирать подробные логи выполнения, которые могут помочь в поиске ошибок.

Для того чтобы включить логирование ошибок, необходимо использовать метод page.on(‘console’). Этот метод позволяет ловить события, связанные с выводом сообщений в консоль браузера. 

page.on(&
  console.log('Консольное сообщение:', msg.text());
});

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

Обработка ошибок асинхронных операций

Одной из наиболее частых причин ошибок является неправильная обработка асинхронных операций в Puppeteer. В большинстве случаев асинхронный код, работающий с методами Puppeteer, использует промисы, которые необходимо правильно обрабатывать с помощью await или .then().

Пример неправильной обработки промиса: 

const response = page.goto('https://example.com'); // ошибка, пропущен await

Правильный способ: 

const response = await page.goto('https://example.com');

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

Обработка ошибок страницы

Ошибки могут возникать и на уровне самой страницы. Например, ошибка загрузки элементов DOM, с которыми необходимо работать в тесте. Для выявления таких ошибок полезно обрабатывать событие page.on(‘error’), которое позволяет отлавливать ошибки, происходящие в рамках страницы. 

page.on('error', (err) => {
  console.error('Ошибка на странице:', err.message);
});

Также важно отслеживать событие page.on(‘response’), чтобы контролировать ошибки HTTP-запросов: 

page.on('response', (response) => {
  if (!response.ok()) {
    console.log(`Ошибка HTTP: ${response.status()} на ${response.url()}`);
  }
});

Обработка ошибок в асинхронных функциях

При работе с асинхронными функциями важно правильно обрабатывать возможные ошибки с помощью try…catch. Это позволяет ловить исключения, возникающие во время выполнения асинхронных операций, и устранять их. 

try {
  await page.goto('https://example.com');
  await page.click('#non-existing-element'); // ошибка, элемента нет
} catch (error) {
  console.log('Произошла ошибка:', error.message);
}

Ошибки можно также обрабатывать по частям, например, сначала проверить, существует ли элемент, прежде чем взаимодействовать с ним: 

const element = await page.$('#non-existing-element');
if (element) {
  await element.click();
} else {
  console.log('Элемент не найден');
}

Такой подход позволяет более точно контролировать ошибки и предотвращать сбои в тестах.

Использование ожиданий (Waits)

В Puppeteer важным моментом является правильное использование ожиданий. Неверное использование методов ожидания может привести к тому, что элементы страницы будут доступны слишком поздно, что вызовет ошибки выполнения.

Puppeteer предоставляет несколько вариантов для ожидания:

  1. page.waitForSelector(selector) – ожидает появления элемента на странице.
  2. page.waitForNavigation() – ожидает завершения навигации.
  3. page.waitForTimeout(ms) – просто ждет определённое количество времени.

Пример: 

await page.waitForSelector('#my-element');
await page.click('#my-element');

Если элемент не появляется в течение определённого времени, будет выброшено исключение, которое можно поймать и обработать.

Работа с нестабильными страницами

Некоторые веб-страницы могут быть нестабильными, содержать ошибки или неправильные скрипты. В таких случаях полезно использовать дополнительные методы для диагностики, такие как page.screenshot() для сохранения снимков экрана в случае ошибки: 

try {
  await page.goto('https://example.com');
  await page.click('#non-existing-element');
} catch (error) {
  await page.screenshot({ path: 'error.png' });
  console.log('Произошла ошибка, снимок экрана сохранён');
}

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

Обработка ошибок браузера

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

browser.on('disconnected', () => {
  console.log('Браузер был отключён');
});

Кроме того, можно включить более подробное логирование ошибок, если используете Chromium или другие браузеры, поддерживающие вывод логов.

Советы по устранению ошибок

  • Тщательно проверяйте синтаксис – многие ошибки являются результатом простой опечатки или неправильного синтаксиса.
  • Используйте асинхронные функции и await – правильно обрабатывайте промисы, чтобы избежать гонок между асинхронными операциями.
  • Добавляйте обработку ошибок – всегда ловите исключения и добавляйте логи, чтобы видеть подробности ошибки.
  • Используйте ожидания – убедитесь, что элементы загружены, прежде чем взаимодействовать с ними.

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

Оглавление