Puppeteerмастерская браузера Node.js → Chrome → результат

Автоматизация, которую можно разобрать

Поручите браузеру
повторяемую работу.

Снимки экрана, PDF, сбор данных, формы и проверка ошибок. Исследуйте 10 сценариев, потренируйте селекторы и заберите настоящий Node.js-проект.

Выбрать сценарий Скачать весь проект ↓
один сценарий · три слоя
  1. 01
    Node.js задаёт действияawait page.goto(url)
  2. 02
    Chrome открывает страницуawait page.locator('button').click()
  3. 03
    Вы получаете результатPNG · PDF · JSON · CSV

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

Что работает на этой странице. DOM-лаборатория и конструктор кода интерактивны. Файлы результатов получены настоящими запусками Puppeteer и сохранены для просмотра. Сам Node.js и Chrome запускаются в скачиваемом проекте на вашем компьютере — эта страница не управляет вашим браузером через Puppeteer.

Практические задачи

От первого снимка до очереди задач

Выберите задачу: посмотрите применение, ход работы и реальные файлы результата.

10 сценариев
01 / 10Читаем результаты…

Снимки экрана

Где пригодится

    Результат настоящего запуска

    Загрузка отчёта…

    Показать ключевой код сценария
    Фрагмент · полный код в архиве

    Запустить у себяnpm run scenario -- screenshot

    Попробуйте прямо здесь

    Найдите элементы на живой странице

    Селектор выполняется только внутри учебного каталога справа. Измените DOM и посмотрите, как меняется результат.

    Живая лаборатория

    Например, класс, атрибут или их сочетание. Puppeteer также поддерживает собственные расширенные селекторы; здесь проверяем именно CSS.

    Почему ожидание важно

    Нажмите «Добавить товар с задержкой». Карточка появится позже, а data-ready сменится с false на true. Скрипт должен дождаться этого условия, затем читать данные.

    Как перенести это в Puppeteer
    учебный каталог · DOM в этой странице

    Мастерская «Контур»

    Небольшие вещи для рабочего стола

    Демо

    Форма работает локально. Данные никуда не отправляются.

    Каталог готов

    Настройки → понятный код

    Соберите первый скрипт

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

    Оба режима используют настоящий браузер. Окно появится на машине, где запущен Node.js.

    Размер страницы

    Размер viewport не заменяет проверку реального телефона, сенсорного ввода и другого движка.

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

    my-script.mjs · ESM
    Перед запуском

    В распакованном проекте выполните npm ci, npx puppeteer browsers install chrome, затем npm start. Сохраните этот скрипт в корне проекта и запустите в другом терминале: node my-script.mjs.

    Настоящие запуски у вас

    Заберите всю мастерскую

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

    Скачать проект ZIP ↓
    Node.js 22.12+ · npm
    npm ci
npx puppeteer browsers install chrome
npm start

    Локальный интерфейс: http://127.0.0.1:8790. Все сценарии в командной строке: npm run all.

    Puppeteer использует совместимый Chrome for Testing. Явная команда установки браузера нужна и в средах, где npm отключает установочные скрипты. Подробности, устранение ошибок и ограничения — в README и статье.