Тестирование Puppeteer с помощью Browserless

Что такое тестирование с помощью браузера без графического интерфейса?

Тестирование с помощью браузера без графического интерфейса обычно относится к объекту или вещи без головы, а в контексте браузера - к эмуляции браузера без графического интерфейса. Автоматизация браузера без графического интерфейса использует веб-браузер для сквозного тестирования без загрузки графического интерфейса браузера.

• Режим без графического интерфейса - это функция, которая позволяет выполнять полную версию браузера, управляя им программным образом.
• Они выполняются через интерфейс командной строки или с использованием сетевого взаимодействия. Это означает, что его можно использовать на сервере без графики или дисплея, и тесты Selenium все равно будут работать!
• Когда веб-страница не отображается на экране, а тесты выполняются без взаимодействия с графическим интерфейсом, скорость выполнения выше, чем при автоматизации реального браузера.

Функции Puppeteer

Некоторые из основных функций Puppeteer включают:

1. Просмотр без графического интерфейса: Puppeteer может управлять версией Chrome или Chromium без графического интерфейса, что означает, что браузер может работать без графического интерфейса пользователя (GUI). Это позволяет ему эффективно выполнять фоновые задачи и автоматизацию.
2. Автоматизированные задачи: Puppeteer позволяет имитировать взаимодействие пользователя, такое как просмотр страниц, нажатие кнопок, заполнение форм и т. д. Он также может автоматически получать доступ к веб-страницам и извлекать данные, что подходит для сбора и анализа данных.
3. Изменение страницы: Вы можете изменять содержимое веб-страницы, вставляя JavaScript-код, изменяя стили и манипулируя DOM (Document Object Model).
4. Создание снимков экрана и PDF: Puppeteer может создавать снимки экрана или экспортировать веб-страницы в формат PDF. Это очень полезно для создания визуальных отчетов и документов.
5. Мониторинг сети: Puppeteer может перехватывать и изменять сетевые запросы и ответы для отладки или тестирования различных сетевых сценариев.
6. Анализ производительности: Получите показатели производительности, такие как время загрузки страницы и использование ресурсов, чтобы помочь оптимизировать производительность веб-страниц.
7. Веб-скрапинг: Puppeteer часто используется для задач веб-скрапинга, потому что он может взаимодействовать с веб-сайтами, как настоящие пользователи, тем самым извлекая данные с динамичных и богатых JavaScript страниц.
8. Тестирование: Puppeteer часто используется для автоматизации сквозного тестирования веб-приложений. Он может имитировать поведение и взаимодействия пользователя, чтобы гарантировать, что ваше веб-приложение работает как ожидалось.
9. Режим без графического интерфейса и с графическим интерфейсом: Его можно запускать в режиме без графического интерфейса или отлаживать в режиме с графическим интерфейсом, что удобно для разработки и тестирования.

Что означает "без графического интерфейса" в Puppeteer?

Puppeteer - это библиотека Node.js для управления браузерами Chrome или Chromium, в основном для таких задач, как автоматизированное тестирование, веб-скрапинг и создание PDF. "Без графического интерфейса" в Puppeteer относится к экземпляру браузера, который может работать без пользовательского интерфейса.

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

Puppeteer позволяет управлять обычным экземпляром браузера с видимым графическим интерфейсом и экземпляром браузера без графического интерфейса. Режим без графического интерфейса особенно полезен для таких задач, как веб-скрапинг, автоматизированное тестирование и создание снимков экрана или PDF, поскольку он позволяет выполнять эти задачи эффективно без отображения окна браузера.

Некоторые преимущества использования режима без графического интерфейса Puppeteer:

1. Производительность: Браузеры в режиме без графического интерфейса обычно работают быстрее, чем графические браузеры, потому что им не нужно отрисовывать и отображать визуальные элементы веб-страницы.
2. Эффективность использования ресурсов: Поскольку графический интерфейс пользователя не отображается, браузеры без графического интерфейса занимают меньше памяти и ресурсов ЦП, чем запуск полного браузера с графическим интерфейсом, что делает их подходящими для запуска на сервере или в среде CI/CD.
3. Фоновые задачи: Браузеры без графического интерфейса хорошо подходят для автоматизированных задач, которые не требуют взаимодействия пользователя или визуальной обратной связи, таких как веб-скрапинг и автоматизированное тестирование.
4. Операции на стороне сервера: Браузеры без графического интерфейса можно использовать в серверных средах для автоматизации задач без физического дисплея.
5. Автоматизация: Скрипты можно писать для имитации операций браузера пользователя, таких как клики, ввод, снимки экрана и т. д., без ручного вмешательства.

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

