Веб-скрапинг с помощью Playwright

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

Содержание:

• Веб-скрапинг атрибутов и свойств элементов
• Веб-скрапинг списка элементов
• Веб-скрапинг изображений
• Генерация JSON из данных скрапинга

🔥 Важное для QA-специалистов! 🔥
В QaRocks ты найдешь туториалы, задачи и полезные книги, которых нет в открытом доступе. Уже более 15.000 подписчиков – будь среди нас! Заходи к нам в телеграм канал QaRocks 

Веб-скрапинг атрибутов и свойств элементов

Ниже приведен пример, который выполняется с использованием тестового сайта https://danube-web.shop/. В нем мы получаем и выводим значение атрибута href у первого элемента a на главной странице.

Так получилось, что это наш логотип, который ссылается обратно на нашу главную страницу, и поэтому значение href будет совпадать с URL-ом, на который мы переходим с помощью page.goto():

const { chromium } = require('playwright')

;(async () => {
  const browser = await chromium.launch()
  const page = await browser.newPage()
  await page.goto('https://danube-web.shop/')
  const url = await page.$eval('a', (el) => el.href)
  console.log(url)
  await browser.close()
})()

Вместо использования метода $eval можно сначала получить ElementHandle (ссылку на первый элемент a на странице), а затем извлечь из него значение свойства href через evaluate:

const { chromium } = require('playwright')

;(async () => {
  const browser = await chromium.launch()
  const page = await browser.newPage()
  await page.goto('https://danube-web.shop/')
  const element = await page.$('a')
  const href = await element.evaluate((node) => node.href)
  console.log(href)
  await browser.close()
})()

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

Веб-скрапинг списков элементов

Извлекать данные из списков элементов так же абсолютно несложно. Например, давайте получим текстовое содержимое (innerText) каждой категории товаров, отображенной на главной странице:

const { chromium } = require('playwright')

;(async () => {
  const browser = await chromium.launch()
  const page = await browser.newPage()
  await page.goto('https://danube-web.shop/')
  const categories = await page.$$eval('li a', (nodes) =>
    nodes.map((n) => n.innerText)
  )
  console.log(categories)
  await browser.close()
})()

Веб-скрапинг изображений

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

const { chromium } = require('playwright')
const axios = require('axios')
const fs = require('fs')

;(async () => {
  const browser = await chromium.launch()
  const page = await browser.newPage()
  await page.goto('https://danube-web.shop/')
  const url = await page.$eval('img', (el) => el.src)

  const response = await axios.get(url)
  fs.writeFileSync('scraped-image.svg', response.data)

  await browser.close()
})()

Мы используем библиотеку Axios для выполнения GET-запроса к исходному URL-адресу изображения. Тело ответа будет содержать само изображение, которое можно записать в файл с помощью модуля fs.

Читайте также Создание веб-скрапера на Python с помощью Selenium

Генерация JSON из данных скрапинга

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

Предположим, что нам необходимо выполнить скрапинг названия, автора и цены каждой книги, которая отображена на главной странице нашего тестового сайта:

Код для выполнения нашей задачи может выглядеть следующим образом:

const { chromium } = require('playwright')
const fs = require('fs')

;(async () => {
  const browser = await chromium.launch()
  const page = await browser.newPage()
  await page.goto('https://danube-web.shop/')
  const content = await page.evaluate(() => {
    const data = []

    const books = document.querySelectorAll('.preview')
    books.forEach((book) => {
      const title = book.querySelector('.preview-title').innerText
      const author = book.querySelector('.preview-author').innerText
      const price = book.querySelector('.preview-price').innerText
      data.push({
        title,
        author,
        price
      })
    })
    return data
  })

  const jsonData = JSON.stringify(content)
  fs.writeFileSync('books.json', jsonData)
  await browser.close()
})()

Ниже показан полученный файл books.json с извлеченными нами данными:

[
  { "title": "Haben oder haben",
    "author": "Fric Eromm",
    "price": "$9.95"
  },
  {
    "title": "Parry Hotter",
    "author": "J/K Rowlin'",
    "price": "$9.95"
  },
  {
    "title": "Laughterhouse-Five",
    "author": "Truk Tugennov",
    "price": "$9.95"
  },
  {
    "title": "To Mock a Killingbird",
    "author": "Larper Hee",
    "price": "$9.95"
  },
  ...
]

Все вышеприведенные примеры скриптов можно запустить в терминале или командной строке следующим образом:

$ node scraping.js

где scraping.js — это имя файла, в котором мы сохраняем код для веб-скрапинга.

Перевод статьи «Playwright Web Scraping — How to Extract Data from Websites».