이제 BrowserStack에서 WebDriver BiDi를 사용하여 자동화 가능

Matthias Rohmer

지난 3년간 Chrome의 브라우저 자동화팀은 BrowserStack과 같은 다른 주요 브라우저 및 도구 공급업체와 협력하여 브라우저 전반에서 양방향 자동화 워크플로를 지원하는 새로운 브라우저 자동화 프로토콜인 WebDriver BiDi를 만들었습니다. 이러한 워크플로는 이전에는 Chromium 기반 브라우저의 독점 Chrome DevTools 프로토콜로만 가능했습니다.

오늘은 BrowserStack을 시작으로 WebDriver BiDi가 개발자를 위한 프로덕션 버전으로 출시되어 이 공동 작업의 중요한 이정표가 되는 날입니다.

Selenium 및 BrowserStack

최근 BrowserStack은 WebDriver BiDi에도 기여한 성숙한 오픈소스 브라우저 자동화 프레임워크인 Selenium의 공식 개발 파트너가 되었습니다. 이 파트너십은 BrowserStack이 번성하는 테스트 생태계에 지속적으로 투자하고 있음을 보여주는 증거이며, BrowserStack은 Selenium의 핵심 유지보수자도 여러 명 고용하고 있습니다.

Selenium 프로젝트의 일부인 Selenium Grid를 사용하면 여러 기기에서 테스트를 동시에 실행할 수 있습니다. 하지만 직접 그리드를 설정하고, 수십 대의 다양한 기기를 획득 및 유지보수하고, 이러한 기기를 계속 사용할 수 있도록 유지하는 것은 쉽지 않거나 불가능할 수도 있습니다.

BrowserStack과 같은 호스팅된 Selenium Grid 솔루션을 사용하면 직접 관리하지 않고도 다양한 플랫폼과 기기에서 테스트를 더 쉽게 실행할 수 있습니다.

Selenium Grid의 WebDriver BiDi

Selenium은 WebDriver 표준을 기반으로 하지만 (누락된 BiDi 참고) 한동안 WebDriver BiDi를 실험적으로 지원해 왔습니다. 오늘부터 BrowserStack에서 호스팅되는 Selenium Grid의 프로덕션 환경에서 WebDriver BiDi 명령어를 사용할 수 있습니다.

이제 Chrome뿐만 아니라 WebDriver BiDi를 지원하는 모든 브라우저에서 요청 가로채기, 고급 에뮬레이션, 브라우저 이벤트 실시간 처리와 같은 기능을 사용할 수 있습니다.

다음 예에서는 BrowserStack에서 WebDriver BiDi를 사용하여 로그 이벤트를 수신 대기하는 방법을 보여줍니다. 그런 다음 자동화된 로그는 automate.browserstack.com에서 검사할 수도 있습니다.

const webdriver = require('selenium-webdriver');

// Insert credentials from https://www.browserstack.com/accounts/profile/details
const USERNAME = '<YOUR_USERNAME>';
const ACCESS_KEY = '<YOUR_ACCESS_KEY>';

(async () => {
  const driver = await (new webdriver.Builder()
    .withCapabilities({
      browserName: 'chrome',
      'bstack:options': {
        seleniumVersion: '4.22.0',
        seleniumBidi: true, // Enable WebDriver BiDi.
      },
    })
    .usingServer(
      `https://${USERNAME}:${ACCESS_KEY}@hub-cloud.browserstack.com/wd/hub`
    )
    .build());

  // Add a listener for log events.
  await driver.script().addConsoleMessageHandler((logEntry) => {
    console.log(logEntry.text);
  });

  await driver.get(
    'https://www.selenium.dev/selenium/web/bidi/logEntryAdded.html'
  );

  // Trigger a console log on the demo page.
  await driver.findElement({ id: 'consoleLog' }).click();
  await driver.quit();

  // Inspect logs on automate.browserstack.com!
})();

BrowserStack은 시작에 불과합니다

Chrome 브라우저 자동화팀은 오늘 BrowserStack팀이 WebDriver BiDi 지원을 출시한 것을 축하합니다. 또한 앞으로 몇 주 내에 BrowserStack, Selenium과 같은 기타 도구, 기타 주요 브라우저에서 WebDriver BiDi 지원이 확대될 것으로 기대됩니다.

이 공지사항을 보고 테스트에 관심이 생겼지만 아직 테스트 여정을 시작하지 않았다면 web.dev에서 테스트 학습 과정을 확인해 보세요.