Есть ли у вас какие-нибудь замечательные идеи или сомнения по поводу веб-скрапинга и Browserless?
Давайте посмотрим, чем делятся другие разработчики на Discord и Telegram!

Как выполнять тестирование с помощью браузера без графического интерфейса с помощью Puppeteer и Browserless?

Давайте разберемся с этим в следующем разделе!

Запуск тестирования без графического интерфейса в Puppeteer с помощью Browserless

Инициализация среды

Перед тестированием нам нужна служба Browserless. Browserless может помочь нам решить сложные задачи веб-скрапинга и автоматизации в большом масштабе. Благодаря облачному развертыванию полностью управляемого достижения Browserless обладает более мощной функциональностью.

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

• Сначала нам нужно получить API KEY Nstbrowser. Вы можете перейти на страницу меню Browserless в клиенте Nstbrowser или просто нажать здесь, чтобы получить доступ:

Определение цели тестового случая

Завершив инициализацию среды, нам нужно дополнительно определить цель нашего теста.

Мы просто рассмотрим пример использования Puppeteer с Browserless без конкретных веб-страниц. Пожалуйста, укажите образец для целевых веб-сайтов и требований.

Здесь давайте использовать Puppeteer, чтобы получить заголовок страницы и создать снимок экрана. После этого мы объединим его с Jest, чтобы написать тестовые случаи.

Вот наше основное тестовое содержание:

1. Является ли заголовок страницы целевым заголовком
2. Содержит ли снимок экрана целевой элемент

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

Далее, пожалуйста, следуйте инструкциям ниже, чтобы установить Puppeteer и запустить тестовый скрипт:

Шаг 1: Создайте новую папку в Vs code

Шаг 2: Откройте терминал Vs code и выполните следующие команды для установки зависимостей:

npm init -y
pnpm add jest jest-html-reporter puppeteer-core

Шаг 3: Завершите связанные файлы

1. Создайте файл конфигурации jest.config.js для выполнения соответствующей конфигурации:

module.exports = {
  testTimeout: 10000, // 10 секунд
  reporters: [
    'default',
    [
      'jest-html-reporter',
      {
        pageTitle: 'Test Report',
        outputPath: './test-report.html',
        includeFailureMsg: true,
        includeConsoleLog: true,
      },
    ],
  ],
};

2. Создайте тестовый скрипт __tests__/puppeteer.spec.js

Чтобы запустить браузер, вам нужно передать соответствующую конфигурацию (для полной конфигурации обратитесь к LaunchNewBrowser)

const puppeteer = require('puppeteer-core');

describe('My First Puppeteer Test', () => {
  it('should load the page and check the title', async () => {
    const browserWSEndpoint = await launchAndConnectToBrowser();
    const browser = await puppeteer.connect({
      browserWSEndpoint: browserWSEndpoint,
      defaultViewport: null,
    });
    const page = await browser.newPage();
    await page.goto('https://example.com');

    const title = await page.title();
    expect(title).toBe('Example Domain');

    await browser.close();
  });

  // сделать снимок экрана страницы
  it('should take a screenshot of the page', async () => {
    const browserWSEndpoint = await launchAndConnectToBrowser();
    const browser = await puppeteer.connect({
      browserWSEndpoint: browserWSEndpoint,
      defaultViewport: null,
    });
    const page = await browser.newPage();
    await page.goto('https://example.com');

    await page.screenshot({ path: 'example.png' });

    await browser.close();
  });
});

async function launchAndConnectToBrowser() {
  const token = ''; // ваш api-токен из nstbrowser
  const config = {
    proxy:
      '', // требуется; формат ввода: схема://пользователь:пароль@хост:порт например: http://пользователь:пароль@localhost:8080
    // platform: 'windows', // поддержка: windows, mac, linux
    // kernel: 'chromium', // поддерживается только: chromium
    // kernelMilestone: '128', // поддержка: 128
    // args: {
    //     "--proxy-bypass-list": "detect.nstbrowser.io"
    // }, // аргументы браузера
    // fingerprint: {
    //     userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.6613.85 Safari/537.36', // userAgent поддерживается с v0.15.0
    // },
  };
  const query = new URLSearchParams({
    token: token, // требуется
    config: JSON.stringify(config),
  });

  const browserWSEndpoint = `ws://less.nstbrowser.io/connect?${query.toString()}`;
  return browserWSEndpoint;
}

Запуск проекта

