Как выполнить парсинг веб-страниц с помощью JavaScript и Selenium

Веб-скрапинг с помощью JavaScript — очень полезный метод извлечения данных из Интернета для представления или анализа. Однако в эпоху динамических веб-сайтов становится трудно точно извлекать данные из Интернета из-за постоянно меняющегося характера данных.

В прошлом мы использовали библиотеки, такие как urllib или requests, для чтения данных с веб-страниц, но с динамическими веб-сайтами все стало рушиться. Для веб-сайтов, которые не являются статичными, использование обычного вызова или запроса ajax просто не сработает.

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

Когда мы разрабатывали автоматизированный портал вакансий для бэкэнд-инженеров, нам нужна была надежная структура веб-скрейпинга, которая помогла бы нам собрать более 20 порталов вакансий и вернуть более тысячи вакансий каждый, и Selenium был ответом.

Но прежде чем мы углубимся в что такое Selenium и выполним парсинг веб-страниц с помощью JavaScript и Selenium, давайте рассмотрим, что такое парсинг веб-страниц.

Что такое веб-скрейпинг?

Веб-скрапинг — это процесс извлечения данных из Интернета для хранения в различных форматах или для дальнейшей обработки и анализа. Его также можно назвать веб-сбором или извлечением веб-данных.

С помощью парсинга веб-страниц с помощью JavaScript и Selenium мы в основном автоматизируем ручной процесс извлечения данных из Интернета и их сохранения для дальнейшей обработки.

Может быть полезно извлекать данные для различных целей, таких как

Академические или бизнес-исследования
Анализ исторических данных
Сравнение цен
SEO
Защита бренда
Проверка объявления
и многие другие варианты использования

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

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

Преимущества парсинга веб-страниц с помощью JavaScript

Ниже приведены несколько преимуществ парсинга веб-страниц:

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

Преимущество веб-скрапинга безгранично и предоставляет предприятиям различные ценные идеи и возможности.

Где проверить защиту данных?

В целом парсинг не является незаконным, но есть некоторые оговорки, и в какой-то степени он стал незаконным.

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

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

Инструменты веб-скрейпинга

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

Если вы хотите получать доступ к данным и собирать их в больших масштабах, вам нужны хорошие инструменты веб-скрапинга, которые могут превзойти блокировку IP-адресов, маскировку и ReCaptcha. Существуют популярные инструменты, такие как Scrapy, Beautiful Soup, Scrapebox, Scrapy Proxy Middleware, Octoparse, Parsehub и Apify.

Тем не менее, я лично буду рекомендовать ScraperAPI, потому что я использую их, и я могу рекомендовать их от всего сердца.

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

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

Селен состоит из трех основных компонентов:

Selenium IDE: это плагин для браузера — более быстрый и простой способ создавать, выполнять и отлаживать скрипты Selenium.
Selenium WebDriver: это набор переносимых API, которые помогают вам писать автоматические тесты на любом языке, работающем поверх вашего браузера.
Selenium Grid: автоматизирует процесс распространения и масштабирования тестов в нескольких браузерах, операционных системах и платформах.

При написании этого блога о парсинге веб-страниц с помощью JavaScript и Selenium последней версией Selenium является Selenium 4. Если вам интересно узнать больше о что нового в Selenium 4, вы можете просмотреть это видео:

Преимущества использования Selenium с JavaScript для парсинга веб-страниц

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

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

В этом учебнике по Selenium JavaScript мы узнаем, как выполнять парсинг веб-страниц с помощью JavaScript и Selenium на нашем локальном компьютере, а также на облачной Selenium Grid LambdaTest.

Мы будем парсить канал LambdaTest YouTube, отображать список видео на веб-странице с помощью Selenium и преобразовывать информацию в данные JSON.

Если вы впервые на этом канале, подпишитесь на канал LambdaTest на YouTube и будьте в курсе последних руководств по Тестированию Selenium, Тестированию Cypress, CI/CD и т. д.

Ускорьте автоматизацию JavaScript с помощью параллельного тестирования. Попробуйте LambdaTest прямо сейчас!

Реализация парсинга веб-страниц с помощью JavaScript и Selenium

