実戦ケース：自動ログインと Cookie 注入

この章では、そのまま業務に流用できるテンプレートとして、自動ログインと既存 Cookie の注入方法を紹介します。

ケース 1：アカウント情報の自動入力とログイン

// ... (接続コードなどは省略)
const page = await browser.newPage();
await page.goto('https://example.com/login');

// 1. ユーザー名入力欄が表示されるまで待機
await page.waitForSelector('#username');
// 2. 人間らしい速度（delay）で入力をシミュレート
await page.type('#username', 'mbbrowser_user', { delay: 50 });
// 3. パスワードを入力
await page.type('#password', 'your_password', { delay: 50 });
// 4. ログインボタンをクリック
await page.click('#login-btn');

// 5. ログイン成功の兆候（トップページへの遷移など）を待機
await page.waitForNavigation();
console.log('ログイン成功！');

ケース 2：コードによる Cookie 注入（ログインのバイパス）

Mbbrowser 環境では、コードから直接 Cookie を注入することで、ログイン画面を介さずに対象ページへアクセスすることが可能です。

// Cookie 配列の準備
const cookies = [
  {
    name: 'session_id',
    value: 'abc123456789',
    domain: '.example.com'
  },
  {
    name: 'user_auth',
    value: 'true',
    domain: '.example.com'
  }
];

// 1. ページにアクセスする前に、Cookie をセットする
await page.setCookie(...cookies);

// 2. この状態でページにアクセスすると、ログイン済みの状態で表示されます
await page.goto('https://example.com/dashboard');

ヒント：「セレクタ」の見つけ方

コード内の #username や #password は「セレクタ」と呼ばれます。

1. ブラウザ上で、操作したい要素（ボタンや入力欄）を右クリック -> 検証します。
2. 表示された HTML コード上で右クリック -> Copy -> Copy selectorを選択します。
3. それをスクリプト内に貼り付けるだけです！

---

IMPORTANT

Mbbrowser の豆知識: 各環境（Session）は Cookie を自動的に保存します。一度スクリプトでログインに成功すれば、次回の起動（コード・手動問わず）時にもログイン状態が維持されます。これが「環境の永続化」による大きな利点です。