이 페이지는 Cloud Translation API를 통해 번역되었습니다.

WebDriver BiDi의 강력한 기능 활용하기: Puppeteer를 통한 Chrome 및 Firefox 자동화

제슬린 예

Twitter GitHub 홈페이지

이제 Puppeteer가 Firefox와 호환됩니다. 🎉 그런데, 아직 안 왔어요? 🤔 Puppeteer의 새로운 프로토콜인 WebDriver BiDi를 자세히 살펴보고 이 흥미로운 개발이 Firefox 자동화 워크플로에 무엇을 의미하는지 알아보겠습니다.

WebDriver BiDi는 WebDriver Classic의 장점과 CDP (Chrome DevTools Protocol)의 장점을 결합한 새로운 표준화된 교차 브라우저 자동화 프로토콜입니다. 양방향 통신을 약속하여 보다 효율적이고 유능한 자동화와 세밀한 제어를 가능하게 합니다. 공식 로드맵에서 진행 상황을 확인할 수 있습니다.

이전 상태 업데이트 이후 Google은 W3C 브라우저 테스트 및 도구 실무 그룹과 지속적으로 긴밀히 협력해 왔습니다. WebDriver BiDi의 발전 덕분에 이제 Puppeteer에서는 로깅, 네트워크 이벤트, 양식 제출과 같은 기능을 구현할 수 있습니다.

코드 보기

다음 Puppeteer 스크립트는 WebDriver BiDi의 실제 작동 방식을 보여주며 Chrome 및 Firefox에서 원활하게 작동합니다.

프로토콜 설정으로 선택한 브라우저를 실행합니다.
콘솔 메시지에 오류가 있는지 모니터링합니다.
웹페이지로 이동하여 표시 영역 크기를 설정한 다음 버튼을 클릭합니다.
텍스트 콘텐츠를 확인하고 동등성을 어설션합니다.

import * as assert from 'node:assert'; 
import puppeteer from 'puppeteer';

// Arrange: Launch browser with WebDriver BiDi
const browser = await puppeteer.launch({
  protocol: 'webDriverBiDi',
     product: 'firefox', // or 'chrome'
});
const context = await browser.createIncognitoBrowserContext();
const page = await context.newPage();

// Arrange: Monitor console messages
page.on('console', message => {
  if (message.type() != 'error') return;
  console.log('RECEIVED: %s', message.text());
});

// Action
await page.setViewport({width: 600, height: 1041});
await page.goto('https://coffee-cart.app/?breakable=1');

const coffee = await page.waitForSelector('[data-test="Espresso"]');
await coffee.click();

// Assert 
const checkout = await page.$('[data-test="checkout"]');
const total = await checkout.evaluate(el => el.textContent);
assert.equal(total, 'Total: $10.00');

browser.close();

Puppeteer의 WebDriver BiDi 진행 상황

Puppeteer에서 WebDriver BiDi의 기능을 측정하기 위해 포괄적인 Puppeteer 테스트 모음을 사용했습니다. Puppeteer 및 WebDriver BiDi 구현은 아직 미완성 상태이며 Chrome과 CDP를 사용하는 Puppeteer의 부가 기능을 아직 갖추고 있지는 않지만, 현재 상황이 어떤지 명확하게 보여드리고자 합니다.

Firefox:

WebDriver BiDi가 실용적인 자동화 작업에 적합한 품질 수준에 도달했습니다. Mozilla는 Firefox 및 CDP에서 pdf.js용 Puppeteer 테스트를 Firefox 및 WebDriver BiDi로 성공적으로 포팅했습니다.
WebDriver BiDi의 기능이 개선되고 있음을 입증하는 테스트 중 55% 가 넘는 테스트를 성공적으로 통과했습니다.
특히 82개가 넘는 새로운 테스트에서 WebDriver BiDi를 효율적으로 사용하여 더욱 개선할 수 있는 기반을 마련했습니다.

Chrome:

Chrome은 현재 WebDriver BiDi의 통과율 68% 를 달성하고 있으며, 안정적인 기능을 제공하고 있습니다. CDP 기반 접근 방식에 비해 추가 최적화의 여지가 있지만, 이는 앞으로 흥미진진한 발전이 예상됩니다.

쿠키 액세스, 네트워크 요청 가로채기, 특정 에뮬레이션 기능, 권한과 같은 특정 기능은 아직 활성 표준화 중입니다. 준비되면 Puppeteer에 통합됩니다. 그동안 WebDriver BiDi에서 지원하는 Puppeteer 기능의 전체 목록을 확인하세요.

Puppeteer에서 이미 Firefox를 지원하지 않았나요?

Puppeteer는 이전에 CDP의 제한된 브라우저 및 비 크로스 브라우저 구현을 사용하여 Firefox에 대한 실험적 지원을 제공했지만 한계가 있어 지속 가능한 솔루션이 아니었습니다.

새로운 실험용 Firefox 및 WebDriver BiDi 구현은 이러한 문제를 해결합니다.

다음과 같은 추가 질문이 있으실 수 있습니다.

Firefox의 CDP 지원이 중단되나요?
모든 Puppeteer 기능이 지원되나요?

자세한 답변과 자세한 내용은 Firefox의 공지를 확인하세요.

앞으로 다가올 흥미진진한 시간

교차 브라우저 테스트는 주요 개발자 요구사항 중 하나인 만큼 Google은 WebDriver BiDi를 Puppeteer에 통합하게 되어 매우 기쁩니다. 이는 더욱 원활하고 효율적인 교차 브라우저 자동화 환경으로 전환하는 전환점입니다. Puppeteer와 함께 WebDriver BiDi를 살펴보시기 바랍니다.

WebDriver BiDi는 궁극적으로 Puppeteer의 기본 프로토콜이 되어 일관되고 강력한 자동화 경험을 위한 기반을 마련할 것입니다.

WebDriver BiDi로 Puppeteer 테스트를 실행할 때 발생하는 문제는 Puppeteer Issue Tracker에서 문제를 미해결하세요.