Selenium VS Puppeteer VS HTTP Client
HeadlessBrowser Chrome headless javascript
WEB
Publish Date:   2019-05-01
Read Count:  

Selenium VS Puppeteer VS HTTP Client 대해 알아볼 예정 입니다.
각각의 특징은 무엇인지 알아 보겠습니다.

Selenium

Selenium HomePage

Selenium이란 Web Browser 자동화를 위해 태어 났으며, 보통 Cross Browser Test와 UI Test에 활용 합니다.

Selenium 에서 오픈 중인 프로젝트는

  • Selenium-WebDriver : 로컬 또는 원격 시스템에서 브라우저를 기본적으로 구동 할 수 있습니다.
  • Selenium-Grid : 여러 서버에서 동시에 여러 테스트를 실행하여 여러 브라우저 나 운영 체제를 테스트하는 데 걸리는 시간을 줄여 Selenium Remote Control을 다른 수준으로 끌어 올립니다.
  • Selenium IDE : 브라우저에서 테스트를 기록하고 재생할 수있게 해주는 Chrome 및 Firefox 확장 기능입니다.
  • Selenium Remote Control : 거의 모든 프로그래밍 언어와 테스트 프레임 워크를 사용하여 웹 브라우저를 로컬 또는 다른 컴퓨터에서 제어 할 수있는 클라이언트 / 서버 시스템입니다.
    Selenium Ecosystem 활용

이 존재 하며, 자세한건 사이트에서 직접 참조 바람
https://www.seleniumhq.org/projects/

Cross Browser Test와 UI Test에 주로 이용되는 프로젝트는 Selenium-WebDriver이며, 이는 W3스펙에 의한 WebDriver 구현체를 쉽게 사용하게 추상화하여 여러 WebDriver를 지원하고 프로그래밍이 가능한 Web Browser를 제공 함

Selenium-Webdriver는 다양한 언어를 지원하기 위해 라이브러리를 제공 합니다.

  • Java
  • C#
  • Javascript(Node.js)
  • Python

Spring 진영에서는 End-To-End Test 지원을 위한 Spring MVC Test중 Selenium을 사용 할 수 있습니다.
https://docs.spring.io/spring-test-htmlunit/docs/current/reference/html5/

# Spring MVC Test 코드(HtmlUnit을 활용)
assertThat(newMessagePage.getUrl().toString()).endsWith("/messages/123");
String id = newMessagePage.getHtmlElementById("id").getTextContent();
assertThat(id).isEqualTo("123");
String summary = newMessagePage.getHtmlElementById("summary").getTextContent();
assertThat(summary).isEqualTo("Spring Rocks");
String text = newMessagePage.getHtmlElementById("text").getTextContent();
assertThat(text).isEqualTo("In case you didn't know, Spring Rocks!");

지원하는 드라이버들 (2019.04.28 기준)

Browser Maintainer Versions Supported
Chromium Chromium All versions
Firefox Mozilla 54 and newer
Internet Explorer Selenium 6 and newer
Opera Opera Chromium / Presto 10.5 and newer
Safari Apple 10 and newer

selenium-webdriver를 공부하기 위한 예제
크롬과 파이어폭스 2가지 webdriver를 받아 구글 검색 예제를 작성
자세한 내용은 아래의 링크를 참조 바람.
https://seleniumhq.github.io/selenium/docs/api/javascript/index.html

Puppeteer

Puppeteer

Puppeteer는 Headless Chrome Node.js API입니다. Puppeteer는 Chrome과 통신하기 위해 Chrome DevTools Protocol를 사용 하며, Chrome Devtools의 모든 기능을 Node.js에서 사용 가능하게 해줍니다. 개인적으로 API 호출 하나하나가 Browser를 사용하듯이 직관적이라고 느꼇습니다.
Puppeteer API DOC
Chrome DevTools Protocol Viewer
Awesome Puppeteer(활용 예제 모음)

Puppeteer 특징은 다음과 같습니다.

  • 페이지의 스크린 샷과 PDF를 생성
  • SPA (Single Page Application)를 크롤링하고 사전 렌더링 된 내용 (즉, “SSR”(Server-Side Rendering))을 생성
  • Form 테스트, UI 테스트, 키보드 입력 등 자동화
  • 최신 JavaScript 및 브라우저 기능을 사용하여 테스트
  • 사이트 의 타임 라인 추적 을 캡처하여 성능 문제를 진단
  • Chrome 확장 프로그램을 테스트

