이 페이지는 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에서 문제를 여세요.