Одним из преимуществ Selenium является то, что он может анализировать динамические страницы JavaScript, где есть динамические взаимодействия, такие как наведение курсора на пункты меню. В этом разделе этого блога, посвященном парсингу веб-страниц с помощью JavaScript и Selenium, мы покажем, как парсить видео с YouTube и отображать данные в формате JSON с использованием Selenium и JavaScript.

Selenium инкапсулирует сложность создания инструмента автоматизации для динамических страниц и упрощает его за счет упрощения установки и настройки пакета.

Предпосылки

Прежде чем продолжить ниже, вы должны быть знакомы с Node.js и Express.js — фреймворком Node.js. Если вы новичок в Экспресс-тестировании, вы можете узнать больше об этом из этого руководства Быстрое начало работы с экспресс-тестированием.

Монтаж

Мы продолжим установку необходимых пакетов и программного обеспечения для реализации парсинга веб-страниц с помощью JavaScript и Selenium.

Visual Studio Code: это редактор кода, который мы будем использовать в этой демонстрации, хотя вы можете использовать любой редактор кода по вашему выбору. Вы можете использовать любую другую IDE по вашему выбору.
Драйвер браузера. Чтобы запустить тестовые драйверы Selenium на вашем компьютере, вам необходимо загрузить драйверы из следующих мест в соответствии с выбранным вами браузером.

БраузерРасположение загрузки

Опера

https://github.com/operasoftware/operachromiumdriver/releases

Fire Fox

https://github.com/mozilla/geckodriver/releases

Хром

http://chromedriver.chromium.org/downloads

Интернет-проводник

https://github.com/SeleniumHQ/selenium/wiki/InternetExplorerDriver

Microsoft Edge

https://blogs.windows.com/msedgedev/2015/07/23/bringing-automated-testing-to-microsoft-edge-through-webdriver/

После загрузки любого из драйверов обязательно установите его и правильно настройте в соответствии с вашей операционной системой.

После успешной установки и настройки драйвера браузера мы рассмотрим, как создать новый проект и начать парсинг видео с YouTube в следующем разделе этого блога, посвященном парсингу веб-страниц с помощью JavaScript и Selenium.

Создание проекта

После установки мы создадим новый проект VSCode Node.js и добавим следующие библиотеки в наш файл package.json.

Убедитесь, что Node.js установлен и правильно настроен в вашей операционной системе. Вы можете скачать и установить его с официального сайта Node.js.
Установим следующие пакеты:

    npm install express selenium-webdriver

После установки библиотек давайте создадим файл index.js внутри корневого каталога и настроим наш экспресс-сервер.

    touch index.js

Создайте экспресс-сервер для прослушивания входящих запросов:

const express = require('express')
    const { Builder, By } = require('selenium-webdriver');
    
    const app = express()
    const port = 3000
    app.get('/', (request, response) => {
     // Web Scraping Code here
    })
    app.listen(port, () => {
      console.log(`Example app listening at http://localhost:${port}`)
    })

Приведенный выше фрагмент кода создает новый сервер Express и прослушивает входящие запросы от пользователя. В следующем разделе этого блога, посвященном очистке веб-страниц с помощью JavaScript и Selenium, мы будем использовать библиотеку selenium-webdriver, которую мы установили, для очистки наших видео на YouTube.

Просмотр веб-страниц YouTube с помощью JavaScript и Selenium

В этой демонстрации мы собираем следующие данные с канала LambdaTest на YouTube и отображаем их в формате JSON:

Название видео
Просмотры видео
Дата публикации видео

Вы можете реализовать это с помощью облачной сетки Selenium Automation, предоставляемой LambdaTest, которая уберет всю ручную настройку как в разработке, так и в производстве.

Ниже приведено простое пошаговое руководство о том, как будет происходить парсинг, прежде чем углубляться в реализацию.

Откройте страницу видео канала YouTube.
Он прокручивается до конца страницы, чтобы просмотреть все доступные видео.
Извлекает название видео, просмотры и детали загрузки с помощью цикла.
Преобразуйте очищенную информацию в JSON.

Реализация:

const express = require('express');
const { Builder, By } = require('selenium-webdriver');
 
