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

Matthias Rohmer
Matthias Rohmer
X GitHub LinkedIn

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

오늘은 WebDriver BiDi라는 공동의 노력을 통해 이룬 중요한 성과입니다. BrowserStack에서 시작하여 마침내 개발자를 위한 프로덕션 준비가 되었습니다 오늘

Selenium 및 BrowserStack

최근 BrowserStack이 Selenium의 공식 개발 파트너가 되었습니다. 성숙한 오픈소스 브라우저 자동화 프레임워크로 WebDriver BiDi를 사용합니다. 이 파트너십은 BrowserStack이 계속 노력하고 있는 적극적으로 투자하고 있으며 BrowserStack은 또한 자체 테스트 생태계를 Selenium의 핵심 유지관리자입니다.

Selenium 프로젝트의 일부인 Selenium Grid는 여러 기기에서 테스트를 동시에 실행할 수 있습니다. 그러나 그리드를 설정하면 수십 대의 기기를 확보하고 유지관리하며 이러한 특성을 유지하는 것은 어렵거나 불가능할 수도 있습니다

BrowserStack과 같은 호스팅된 Selenium Grid 솔루션을 사용하면 직접 관리할 필요 없이 다양한 플랫폼과 기기에서 있습니다.

Selenium Grid의 WebDriver BiDi

Selenium은 WebDriver 표준을 기반으로 하지만 (BiDi 누락에 주의) 한동안 WebDriver BiDi를 실험적으로 지원합니다. 오늘부터 BrowserStack에서 호스팅되는 Selenium 그리드에서 프로덕션에 WebDriver BiDi 명령을 실행합니다.

이렇게 하면 요청 가로채기, 고급 에뮬레이션, Chrome뿐만 아니라 모든 환경에서 실시간으로 브라우저에서 WebDriver BiDi를 지원합니다.

다음 예시에서는 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 브라우저 자동화팀은 오늘 WebDriver BiDi 지원을 시작합니다! 또한 WebDriver BiDi에 대한 지원이 BrowserStack, 기타 도구 등 다른 주요 브라우저에서도 제공될 예정입니다.

이 발표를 통해 테스트에 대해 들었는데 아직 시작하지 않으셨다면 web.dev의 학습 테스트 과정을 확인하세요.