Обработка blob URL

Puppeteer предоставляет мощные инструменты для автоматизации браузера, включая работу с веб-страницами и их контентом. Одной из сложных задач является работа с blob URL — уникальными ссылками, которые представляют собой данные, генерируемые в браузере с помощью объекта Blob. Эти ссылки часто используются для представления файлов, таких как изображения, видео или текстовые данные, которые могут быть созданы в JavaScript и не сохраняются на сервере.

Что такое blob URL?

Blob URL — это объект, который указывает на временный ресурс, созданный в памяти браузера. Этот ресурс может быть доступен только в контексте текущей страницы и используется для обработки бинарных данных, например, изображений или медиафайлов. URL типа blob:// не существует в Интернете, и они не могут быть использованы напрямую вне контекста браузера.

Пример создания blob URL в Jav * aScript: 

const blob = new Blob([data], { type: &
const url = URL.createObjectURL(blob);

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

Проблемы с blob URL в тестах

При тестировании с Puppeteer часто возникает необходимость работы с контентом, который представлен через blob URL. Однако, такие URL не могут быть напрямую доступными через обычные HTTP-запросы, так как они привязаны только к текущему сеансу браузера.

Для автоматизации работы с blob URL с использованием Puppeteer необходимо учитывать несколько важных аспектов.

Сценарии использования blob URL в Puppeteer

  1. Захват изображений или других данных, загруженных через blob URL

В случае, если необходимо получить изображение или файл, представленный blob URL, Puppeteer позволяет взаимодействовать с элементами страницы и захватывать содержимое. Чтобы получить доступ к изображению, загруженному через blob URL, можно использовать метод page.evaluate для извлечения данных.

Пример: 

const blobUrl = await page.evaluate(() => {
const imageElement = document.querySelector('img');
return imageElement.src;
});

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

  1. Скачивание данных из blob URL

Для того чтобы скачать данные, представленные через blob URL, необходимо воспользоваться Puppeteer для получения самого контента. Процесс включает два этапа: получение blob URL и инициирование скачивания данных. Например, если нужно сохранить изображение, представленное blob URL, можно воспользоваться методом page.evaluate, чтобы инициировать загрузку: 

const blobUrl = await page.evaluate(() => { const imageElement
= document.querySelector('img'); return imageElement.src; });


await page.goto(blobUrl); await page.waitForSelector('img'); await
page.screenshot({ path: 'image.png' });

Этот код позволяет получить blob URL из элемента страницы и затем сохранить его как файл.

  1. Преобразование blob URL в данные, доступные для тестирования

Иногда бывает полезно извлечь данные из blob URL для последующей обработки или анализа. Для этого можно использовать API для работы с файловыми объектами и потоками. Один из подходов — это использование fetch в сочетании с Response.blob(), чтобы конвертировать данные в бинарный формат, который затем можно проанализировать в тестах.

Пример использования fetch для работы с blob URL: 

const blobData = await page.evaluate(async (blobUrl) => {
const response = await fetch(blobUrl);
const blob = await response.blob();
const arrayBuffer = await blob.arrayBuffer();
return arrayBuffer;
}, blobUrl);

Этот подход позволяет извлечь данные из blob URL и обработать их в дальнейших шагах теста.

Проблемы с производительностью при работе с blob URL

Работа с blob URL в Puppeteer может быть ресурсоемкой задачей, особенно когда речь идет о больших данных, таких как изображения высокого разрешения или видео. При работе с такими данными следует учитывать несколько факторов:

  • Время ожидания: Преобразование и извлечение данных из blob URL может занимать значительное время, что в свою очередь может повлиять на производительность тестов.
  • Память: Данные, получаемые через blob URL, обычно хранятся в памяти браузера, что может привести к увеличению использования памяти. Это важно при работе с большими файлами или изображениями.
  • Синхронизация: В некоторых случаях необходимо синхронизировать процесс получения данных из blob URL с другими действиями на странице, такими как ожидание завершения загрузки данных или проверка состояния страницы.

Отладка и тестирование с blob URL

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

Пример добавления логирования для blob URL: 

const blobUrl = await page.evaluate(() => {
const imageElement = document.querySelector('img');
const src = imageElement.src;
console.log('Blob URL:', src);
return src;
});

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

Заключение

Обработка blob URL в Puppeteer требует внимательного подхода, поскольку такие URL представляют собой временные объекты, доступные только в пределах текущей сессии браузера. Тем не менее, благодаря гибкости Puppeteer можно эффективно взаимодействовать с такими данными, захватывать их и анализировать в автоматизированных тестах.

Оглавление