const app = express();
const port = 3000;
app.get('/', async (request, response) => {
 // Web Scraping Code here
 try {
   const data = await WebScrapingLocalTest();
   response.status(200).json(data);
 } catch (error) {
   response.status(500).json({
     message: 'Server error occurred',
   });
 }
});
app.listen(port, () => {
 console.log(`Example app listening at http://localhost:${port}`);
});
 
async function WebScrapingLocalTest() {
 try {
   driver = await new Builder().forBrowser('chrome').build();
   await driver.get('https://www.youtube.com/c/LambdaTest/videos');
   const allVideos = await driver.findElements(
     By.css('ytd-grid-video-renderer.style-scope.ytd-grid-renderer')
   );
   return await getVideos(allVideos);
 } catch (error) {
   throw new Error(error);
 } finally {
   await driver.quit();
 }
}

Прохождение кода:

Давайте вместе пройдемся по коду и разберемся в его тонкостях.

Шаг 1. Добавьте необходимые пакеты

Во-первых, нам нужны пакеты express и selenium-webdriver, а затем мы создали сервер Express для обработки входящего запроса. Запрос обрабатывается вызовом функции WebScrapingTest.

app.get('/', async (request, response) => {
 // Web Scraping Code here
 try {
   const data = await WebScrapingLocalTest();
   response.status(200).json(data);
 } catch (error) {
   response.status(500).json({
     message: 'Server error occurred',
   });
 }
});
 
async function getVideos(videos) {
 let videoDetails = [];
 try {
   for (const video of videos) {
     const title = await video.findElement(By.id('video-title')).getText();
     const views = await video
       .findElement(By.xpath(".//*[@id='metadata-line']/span[1]"))
       .getText();
     const date = await video
       .findElement(By.xpath(".//*[@id='metadata-line']/span[2]"))
       .getText();
     videoDetails.push({
       title: title ?? '',
       views: views ?? '',
       publishedDate: date ?? '',
     });
   }
 } catch (error) {
   console.log(error);
 }
 return videoDetails;
}

Шаг 2. Создайте экземпляр Selenium WebDriver

Внутри функции openChromeTest мы создали экземпляр класса Builder из импортированного ранее пакета Selenium Webdriver. Мы также передаем метод forBrowser, используемый для указания браузера, который следует использовать для очистки веб-страниц, и, наконец, мы вызываем метод сборки, который создает новый клиент WebDriver на основе текущей конфигурации этого сборщика.

С экземпляром построителя мы передали официальный URL-адрес видео LambdaTest на YouTube в методе get класса построителя.

driver = await new Builder().forBrowser('chrome').build();
       await driver.get('https://www.youtube.com/c/LambdaTest/videos');

Шаг 3. Загрузите все видео YouTube на страницу
Затем мы загрузим все видео на странице и соберем конкретную информацию с помощью цикла в JavaScript.

Для этого нам нужно настроить таргетинг на определенный элемент на странице видео YouTube, которая содержит все видео, с помощью инструмента инспектора Chrome. Мы можем выбрать любой элемент на веб-странице. Ниже приведен скриншот, показывающий элемент и используемый селектор CSS.

На момент написания целевым атрибутом класса был ytd-grid-video-renderer style-scope ytd-grid-renderer, который представляет собой комбинацию свойства класса CSS родительского контейнера и отдельного видеоконтейнера.

Далее мы собираемся преобразовать классы в CSS QuerySelector и настроить таргетинг на все видео, используя метод FindElements в Selenium WebDriver и класс экземпляра By.

Вот как это выглядит:

 const allVideos = await driver.findElements(
         By.css('ytd-grid-video-renderer.style-scope.ytd-grid-renderer')
       );

Selenium использует класс экземпляра By для представления различных селекторов запросов, поэтому вы можете выбирать элементы, используя локаторы Selenium, такие как имя CSS, идентификатор, класс и т. д.

Наконец, метод findElements возвращает объект всех выбранных узлов HTML DOM с именем WebElement, который мы пройдем по циклу, чтобы получить метаданные видео при выполнении парсинга веб-страниц с помощью JavaScript и Selenium.

