Конфигурация tsconfig

Puppeteer — это библиотека для автоматизации браузера Chrome или Chromium с использованием JavaScript. Для правильной работы с Puppeteer в TypeScript необходимо настроить конфигурацию TypeScript проекта, что обеспечит поддержку типов, компиляцию и оптимальную работу с библиотекой.

Типичная конфигурация tsconfig.json для использования с Puppeteer должна учитывать несколько ключевых моментов: поддержку типов, настройку компиляции и совместимость с API Puppeteer.

Основные настройки tsconfig.json 

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "moduleResolution": "node",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "noImplicitAny": true,
    "lib": ["esnext", "dom"],
    "outDir": "./dist",
    "sourceMap": true
  },
  "include": [
    "src/**/*.ts"
  ]
}

Разбор конфигурации

  • target: Установка цели компиляции в ES6 (или более позднюю версию), так как Puppeteer использует современные возможности JavaScript, такие как async/await.
  • module: Используется CommonJS, что является стандартом для Node.js приложений.
  • moduleResolution: Значение node указывает TypeScript искать модули так, как это делает Node.js (с учетом node_modules).
  • strict: Включает строгий режим, который помогает избежать ошибок типов и улучшить качество кода.
  • esModuleInterop: Включает поддержку импорта модулей, используемых как ES6 модули.
  • skipLibCheck: Пропускает проверку типов в библиотечных файлах, что ускоряет компиляцию.
  • forceConsistentCasingInFileNames: Обеспечивает одинаковое использование регистра в именах файлов, что важно для кроссплатформенной совместимости.
  • noImplicitAny: Запрещает использование неявных типов any, что помогает избежать ошибок в коде.
  • lib: Включение библиотек для поддержки API браузера (dom), а также последних возможностей JavaScript (esnext).
  • outDir: Папка для скомпилированных файлов JavaScript.
  • sourceMap: Генерация исходных карт для отладки TypeScript кода.

Структура проекта

Обычно в проектах с Puppeteer создаются следующие каталоги и файлы: 

/my-project
  ├── /src
  │   └── test.ts
  ├── /dist
  ├── package.json
  └── tsconfig.json
  • /src — каталог с исходным кодом TypeScript.
  • /dist — каталог для скомпилированных JavaScript файлов.
  • tsconfig.json — конфигурация TypeScript.

Установка типов для Puppeteer

Для правильной работы с Puppeteer в TypeScript необходимо установить типы. Они позволяют IDE и компилятору TypeScript понимать структуры данных, методы и свойства, доступные в API Puppeteer.

Для установки типов используйте следующую команду: 

npm install --save-dev puppeteer @types/puppeteer

Эта команда установит саму библиотеку Puppeteer, а также типы для её использования в TypeScript. Обратите внимание, что @types/puppeteer могут быть не всегда актуальными, так как сам Puppeteer уже включает встроенные типы. В некоторых случаях можно использовать только сам Puppeteer без установки дополнительных типов.

Понимание ключевых параметров

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

  2. lib: Параметр lib позволяет указать, какие библиотеки доступны для TypeScript. В данном случае включены esnext и dom. Это необходимо, чтобы TypeScript знал о браузерных API, таких как window, document и других, которые используются в автоматизации с Puppeteer.

  3. moduleResolution: Параметр node позволяет TypeScript правильно разрешать пути к модулям в соответствии с Node.js. Это важный момент, так как многие модули Puppeteer могут использовать импорты, которые TypeScript должен правильно обрабатывать.

  4. outDir и sourceMap: Указание папки для скомпилированных файлов и включение исходных карт улучшает процесс отладки. В случае ошибок в скомпилированном JavaScript коде можно отследить, где именно произошла ошибка в исходном TypeScript файле.

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

После того как tsconfig.json настроен, можно приступить к написанию тестов с Puppeteer. Рассмотрим пример простого теста, который запускает браузер, открывает страницу и делает скриншот: 

import puppeteer from &

async function runTest() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });
  
  await browser.close();
}

runTest().catch(console.error);

В этом примере:

  • Используется puppeteer.launch() для запуска браузера.
  • Создается новая страница с помощью browser.newPage().
  • Страница загружается с использованием page.goto().
  • Скриншот делается с помощью page.screenshot().

Типы Puppeteer помогут правильно работать с объектами браузера и страницы. Например, переменная browser будет автоматически типизирована как объект, возвращаемый методом puppeteer.launch(), что позволяет избежать ошибок при доступе к методам браузера.

Управление типами при работе с Puppeteer

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

import puppeteer, { Page } from 'puppeteer';

async function captureScreenshot(): Promise<void> {
  const browser = await puppeteer.launch();
  const page: Page = await browser.newPage();
  
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });
  
  await browser.close();
}

Здесь явно указывается тип для переменной page как Page, что помогает получить автодополнение и проверку типов при доступе к свойствам и методам страницы.

Важные моменты при настройке

  1. Поддержка современных функций JavaScript: TypeScript конфигурируется на использование последних стандартов ECMAScript, что позволяет использовать синтаксис async/await, промисы и другие современные возможности языка.

  2. Работа с асинхронным кодом: Важно, что Puppeteer сильно зависит от асинхронных операций. Поэтому в TypeScript необходимо использовать асинхронные функции и правильно обрабатывать возвращаемые промисы.

  3. Типы для взаимодействия с DOM: Puppeteer позволяет работать с DOM-элементами, взаимодействовать с ними через методы страницы, такие как page.click(), page.type() и т.д. Типы помогают избежать ошибок, связанных с неправильно переданными параметрами.

  4. Интеграция с другими инструментами: TypeScript конфигурация также будет работать с другими инструментами, такими как Jest или Mocha, для тестирования автоматизированных сценариев с Puppeteer.

Использование правильно настроенного tsconfig.json помогает сделать проект с Puppeteer на TypeScript более удобным и безопасным, устраняя многие типичные ошибки при компиляции и обеспечивая лучшую поддержку IDE.

Оглавление