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

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

Jecelyn Yeen

이제 Puppeteer가 Firefox와 통신합니다. 🎉 하지만 이미 시작되지 않았나요? 🤔 Puppeteer의 새로운 프로토콜인 WebDriver BiDi를 자세히 살펴보고 이 흥미로운 개발이 Firefox 자동화 워크플로에 어떤 의미가 있는지 알아보세요.

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

이전 상태 업데이트 이후로 Google은 W3C 브라우저 테스트 및 도구 실무 그룹과 긴밀히 협력해 왔습니다. 이제 Puppeteer는 WebDriver BiDi 개선사항 덕분에 로깅, 네트워크 이벤트, 양식 제출과 같은 기능을 구현합니다.

코드 보여주세요

다음 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는 pdf.js의 Puppeteer 테스트를 Firefox 및 CDP에서 Firefox 및 WebDriver BiDi로 이식했습니다.
테스트의 55% 이상이 WebDriver BiDi로 성공적으로 통과하여 기능이 점점 늘어나고 있음을 보여줍니다.
특히 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 전용 공지를 확인하세요.

앞으로 펼쳐질 흥미진진한 시간

교차 브라우저 테스트는 개발자의 주요 요구사항 중 하나였으므로 WebDriver BiDi를 Puppeteer에 통합하는 작업을 주도하게 되어 기쁩니다. 이는 더욱 원활하고 효율적인 교차 브라우저 자동화 환경으로 나아가는 전환점이 될 것입니다. Puppeteer를 통해 WebDriver BiDi를 살펴보세요.

앞으로 WebDriver BiDi가 Puppeteer의 기본 프로토콜이 되어 일관되고 강력한 자동화 환경을 제공할 것입니다.

WebDriver BiDi로 Puppeteer 테스트를 실행할 때 문제가 발생하면 Puppeteer Issue Tracker에서 문제를 여세요.