Шаг 4. Преобразование в формат JSON

Наконец, мы проходим через WebElement и извлекаем метаданные видео, такие как название видео, просмотры видео и дату публикации видео.

async function getVideos(videos) {
 let videoDetails = [];
 try {
   for (const video of videos) {
     const title = await video.findElement(By.id('video-title')).getText();
     const views = await video
       .findElement(By.xpath(".//*[@id='metadata-line']/span[1]"))
       .getText();
     const date = await video
       .findElement(By.xpath(".//*[@id='metadata-line']/span[2]"))
       .getText();
     videoDetails.push({
       title: title ?? '',
       views: views ?? '',
       publishedDate: date ?? '',
     });
   }
 } catch (error) {
   console.log(error);
 }
 return videoDetails;
}

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

Во-вторых, мы также используем селектор идентификаторов для получения названия видео. На этом снимке экрана показано, где получить идентификатор элемента заголовка видео на YouTube с помощью инструмента Инспектор:

Отобразить данные JSON

После успешного выполнения веб-скрапинга YouTube с помощью JavaScript и Selenium мы конвертируем их в JSON и отправляем в ответ на наш запрос с помощью сервера Express. Наконец, мы готовы протестировать новый веб-скраппер.

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

node index.js

Откройте браузер Chrome и посетите localhost:3002, предполагая, что вы используете тот же номер порта, что и в демонстрации.
Через несколько секунд вас должны приветствовать JSON-данные видео YouTube, как на снимке экрана ниже:

Снимок экрана, показывающий результат парсинга веб-страниц с помощью JavaScript и Selenium на странице видеороликов LambdaTest на YouTube.

Веб-скрейпинг с помощью JavaScript и Selenium в облачной Selenium Grid

В предыдущем разделе мы выполнили парсинг веб-страниц с помощью JavaScript и Selenium на нашем локальном компьютере. Одним из недостатков этого подхода является необходимость локальной установки и настройки драйверов браузера.

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

Платформы облачного тестирования, такие как LambdaTest, позволяют проводить живое тестирование и запускать параллельные тесты в более чем 3000 реальных браузерах и их разных версиях. Он предоставляет вам доступ к тысячам браузеров для мобильных устройств и веб-тестирования, чтобы помочь вам получить максимальное тестовое покрытие в процессе веб-автоматизации Selenium.
Давайте посмотрим, как запустить автоматизированный тест Selenium с помощью JavaScript на LambdaTest:

Шаг 1. Давайте начнем с создания бесплатной учетной записи на платформе LambdaTest. После входа в систему получите свое уникальное имя пользователя и ключ доступа из раздела профиля LambdaTest на веб-сайте.

Шаг 2. Внесите следующие изменения в существующий код:
Укажите имя пользователя и ключ доступа.

Укажите имя пользователя и ключ доступа.

const USERNAME = 'YOUR_USERNAME'; //replace with your username
const KEY = 'YOUR_KEY'; //replace with your accesskey

Укажите хост, соответствующий платформе LambdaTest.

const GRID_URL = 'hub.lambdatest.com/wd/hub';

Сгенерируйте желаемые возможности браузера, используя Генератор возможностей LambdaTest.

const capabilities = {
     build: 'Web Scraping with JavaScript and Selenium',
     name: 'Youtube Videos',
     platform: 'Windows 10',
     browserName: 'Chrome',
     version: '90.0',
     selenium_version: '3.13.0',
     'chrome.driver': '90.0',
    };

Укажите gridUrl. Вы также можете найти это значение на панели LambdaTest Dashboard.

const gridUrl = 'https://' + USERNAME + ':' + KEY + '@' + GRID_URL;

Наконец, отредактируйте код, чтобы создать и создать экземпляр браузера на указанной платформе.

    async function WebScrapingWithLambdaTest() {
     try {
       driver = await new Builder()
         .usingServer(gridUrl)
         .withCapabilities(capabilities)
         .build();
       await driver.get('https://www.youtube.com/c/LambdaTest/videos');
       const allVideos = await driver.findElements(
         By.css('ytd-grid-video-renderer.style-scope.ytd-grid-renderer')
       );
       return await getVideos(allVideos);
     } catch (error) {
       throw new Error(error);
     } finally {
       await driver.quit();
     }
    }

