Дженерики в evaluate

В библиотеке Puppeteer существует метод evaluate, который позволяет выполнять код в контексте браузера. Это один из самых мощных инструментов для взаимодействия с DOM, скриптами и данными на веб-странице. Однако при работе с этим методом возникает необходимость передавать данные между Node.js и браузером, что требует соблюдения некоторых особенностей, связанных с типизацией и безопасностью.

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

Основы работы с evaluate

Метод evaluate используется для выполнения кода непосредственно в браузере. Он принимает функцию, которая будет выполнена в контексте страницы, и возвращает результат выполнения этой функции в Node.js.

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

const result = await page.evaluate(() => {
  return document.title;
});
console.log(result);  // Выведет название страницы

Здесь evaluate выполняет код, возвращающий заголовок страницы, и результат передается обратно в Node.js.

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

Проблема передачи типов данных

Когда в evaluate передаются данные, они сериализуются для передачи между Node.js и браузером. Это значит, что сложные объекты или типы данных, такие как функции или классы, могут быть неправильно интерпретированы. Особенно это важно при работе с типизированными языками, например, TypeScript, где типизация играет важную роль.

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

Пример использования дженериков в evaluate

Для улучшения типизации можно использовать дженерики в сочетании с TypeScript. Например, представим ситуацию, когда нужно выполнить запрос к странице, а затем вернуть результат в строго типизированном виде: 

async function getPageTitle<T>(page: puppeteer.Page): Promise<T> {
  return page.evaluate(() => {
    return document.title;  // возвращаем строку
  }) as T;
}

const title = await getPageTitle<string>(page);
console.log(title);  // Ожидаем строку

Здесь мы определяем функцию getPageTitle, которая возвращает значение типа T. В этом случае T может быть любым типом, переданным при вызове функции. Мы явно указываем тип возвращаемого значения, что позволяет избежать ошибок на этапе компиляции.

Работа с объектами и коллекциями

Особое внимание стоит уделить передаче и получению объектов в методе evaluate. Когда в evaluate передаются объекты, они сериализуются, что ограничивает возможность работать с нестандартными типами данных, например, с объектами классов. Однако, если в функции используется дженерик, можно уточнить типы и гарантировать их правильное использование.

Пример с передачей сложных объектов: 

interface User {
  name: string;
  age: number;
}

async function getUserData<T>(page: puppeteer.Page): Promise<T> {
  return page.evaluate(() => {
    const user = { name: &
    return user;
  }) as T;
}

const user = await getUserData<User>(page);
console.log(user.name);  // John Doe
console.log(user.age);   // 30

В данном примере мы используем интерфейс User, который гарантирует, что объект будет иметь именно такие поля. Типизация данных через дженерики позволяет избежать ошибок при дальнейшем использовании этих данных.

Совмещение с асинхронностью

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

Пример с асинхронной операцией: 

async function getElementText<T>(page: puppeteer.Page, selector: string): Promise<T> {
  return page.evaluate(async (sel) => {
    const element = await document.querySelector(sel);
    if (element) {
      return element.textContent || '';
    }
    return '';
  }, selector) as T;
}

const text = await getElementText<string>(page, '#myElement');
console.log(text);  // Ожидаем строку с текстом элемента

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

Работа с функциями и методами

При передаче функций в evaluate возникает особенность: функции не могут быть сериализованы через postMessage. Это ограничивает возможность использования методов, которые могут быть полезны в различных тестах. Однако, благодаря дженерикам можно передавать в evaluate заранее подготовленные функции или другие значения, при этом гарантируя их корректность.

Пример с переданными функциями: 

async function getDataFromPage<T>(page: puppeteer.Page, fn: () => T): Promise<T> {
  return page.evaluate((func) => {
    return func();  // выполняем переданную функцию
  }, fn) as T;
}

const data = await getDataFromPage<number>(page, () => 42);
console.log(data);  // Ожидаем число

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

Преимущества использования дженериков в evaluate

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

Заключение

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

Оглавление