Создайте сервис очистки и тестирования веб-страниц, используя GraphQL и Playwright.
Обзор
В моей предыдущей статье мы с вами рассмотрели разработку бессерверных API для тестирования веб-страниц с разными разрешениями с использованием Puppeteer. В этой статье давайте воспользуемся Playwright, похожей библиотекой для автоматизации веб-браузера.
Playwright — это библиотека, доступная в Node.js, Python и Java для автоматизации Chromium, Firefox и WebKit с помощью единого API. Он создан для обеспечения кросс-браузерной веб-автоматизации, которая всегда актуальна, функциональна, надежна и быстра.
Настраивать
Установить Драматург
Давайте установим Playwright и двоичные файлы браузера для Chromium, Firefox и WebKit. Playwright требуется Python 3.7+.
$ pip install playwright $ playwright install
Установите библиотеки Python
Давайте установим необходимые библиотеки Python. requirements.txt показан ниже. Я собираюсь использовать FastAPI и graphene для разработки API-интерфейсов GraphQL.
Pillow fastapi playwright graphene>=2.0 uvicorn
Запустите pip install -r requirements.txt, чтобы установить библиотеки.
Применение
GraphQL API для захвата веб-страницы с помощью определенного порта просмотра
Ниже приведен исходный код FastAPI, который
- предоставляет конечную точку запроса GraphQL, которая принимает параметры URL, ширины и высоты.
- использует
Playwrightдля захвата веб-страницы с предпочтительной шириной и высотой. - возвращает строку изображения PNG в кодировке base64.
Вы можете перейти к http://localhost:8088 , чтобы поиграть с API, используя игровую площадку GraphiQL.
Написание тестового клиента Node.js
Давайте разработаем клиент Node.js для тестирования сервиса. Я собираюсь использовать библиотеку graphql-request.
const {request, gql} = require('graphql-request');
const fs = require("fs");
const query = gql`
{
screenshot(url: "http://www.medium.com", width:1024, height:768)
}
`
const endpoint = 'http://localhost:8088';
request(endpoint, query).then((data) => {
console.log(data.screenshot);
const buffer = Buffer.from(data.screenshot, "base64");
fs.writeFileSync("screenshot.png", buffer);
});
Клиент Javascript запрашивает API, чтобы сделать снимок экрана Medium с использованием области просмотра 1024x768. Скриншот сохраняется в формате PNG.
Исходный код этой статьи можно найти в этом репозитории.
использованная литература
Если вы еще не являетесь участником Medium и хотите им стать, нажмите здесь. (Часть вашей абонентской платы будет использована для поддержки alpha2phi.)