Вот окончательная реализация автоматизации Selenium с помощью JavaScript, которая будет работать в облачной Selenium Grid от LambdaTest:

app.get('/lambdatest', async (request, response) => {
     try {
       const data = await WebScrapingWithLambdaTest();
       response.status(200).json(data);
     } catch (error) {
       response.status(500).json({
         message: 'Server error occurred',
       });
     }
    });
    const USERNAME = 'YOUR_USERNAME'; //replace with your username
    const KEY = 'YOUR_KEY'; //replace with your accesskey
    const GRID_URL = 'hub.lambdatest.com/wd/hub';
    const capabilities = {
     build: 'JavaScript and Selenium Testing',
     name: 'Google search',
     platform: 'Windows 10',
     geoLocation: 'US',
     browserName: 'Chrome',
     version: '90.0',
     selenium_version: '3.13.0',
     'chrome.driver': '90.0',
    };
     
    const gridUrl = 'https://' + USERNAME + ':' + KEY + '@' + GRID_URL;
     
    async function WebScrapingWithLambdaTest() {
     try {
       driver = await new Builder()
         .usingServer(gridUrl)
         .withCapabilities(capabilities)
         .build();
       await driver.get('https://www.youtube.com/c/LambdaTest/videos');
     
       const allVideos = await driver.findElements(
         By.css('ytd-grid-video-renderer.style-scope.ytd-grid-renderer')
       );
       return await getVideos(allVideos);
     } catch (error) {
       throw new Error(error);
     } finally {
       await driver.quit();
     }
    }

Шаг 3. Наконец, пришло время запустить тест в сетке LambdaTest. Запустите следующую команду на терминале, чтобы запустить автоматизированное тестирование с помощью Selenium JavaScript.

node index.js

Затем посетите localhost:3000/lambdatest. У вас должен получиться тот же результат, что и раньше. Если вы проверите свою панель инструментов LambdaTest в разделе «Автоматизация», вы увидите моментальный снимок выполнения, который указывает на то, что выполнение теста прошло успешно.

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

Недостатки использования Selenium для парсинга веб-страниц с помощью JavaScript

В этом блоге мы увидели, как выполнять парсинг веб-страниц с помощью JavaScript и Selenium. Однако у использования какой-либо конкретной технологии (или инструмента/фреймворка) есть некоторые недостатки, и Selenium не является исключением. Ниже приведены некоторые недостатки использования Selenium для парсинга веб-страниц.

При использовании Selenium для парсинга веб-страниц он может автоматически загружать ненужные файлы. Например, если вас интересуют только текстовые данные веб-страницы, Selenium также загрузит ресурсы (например, CSS, HTML, JS и другие файлы), необходимые для отображения веб-страницы.
Он потребляет время и ресурсы при использовании Selenium WebDriver, потому что загружает ненужные файлы для отображения веб-страницы.
Веб-скрейпинг с Selenium работает медленно, поскольку он ожидает загрузки всей страницы, прежде чем вы сможете начать доступ к данным. Чтобы узнать больше об ожиданиях, вы можете прочитать этот блог Типы ожиданий в Selenium.

Посмотрите это видео, чтобы узнать, что такое ожидания в Selenium и как с ними работать, используя различные методы, такие как жестко закодированные паузы и сочетание явных ожиданий с различными шаблонами проектирования.

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

Краткое содержание

Веб-скрапинг — важный метод извлечения данных. Это устраняет ручной процесс извлечения общедоступных данных. Веб-скрапинг также очень точен и занимает меньше времени. Его также можно настроить для получения динамических веб-сайтов с помощью Selenium и JavaScript.

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

Мы собрали весь контент официального канала LambdaTest на YouTube и преобразовали его в JSON, автоматически извлекая заголовки и авторов для создания матрицы авторов, среди других полезных идей.

Первоначально опубликовано на https://www.lambdatest.com 18 июля 2022 г.

Как выполнить парсинг веб-страниц с помощью JavaScript и Selenium | Лямбда-тест