Теперь нам просто нужно открыть консоль и выполнить следующую команду скрипта:

npx jest --detectOpenHandles

Команды здесь можно в основном разбить на:

• Используйте команду npx для выполнения команды jest.
• Jest найдет файл конфигурации jest.config.js текущего проекта и получит основную информацию о конфигурации.
• В соответствии с содержимым файла конфигурации найдите соответствующий тестовый файл в текущем каталоге проекта и начните выполнение.

Вывод результата

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

В то же время мы можем открыть файл test-report.html, чтобы просмотреть созданный подробный отчет:

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

Преимущества тестирования без графического интерфейса Puppeteer

1. Тестирование с помощью браузера без графического интерфейса быстрее по сравнению с реальными браузерами, поскольку оно потребляет меньше системных ресурсов.
2. Оно повышает производительность выполнения теста, так как обычно выполняется в 2 раза быстрее, чем тестирование с помощью реального браузера.
3. Оно идеально подходит для веб-скрапинга. Предположим, вам нужно извлечь много данных (спортивные данные, данные о акциях и т. д.) с веб-страницы с помощью автоматизации Puppeteer и сохранить их в любую Excel или базу данных. В этом случае режим без графического интерфейса Puppeteer является лучшим выбором, так как нет необходимости запускать реальный браузер для проверки графического интерфейса, и основное внимание уделяется извлечению данных.
4. Оно помогает эмулировать несколько браузеров на одной системе без перегрузки ресурсов.
5. Оно подходит для параллельного тестирования. Браузеры на основе графического интерфейса потребляют много памяти и ресурсов. Поэтому в этом случае браузеры без графического интерфейса Puppeteer являются лучшим выбором.

7 лучших практик использования Puppeteer без графического интерфейса

1. Управление использованием ресурсов: Поскольку Puppeteer в режиме без графического интерфейса работает без графического интерфейса, он быстрее и использует меньше ресурсов. Однако по-прежнему важно управлять использованием памяти и ЦП, особенно при запуске нескольких экземпляров. Используйте встроенные функции Puppeteer, такие как объединение страниц и эффективное управление вкладками, чтобы снизить потребление ресурсов.
2. Обработка тайм-аутов и повторов: Веб-скрапинг или автоматизированные задачи могут сталкиваться с сетевыми задержками или тайм-аутами. Установка правильных значений тайм-аута и реализация логики повтора гарантирует, что ваши скрипты могут обрабатывать прерывистые сбои без сбоев.
3. Умное ожидание элементов: Всегда ожидайте загрузки необходимых элементов, прежде чем выполнять действия. Вместо использования статических задержек (например, page.waitForTimeout) предпочитайте ожидание конкретных событий или элементов (page.waitForSelector), что делает вашу автоматизацию более эффективной и устойчивой к различным временам загрузки.
4. Использование контекстов инкогнито для изоляции: Чтобы избежать утечки данных и обеспечить выполнение каждого теста или скрапинга в чистой среде, используйте контексты инкогнито (browser.createIncognitoBrowserContext). Это предотвращает влияние кэшированных данных, файлов cookie или локального хранилища на последующие сеансы.
5. Использование обхода обнаружения без графического интерфейса: Многие веб-сайты обнаруживают браузеры без графического интерфейса и могут блокировать или предоставлять ограниченный контент для этих запросов. Использование таких методов, как изменение флагов браузера, перезапись user agent и подделка веб-функций (например, удаление navigator.webdriver), может помочь обойти обнаружение без графического интерфейса.
6. Мониторинг производительности и журналов: Используйте инструменты Puppeteer для мониторинга производительности и ведения журналов консоли, чтобы отлаживать и оптимизировать скрипты. Мониторинг показателей производительности страницы и обработка журналов браузера могут помочь диагностировать узкие места и другие проблемы.
7. Оптимизация для масштабируемости: Если вы планируете запускать Puppeteer в большом масштабе, рассмотрите возможность контейнеризации с помощью Docker, использования балансировщиков нагрузки и запуска нескольких экземпляров браузера параллельно. Эти шаги помогут обеспечить масштабируемость и сократить время простоя в производственных средах.

Итоги

Puppeteer без графического интерфейса делает все легко. В этом блоге мы стремимся поделиться с вами:

• мощные функции
• и эффективные шаги по использованию Puppeteer в режиме без графического интерфейса с Browserless

Browserless от Nstbrowser упрощает конфигурацию и работу Puppeteer. Как и раньше, пришло время обратиться: как работает Browserless с Playwright и Puppeteer!