node puppeteer 라이브러리 까보기 1

원장·2024년 12월 22일

라이브러리 분석

목록 보기
2/2

생각, 모르던 것들

DevTools Protocol / WebDriver BiDi이 뭐지?

Puppeteer는 DevTools Protocol 또는 WebDriver BiDi를 사용하여 브라우저(Chrome/Firefox)를 제어할 수 있는 고수준 API를 제공한다는데, 위 2개를 정확히 모름.

DevTools Protocol

DevTools Protocol 은 크롬 기반 브라우저(예: Google Chrome, Microsoft Edge 등)에서 개발자 도구 기능을 프로그래밍적으로 제어할 수 있도록 제공되는 프로토콜

주요 기능으로는 DOM 및 CSS 제어, Javascript 실행, 네트워크 제어, 성능 모니터링, 스크린샷 및 PDF 생성, 브라우저 이벤트 구독이 있음.

장점은 고성능, 다양한 API 지원, 단점은 Chomr 및 Chromium 기반 브라우저에서만 완전히 지원.

사용사례 > Puppeteer, Playwright

WebDriver BiDi

WebDriver BiDi (Bidirectional Protocol) 는 W3C(WebDriver 표준 위원회)에서 정의한 새로운 웹 브라우저 제어 프로토콜입니다. 기존 WebDriver의 한계를 극복하기 위해 양방향 통신(Bidirectional Communication)을 지원합니다.

주요 특징으로는 양방향 통신 지원, 표준화, WebDriver의 한계 보완, 브라우저 이벤트 구독이 있음.

장점은 다양한 브라우저에서 사용할 수 있도록 설계, 기존 WebDriver와 비교해 실시간 이벤트 처리와 양방향 데이터 흐름 가능, 크로스브라우저 지원

사용사례 > Selenium, 차세대 WebDriver 구현

결론

Puppeteer 내부에도 1가지 방법으로 브라우저를 제어하는게 아니였음.

위 2가지 방법을 섞어서 쓰는 것으로 보임.

Puppeteer-core는 왜 씀?

puppeteer로 설치할 경우, 호환 가능한 Chrome 브라우저를 같이 설치한다고함.

puppeteer-core로 설치할 경우, 브라우저를 설치하지 않고 Puppeteer만 설치.

테스트 자동화

UI 테스트와 E2E 테스트를 수행할 때 사용할 수 있다고함. 크롤링을 주기적으로 돌려서 UI가 깨졌는지 제대로 작동하고 있는지 볼 때도 굉장히 유용할듯함.

E2E가 뭐임?

소프트웨어 테스트의 한 종류로, 시스템 전체를 시작부터 끝까지 실제 사용자 관점에서 테스트하는 방식임.

단위 테스트나 통합 테스트와는 다르게, 전체 시스템의 흐름을 시뮬레이션하여 완전한 기능을 테스트하는 것임.

사용자 관점에서의 테스트(로그인, 데이터 입력), 전체 시스템 테스트(DB,API,외부 서비스)로 시스템의 모든 부분이 의도한 대로 상호작용하는지 확인하며 버그, 장애, 통합 문제를 발견하는 것.

다양한 도구가 있지만 Puppeteer, Selenium, Playwright, Cypress(프론트엔드 중심) 이 많이 쓰인다고함.

E2E와 다른 테스트 종류 비교

목적 & 대상 & 예제

단위 테스트 - 개별 함수/모듈 테스트 & 코드의 특정 단위(함수, 클래스) & sum() 함수가 올바른 값을 반환하는지 확인.

통합 테스트 - 여러 모듈의 상호작용 테스트 & 모듈 간의 데이터 흐름 & 프론트엔드에서 호출한 API가 백엔드와 제대로 통신하는지 확인.

E2E 테스트 - 전체 시스템 흐름 테스트 & 전체 애플리케이션 & 로그인 > 대시보드 > 데이터 저장 과정을 테스트

결론

단위 테스트, 통합 테스트라는 명칭을 쓰면서도 정확한 정의는 모르고있었다. 이 기회에 정리할 수 있었고 E2E에 대해 알아서 좋았다.

라이센스 Apache-2.0

Apache-2.0은 오픈소스 소프트웨어에서 널리 사용되는 라이선스 중 하나로, 개발자와 사용자가 자유롭게 소프트웨어를 이용, 수정, 배포할 수 있도록 허용

특징

자유로운 사용(개인, 기업 상관없이 소프트웨어를 상업적목적까지도 사용 가능)

수정 및 배포 가능(소스 코드를 수정하여 자신만의 버전을 만들고, 이를 배포할 수 있고, 수정한 내용을 공개할 의무도 없음)

라이선스 표시(배포 시 원래 소프트웨어의 Apache 라이선스를 유지하고 포함해야함)

특허 사용 허가(소프트웨어의 원저작자가 소프트웨어에 포함된 특허에 대한 사용권을 사용자에게 허용함)

보증 없음(소프트웨어는 있는 그대로(as is) 제공되며, 제작자는 소프트웨어와 관련된 보증을 제공하지 않음)

Apache 라이센스를 사용하는 유명 프로젝트들

Apache HTTP Server
TensorFlow
Flutter
Puppeteer

이 중 Flutter 최근에 Flock으로 하드 포크한다고 들었는데 이런 라이센스도 연관이 있군.

다른 오픈소스 라이센스

()는 Apache-2.0과 차이

MIT(특허 관련 조항x)
GPL(소스 코드 공개 의무)
BSD(특허 관련 조항x)
LGPL(LGPL 코드를 사용하는 프로그램은 공개 의무가 없으나 수정된 LGPL 라이브러리 자체는 소스 코드를 공개해야 함)
Proprietary(사용자가 코드를 수정하거나 배포할 권리가 없음, 모든 권리는 제작자)

의존성

6개의 라이브러리에 의존한다고함.

@puppeteer/browsers(브라우저 관리 패키지로, 양방향 통신을 가능하게함)

chromium-bidi(Chromium의 WebDriver BiDi 지원을 구현한 패키지로, 양방향 통신을 가능하게함)

cosmiconfig(JavaScript 프로젝트의 설정 파일을 검색하고 로드하기 위한 유틸리티)

devtools-protocol(Chrome DevTools Protocol을 정의한 TypeScript 및 JavaScript 클라이언트 라이브러리)

puppeteer-core(Puppeteer의 코어 패키지로, 브라우저를 설치하지 않고 기본 Puppeteer 기능만 제공)

typed-query-selector(TypeScript에서 DOM 요소 쿼리 셀렉터를 타입 안정성을 제공하며 타입 체크를 강화)

업데이트 주기

최근 23.11.1도 3일 전에 업데이트되었고, 총 916번 업데이트된걸 보니 개빡세게 관리되는 라이브러리임.

제작자 형 얼굴

형 덕에 밥먹고 살아 고마워.

라이브러리

라이브러리를 보던 중 테스트 폴더가 따로 있는걸 보면서 테스트는 필수적이구나 느낌.

profile
나 원장이 아니다

0개의 댓글