ブラウザイベント

ブラウザイベントは、ユーザーの操作やブラウザの状態変化によって発生する「出来事」です。E2Eテストでは、これらのイベントをシミュレートします。

イベントとは？

Webページでユーザーが何か操作すると、イベントが発生します。

ボタンをクリック → clickイベント発生 → JavaScriptが反応 → 処理実行

主なブラウザイベント

マウスイベント

キーボードイベント

フォームイベント

ページイベント

イベントリスナー

イベントが発生したときに実行する処理を登録します。

JavaScriptでのイベントリスナー

// ボタンをクリックしたときの処理
const button = document.querySelector('#submit-btn');
button.addEventListener('click', () => {
  console.log('ボタンがクリックされました');
});

// 入力値が変わったときの処理
const input = document.querySelector('#email');
input.addEventListener('input', (event) => {
  console.log('入力値:', event.target.value);
});

// フォーム送信時の処理
const form = document.querySelector('#login-form');
form.addEventListener('submit', (event) => {
  event.preventDefault(); // デフォルト動作を防ぐ
  console.log('フォームが送信されました');
});

HTMLでのイベント指定

<!-- onclick属性（古い方法） -->
<button onclick="handleClick()">クリック</button>

<!-- より良い方法はJavaScriptでaddEventListener -->
<button id="btn">クリック</button>
<script>
  document.querySelector('#btn').addEventListener('click', handleClick);
</script>

主要イベントの詳細

clickイベント

ボタンやリンクをクリックしたときに発生します。

<button id="alert-btn">アラート表示</button>

document.querySelector('#alert-btn').addEventListener('click', () => {
  alert('クリックされました！');
});

inputイベント

テキストボックスなどに入力するたびに発生します。

<input type="text" id="search" placeholder="検索...">
<p id="result"></p>

document.querySelector('#search').addEventListener('input', (event) => {
  const value = event.target.value;
  document.querySelector('#result').textContent = `入力中: ${value}`;
});

submitイベント

フォームが送信されるときに発生します。

<form id="contact-form">
  <input type="text" name="name" required>
  <button type="submit">送信</button>
</form>

document.querySelector('#contact-form').addEventListener('submit', (event) => {
  event.preventDefault(); // ページリロードを防ぐ
  console.log('フォームデータを送信します');
  // ここでAjaxリクエストなどを実行
});

イベントバブリング

イベントは、子要素から親要素へと伝播します。

<div id="parent">
  <button id="child">クリック</button>
</div>

// 子要素のイベント
document.querySelector('#child').addEventListener('click', () => {
  console.log('子要素がクリックされた');
});

// 親要素のイベント
document.querySelector('#parent').addEventListener('click', () => {
  console.log('親要素がクリックされた');
});

// ボタンをクリックすると両方のイベントが発生：
// 1. 子要素がクリックされた
// 2. 親要素がクリックされた

イベントの伝播を止める

document.querySelector('#child').addEventListener('click', (event) => {
  event.stopPropagation(); // 親への伝播を止める
  console.log('子要素だけ');
});

Playwrightでのイベントシミュレート

Playwrightは、実際のユーザー操作をシミュレートしてイベントを発生させます。

クリックイベント

// ボタンをクリック
await page.click('button#submit');

// または
await page.locator('button#submit').click();

// ダブルクリック
await page.dblclick('button#submit');

// 右クリック
await page.locator('button#submit').click({ button: 'right' });

入力イベント

// テキスト入力（inputイベントが発生）
await page.fill('#email', 'user@example.com');

// 一文字ずつ入力（keydown/keyupイベントも発生）
await page.type('#email', 'user@example.com');

// Enter キーを押す
await page.press('#search', 'Enter');

フォーム送信イベント

// submitイベントを発生させる方法1: ボタンをクリック
await page.click('button[type="submit"]');

// 方法2: Enterキーを押す
await page.press('#email', 'Enter');

// フォームに直接submit
await page.locator('form').evaluate(form => form.submit());

その他のイベント

// ホバー（mouseenterイベント）
await page.hover('button#submit');

// フォーカス（focusイベント）
await page.focus('#email');

// スクロール
await page.locator('#bottom').scrollIntoViewIfNeeded();

// チェックボックス/ラジオボタン（changeイベント）
await page.check('input[type="checkbox"]');

// セレクトボックス（changeイベント）
await page.selectOption('select#country', 'jp');

イベント待機

動的なページでは、イベントの結果を待つ必要があります。

// ナビゲーション（loadイベント）を待つ
await page.click('a#next');
await page.waitForLoadState('load');

// DOM変更を待つ
await page.click('button#load-more');
await page.waitForSelector('.new-content');

// レスポンスを待つ
await page.click('button#submit');
await page.waitForResponse('**/api/submit');

// URLが変わるのを待つ
await page.click('a#dashboard');
await page.waitForURL('**/dashboard');

実践例

クリックとアラート確認

test('アラート表示', async ({ page }) => {
  await page.goto('/');

  // ダイアログイベントをリスナーで捕捉
  page.on('dialog', async dialog => {
    console.log(dialog.message()); // アラートのメッセージ
    await dialog.accept(); // OKボタンを押す
  });

  // ボタンをクリック（clickイベント → alertが表示される）
  await page.click('button#show-alert');
});

フォーム入力と送信

test('お問い合わせフォーム', async ({ page }) => {
  await page.goto('/contact');

  // inputイベント発生
  await page.fill('#name', '山田太郎');
  await page.fill('#email', 'yamada@example.com');
  await page.fill('#message', 'お問い合わせ内容');

  // changeイベント発生
  await page.selectOption('#category', 'support');

  // submitイベント発生
  await page.click('button[type="submit"]');

  // 送信後の確認
  await expect(page.locator('.success-message')).toBeVisible();
});

ホバーでツールチップ表示

test('ツールチップ表示', async ({ page }) => {
  await page.goto('/');

  // mouseenterイベント発生
  await page.hover('.info-icon');

  // ツールチップが表示される
  await expect(page.locator('.tooltip')).toBeVisible();

  // mouseleaveイベント発生（別の要素にホバー）
  await page.hover('body');

  // ツールチップが消える
  await expect(page.locator('.tooltip')).not.toBeVisible();
});

// クリックイベントの確認
document.querySelector('#btn').addEventListener('click', () => {
  console.log('clicked!');
});

まとめ

次のチャプターでは、検証ツールの開き方を学びます。