Evaluation кода на странице

Playwright предоставляет мощные возможности для взаимодействия с веб-страницами, включая возможность выполнения кода на стороне клиента. Один из ключевых аспектов работы с Playwright — это способность выполнять произвольный JavaScript код на страницах, что позволяет автоматизировать и тестировать различные сценарии взаимодействия с веб-приложениями.

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

Введение в оценку кода

Для выполнения JavaScript кода на странице в Playwright используется метод page.evaluate(). Он позволяет передавать код, который будет выполнен в контексте страницы, и возвращать результат выполнения. Метод работает асинхронно, что позволяет удобно интегрировать его в тесты.

Основная структура использования page.evaluate():

const result = await page.evaluate(() => {
  // JavaScript код, который выполняется на странице
});

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

Пример использования page.evaluate()

В простом примере можно получить текстовое содержимое элемента на странице:

const text = await page.evaluate(() => {
  return document.querySelector('h1').innerText;
});
console.log(text);

Здесь page.evaluate() выполняет функцию, которая ищет первый элемент h1 на странице и возвращает его текстовое содержимое. Результат сохраняется в переменную text.

Взаимодействие с DOM-элементами

При выполнении кода на странице с помощью evaluate() можно манипулировать любыми элементами DOM. Например, чтобы изменить содержимое элемента на странице, можно использовать следующий код:

await page.evaluate(() => {
  document.querySelector('h1').innerText = 'Новый заголовок';
});

После выполнения этого кода заголовок на странице изменится на «Новый заголовок». Это позволяет легко тестировать интерфейсы и проверять динамическое поведение страницы.

Передача данных из Node.js в контекст страницы

Playwright позволяет передавать данные из Node.js в код, который выполняется на странице. Это достигается путем передачи аргументов в метод evaluate(). Например, если необходимо передать значение переменной из теста в скрипт на странице:

const username = 'testuser';
const result = await page.evaluate((username) => {
  return document.querySelector('#username').value === username;
}, username);

console.log(result); // true или false

В этом примере значение переменной username передается в функцию, выполняемую на странице, и используется для сравнения значения в поле ввода с ожидаемым значением.

Возвращение сложных объектов из страницы

Метод evaluate() может возвращать сложные объекты. Однако важно понимать, что объект, возвращаемый из контекста браузера, будет сериализован в JSON. Это ограничивает возможности возврата определённых типов данных, таких как функции или DOM-элементы. Вместо этого Playwright возвращает их в виде сериализуемых структур данных (например, массивов, объектов или примитивных значений).

Пример возврата объекта:

const result = await page.evaluate(() => {
  const user = { name: 'John', age: 30 };
  return user;
});

console.log(result); // { name: 'John', age: 30 }

В случае необходимости работы с DOM-элементами или более сложными структурами данных, можно воспользоваться методами Playwright для работы с элементами и их аттрибутами.

Проблемы с асинхронным кодом на странице

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

Для работы с асинхронным кодом в evaluate() можно использовать async и await. Пример:

const data = await page.evaluate(async () => {
  const response = await fetch('https://api.example.com/data');
  const result = await response.json();
  return result;
});

console.log(data);

Здесь асинхронная операция fetch выполняется внутри функции, переданной в evaluate(), что позволяет корректно обработать данные.

Ошибки при выполнении кода на странице

При выполнении JavaScript кода на странице с помощью evaluate() необходимо учитывать, что код может содержать ошибки. Для диагностики и отладки рекомендуется использовать try-catch блоки, чтобы поймать возможные исключения и обеспечить более информативные сообщения об ошибках.

Пример обработки ошибок:

const result = await page.evaluate(() => {
  try {
    const element = document.querySelector('#nonexistent');
    return element.textContent;
  } catch (error) {
    console.error('Ошибка при извлечении текста:', error);
    return null;
  }
});

console.log(result);

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

Использование с элементами, не привязанными к странице

Playwright также позволяет взаимодействовать с элементами, которые не привязаны напрямую к странице, например, с элементами, созданными динамически или с iframe-ами. В таких случаях важно правильно учитывать контекст выполнения кода. Например, для взаимодействия с элементами внутри iframe нужно сначала получить доступ к этому iframe:

const iframe = await page.frame({ name: 'iframe-name' });
const result = await iframe.evaluate(() => {
  return document.querySelector('h1').innerText;
});

console.log(result);

В этом примере сначала получаем объект iframe с помощью метода page.frame(), а затем выполняем код в его контексте.

Заключение

Оценка кода на странице с помощью page.evaluate() является мощным инструментом для взаимодействия с веб-приложениями и их тестирования. Этот метод позволяет выполнять произвольный JavaScript код в контексте браузера, что открывает множество возможностей для анализа состояния страницы, манипуляции с элементами и выполнения асинхронных операций. Для эффективной работы с evaluate() важно учитывать особенности передачи данных, обработки ошибок и работы с асинхронным кодом, что значительно увеличивает гибкость и точность тестов в Playwright.

Оглавление