Chrome DevTools Protocol

DevTools Protocol는 Chrome을 직접 사용 할 수있는 프로토콜이며 다양한 언어의 라이브러리가 존재 하지만, Puppeteer처럼 구글에서 관리되는 프로젝트가 아닙니다.
다른 언어의 라이브러리는 Awesome chrome-devtools 참조 하세요

HTTP Client

리눅스에서 사용하는 curl, wget등이 있으며 각각 지원언어에 따른 HTTP Client들이 존재 합니다.
HTTP를 사용하기에 가장 간단한 방법이며 Web의 정보를 쉽게 취득 할 수 있습니다.

# 구글 뉴스 스크래핑
curl https://news.google.com/?tab=wn&hl=ko&gl=KR&ceid=KR:ko > google_news.html

비교

종류 속도 Community API DOC(주관적임) 지원 언어 Javascript 실행
Selenium-Webdriver 보통 활발 보통 Java, C#. Python, Javascript(Node.js) O
Puppeteer 빠름 적음 좋음 Javascript(Node.js) O
HTTP Client 매우빠름 활발 ? 다양 X

속도

HTTP Client

const https = require('https');

https.get('https://news.google.com/?tab=wn&hl=ko&gl=KR&ceid=KR:ko', res => {
    res.setEncoding('utf8');
})

Node.js HTTP Client

Selenium

require('chromedriver')
const {Builder, By, Key, until} = require('selenium-webdriver')

(async (browserName) => {
    let driver = await new Builder().forBrowser('chrome').build()
    try {
        await driver.get('https://news.google.com/?tab=wn&hl=ko&gl=KR&ceid=KR:ko')
    } catch (e) {
        console.error(e)
    } finally {
        await driver.quit()
    }
})()

Node.js Selenium-WebDriver

Puppeteer

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({headless: true});
    const page = await browser.newPage();
    await page.goto('https://news.google.com/?tab=wn&hl=ko&gl=KR&ceid=KR:ko')
    await browser.close();
})();

Node.js Puppeteer(No Headless)
Node.js Puppeteer(Headless)

시간 정리

  1. HTTP Client 0.11초
  2. Puppeteer(Headless) 0.66초

  3. Selenium, Puppeteer(No Headless) 1.56초

    정리

    • 단순 HTML Content만 Scraping 할 경우 HTTP Client 추천
    • 크로스 브라우저 UI 테스트가 필요할 경우 와 다양한 지원을 원하면 Selenium 추천
    • 로그인과 Javascript 구동, SPA의 스크래핑이 필요하고 Chrome의 DevTools 기능을 사용 하고 싶을 경우 Puppeteer(DevTools Protocol) 추천

P.S
Puppeteer 프로젝트들(Awesome Puppeteer)을 살펴 보는 와중에 눈에 띄는 재미있는 프로젝트를 2개 발견 하였습니다.

  • puppeteer-cluster - Worker를 생성해 CPU자원을 최대한 사용가능(모니터링 지원)
  • puppeteer-recorder - 크롬 확장프로그램으로 녹화 기능을 통해 Puppeteer Node.js Script를 생성

StackOverflow
Webdriver VS Devtools에 대해서 비교 해놓음
https://stackoverflow.com/questions/50939116/what-is-the-difference-between-webdriver-and-devtool-protocol

  Reprint please specify: Ahea Team Study Blog Selenium VS Puppeteer VS HTTP Client

img

김종인

Java로 생명을 연장하고 있는 개발자 입니다.
오픈소스 활용에 관심이 많으며 이것저것 다 해볼려 노력 하고 있습니다.

 Previous
2019하반기 스터디 주제 공유 2019하반기 스터디 주제 공유
2019 하반기 스터디 주제는 생산성 입니다 소프트웨어 개발에 있어 다양한 생산성을 관점으로 주제를 선정해주세요 devops 배포 자동화 작업 시간을 줄일수 있는 다양한 라이브러리나 프레임워크 이외에 다양하게 개발
2019-07-03 공지
공지
Next 
WebDriver VS DevTools Protocol WebDriver VS DevTools Protocol
WebDriverWeb Browser 자동화를 위해 태어 났으며, 보통 Cross Browser Test와 UI Test에 활용 합니다. WebDriver는 W3에서 정의한 WebDriver 스펙에 맞춰 각 브라우저
2019-05-01 WEB
HeadlessBrowser Chrome headless javascript
  TOC