UC-DEV-009DeveloperLv3

Playwright 統合（proxy or Browser API）

Playwright を Bright Data の proxy／Browser API と接続し、既存テスト資産を活かす。

PlaywrightBrowser API

KPI 例

成功率
実行時間
並列度

Playwright と Bright Data を組み合わせる方法は大きく 2 つあります。1 つは Proxy Networks を Playwright の proxy 設定に入れる方法、もう 1 つは Scraping Browser へ CDP 接続する方法です。既存のテストや自動化資産を活かすなら、まずはプロキシ統合から始め、複雑な操作や保護の強いサイトだけ Scraping Browser に上げる構成が現実的です。

誰の課題か

既に Playwright のテストや収集コードを持っていて、大きく作り替えたくない開発チーム
地域差やブロックの影響で、ローカル回線だけでは再現性が低い QA / SRE
単純なページ遷移は軽く、複雑な操作だけは重いブラウザ基盤に載せたい担当者

推奨製品セット

製品	役割	このページでの使い方
Playwright	既存コード資産	ブラウザ操作ロジックをそのまま使う
Proxy Networks	直接プロキシ統合	`chromium.launch({ proxy })` で接続する
Scraping Browser	リモートブラウザ	`connectOverCDP()` の接続先にする
Native Access	認証情報	proxy / browser の接続情報に使う

Bright Data Docs の Playwright 連携ページは、主に Proxy Networks との直接統合を説明しています。
Browser API 系を使う場合は、Proxy Integration ではなく Scraping Browser の Docs / Quickstart を参照する必要があります。

最小実装イメージ

まずは Proxy Networks を Playwright に入れる

npm install playwright

import { chromium } from "playwright";
 
const BRIGHTDATA_HOST = process.env.BRIGHTDATA_HOST || "brd.superproxy.io";
const BRIGHTDATA_PORT = process.env.BRIGHTDATA_PORT || "33335";
const BRIGHTDATA_USERNAME = process.env.BRIGHTDATA_USERNAME;
const BRIGHTDATA_PASSWORD = process.env.BRIGHTDATA_PASSWORD;
const SESSION_ID = "session_1";
 
(async () => {
  const browser = await chromium.launch({
    headless: true,
    proxy: {
      server: `http://${BRIGHTDATA_HOST}:${BRIGHTDATA_PORT}`,
      username: `${BRIGHTDATA_USERNAME}-session-${SESSION_ID}`,
      password: BRIGHTDATA_PASSWORD,
    },
  });
 
  const context = await browser.newContext({
    ignoreHTTPSErrors: true,
  });
 
  const page = await context.newPage();
  await page.goto("https://lumtest.com/myip.json", {
    waitUntil: "networkidle",
    timeout: 60000,
  });
 
  console.log(await page.textContent("pre"));
  await browser.close();
})();

これは Bright Data Docs の Playwright 連携例に沿った形です。
Residential / Unlocker 系で SSL エラーが出る場合、Docs では ignoreHTTPSErrors: true か証明書設定が案内されています。

複雑な操作は Scraping Browser へ切り替える

import { chromium } from "playwright";
 
const cdpUrl = process.env.BRIGHTDATA_CDP_URL;
 
(async () => {
  const browser = await chromium.connectOverCDP(cdpUrl);
  const context = await browser.newContext();
  const page = await context.newPage();
 
  await page.goto("https://example.com", { waitUntil: "networkidle" });
  console.log(await page.title());
 
  await context.close();
  await browser.close();
})();

こちらは Scraping Browser 接続の形で、静的なプロキシ統合より操作自由度が高い構成です。
どちらも Playwright の API は近いので、既存コードの大部分を保ったまま切り替えやすいのが利点です。

運用ポイント

まずは direct proxy で足りるかを確認し、ログインや複数ステップ操作が必要なページだけ Scraping Browser に上げるとコストを抑えやすいです。
セッションを維持したい場合は username に -session-<id> を付ける運用を使い、テストケースごとの状態を分離してください。
Playwright 側の失敗を全部「Bright Data の問題」と見なさず、TLS、セレクタ、待機条件、セッション維持のどこで落ちたかを分解して見てください。
地域差テストをするなら、対象国と zone の組み合わせをテストデータとして残し、再現条件をコード外に持つと運用しやすくなります。
Browser API / Scraping Browser は強力ですが重いので、単純な HTML 取得だけなら Unlocker や CLI のほうが速い場面もあります。