How browser automation works behind the scenes - JSWORLD 2023

https://www.youtube.com/watch?v=6vwWBKfwTWk

을 시청하고 정리한 글입니다.

Debugging & Testing

• DevTools
• Browser Automation
• ChromeDriver
• WebDriver BiDi

WebDriver “Classic” Protocol - Conventional

• 전통적인 프로토콜
• 모든 브라우저에서 동작
• pull-based - 클라이언트는 서버에 HTTP 통신을 해서 응답을 받아야 함 - 서버가 클라이언트에 직접적으로 메시지를 보내지 못함
• command 마다 HTTP handshake가 필요

ChromeDevTools Protocol(CDP) - Non-standard

• 크로미움 기반 브라우저에서만 동작
• Puppeteer, Playwright, Selenium, Nightwatch, WebdriverIO, Cypress, Testcafe
• Browser drivers를 사용하지 않음
• 웹소켓 기반으로 빠른 커뮤니케이션 가능
• chatty - 프로토콜단에서 많은 command를 생성 - 원래 디버깅을 목적으로 디자인되었음
• low-level control 지원 - device mode 시뮬레이션 - geolocation 시뮬레이션 - 네트워크 요청 intercept - console log message

// 아래 명령어를 사용해 프로토콜단에서 벌어지는 일들의 로그를 볼 수 있음
DEBUG=puppeteer:protocol:SEND*

Web APIs + JavaScript - Non-standard

• 크로미움 기반 브라우저에서 동작
• 개발자 -> 자동화 툴 -> 테스트 스크립트
• 자동화 툴 -> 프로토콜로 브라우저에서 스크립트 실행

Cypress

• 브라우저에서 실행
• Nodejs 서버 프로세스로 실행

TestCafe

• Node server side test code -> client-side javascript
• 브라우저에 삽입

크로스 브라우저 자동화를 어떻게 더 잘할 수 있을까?

WebDriver BiDi

• WebDriver BiDi protocol을 통해 명령을 수행
• 웹소켓 사용
• 크로스브라우저 지원
• 빠르고, 양방향 메시징 가능
• low level control도 지원
• Ergonomic API build for testing - Ergonomic : 인체공학적이라는 뜻인데, 의역하기 어려움.

New protocol을 도입하기 위해 체크해야 되는 부분

• Specification(RFC)
• Verification
• Implementation

발표자님의 말씀

• DX 발전과 ecosystem에 기여 중
• 테스팅 툴들이 사람들에게 도움이 되길 바라며
• WebDriver BiDi를 사용하는 프레임워크가 출시되면 빨리 써보고 예제를 많이 올려주시길!

느낀점

구글 크롬 new features 탭에 나오시는데 너무 반가웠다. 이런 툴들은 어떻게 돌아가나 신기했는데 원리를 알고 나니 더 재밌어졌다. cypress를 사용해봤는데 너무 무거워서 로컬로 돌리면 pc가 감당하지 못했다. WebDriver BiDi가 나오면 써보고 싶다. 가볍고 빠르길 바라며.

https://github.com/GoogleChromeLabs/chromium-bidi/milestones