Настройка TypeScript проекта

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

  1. Инициализация проекта

Создание нового проекта начинается с инициализации npm-пакета. Это позволит задать все необходимые зависимости. 

npm init -y

После выполнения этой команды будет создан файл package.json, который будет содержать основную информацию о проекте.

  1. Установка Puppeteer и TypeScript

Для работы с Puppeteer и TypeScript нужно установить несколько ключевых зависимостей:

  • Puppeteer — основной пакет для автоматизации браузера.
  • TypeScript — компилятор TypeScript.
  • @types/puppeteer — типы для Puppeteer, чтобы корректно работать с автодополнением и типами.

Установка зависимостей: 

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

  1. Настройка TypeScript

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

Создание tsconfig.json можно выполнить вручную или с помощью команды: 

npx tsc --init

После этого нужно отредактировать файл tsconfig.json для соответствия требованиям Puppeteer: 

{
  "compilerOptions": {
 "target": "ES6",
 "module": "CommonJS",
 "strict": true,
 "esModuleInterop": true,
 "skipLibCheck": true,
 "forceConsistentCasingInFileNames": true,
 "outDir": "./dist",
 "rootDir": "./src"
  },
  "include": [
 "src/**/*.ts"
  ]
}

Объяснение ключевых настроек:

  • target: Определяет версию JavaScript, к которой будет компилироваться код. Использование ES6 позволяет использовать современные возможности JavaScript, такие как async/await.
  • module: Устанавливает систему модулей. Для Node.js используется CommonJS.
  • strict: Включает строгий режим, что помогает избежать ошибок и использовать лучшие практики TypeScript.
  • esModuleInterop: Позволяет использовать синтаксис import для совместимости с CommonJS модулями.
  • skipLibCheck: Отключает проверку типов в сторонних библиотеках, что ускоряет процесс компиляции.
  • outDir и rootDir: Устанавливают директорию для исходных файлов и директорию для скомпилированных файлов.

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

Структура проекта должна быть логичной и соответствовать стандартам TypeScript.

Пример структуры проекта: 

/my-puppeteer-project
  /src
 index.ts
  /dist
  package.json
  tsconfig.json
  • /src — папка с исходными файлами TypeScript.
  • /dist — папка с скомпилированными JavaScript файлами.
  • index.ts — основной файл, в котором будет написан код для автоматизации браузера с использованием Puppeteer.

  1. Написание первого скрипта на TypeScript

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

Пример кода для файла src/index.ts: 

import puppeteer from &






async function run() { 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(); }

run().catch(console.error);

Этот код открывает браузер, переходит на сайт example.com, делает скриншот и сохраняет его в файл example.png.

  1. Компиляция TypeScript

Чтобы компилировать TypeScript в JavaScript, нужно использовать команду: 

npx tsc

Это скомпилирует все файлы в папку dist (в соответствии с настройками в tsconfig.json).

Теперь можно запустить скомпилированный файл JavaScript с помощью Node.js: 

node dist/index.js

  1. Настройка для автокомпиляции

Чтобы ускорить процесс разработки, можно настроить автокомпиляцию TypeScript с помощью утилиты ts-node или использовать команду tsc –watch для автоматической компиляции файлов при изменении.

Для установки ts-node: 

npm install ts-node --save-dev

Для запуска скрипта с ts-node: 

npx ts-node src/index.ts

Для включения автокомпиляции через tsc: 

npx tsc --watch

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

  1. Настройка ESLint и Prettier для TypeScript

Для улучшения качества кода и соблюдения стандартов кодирования рекомендуется настроить ESLint и Prettier.

Установка зависимостей: 

npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

После этого можно создать конфигурационные файлы .eslintrc.json и .prettierrc, чтобы настроить линтинг и форматирование.

Пример конфигурации .eslintrc.json: 

{
  "parser": "@typescript-eslint/parser",
  "extends": [
 "eslint:recommended",
 "plugin:@typescript-eslint/recommended",
 "plugin:prettier/recommended"
  ],
  "env": {
 "node": true,
 "es2021": true
  },
  "rules": {
 "@typescript-eslint/no-explicit-any": "warn",
 "@typescript-eslint/explicit-module-boundary-types": "off"
  }
}

Пример конфигурации .prettierrc: 

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all"
}

  1. Использование Puppeteer с TypeScript в тестировании

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

Пример теста: 

import puppeteer from 'puppeteer';





describe('Puppeteer Test', () => { let browser; let page;


beforeAll(async () => { browser = await puppeteer.launch(); page =
await browser.newPage(); });


afterAll(async () => { await browser.close(); });

test('should load the correct page', async () => { await
page.goto('https://example.com'); const title = await page.title();
expect(title).toBe('Example Domain'); }); });

Этот тест с использованием Jest проверяет, что при переходе на сайт example.com, его заголовок соответствует ожидаемому значению.

  1. Заключение

Типовая настройка проекта с использованием Puppeteer и TypeScript включает в себя установку зависимостей, настройку конфигурации компилятора и создание структуры проекта. После этого можно начинать писать тесты и автоматизировать взаимодействие с браузером. Важно также использовать современные инструменты для улучшения качества кода, такие как ESLint и Prettier, для соблюдения стандартов и повышения читабельности.

Оглавление