Seleniumブラウザ操作 – JavaScriptガイド

更新日：2025/03/12

Seleniumとは

Seleniumは、ブラウザを自動操作するためのオープンソースフレームワークです。テスト自動化、ウェブスクレイピング、ブラウザ操作の自動化などに利用されます。

Seleniumの基本アーキテクチャ JavaScriptアプリケーション Selenium WebDriver WebDriverサーバー (ChromeDriver等) ブラウザ ウェブページ Webサーバー コマンド HTTP ブラウザ制御 HTTP HTML/JS/CSS JavaScriptコードからSelenium WebDriverを通じてブラウザを操作し、 ウェブページの要素を検索・操作・情報取得を自動化します。

JavaScriptでのSelenium利用方法

Seleniumの基本的なワークフロー Step 1 ブラウザ起動 Step 2 URLアクセス Step 3 要素検索 Step 4 要素操作 Step 5 結果取得 Step 6 ブラウザ終了 // JavaScriptでのSelenium基本ワークフローの例 const { Builder, By, until } = require (‘selenium-webdriver’); async function exampleWorkflow() { // Step 1: ブラウザ起動 const driver = await new Builder().forBrowser(‘chrome’).build(); // Step 2: URLアクセス await driver.get(‘https://example.com’); …

環境設定

// 必要なパッケージをインストール
// npm install selenium-webdriver

// 基本的なセットアップ
const { Builder, By, Key, until } = require('selenium-webdriver');

async function example() {
  // ブラウザを起動（ChromeDriverが必要）
  const driver = await new Builder().forBrowser('chrome').build();
  
  try {
    // 処理を記述
  } finally {
    // ブラウザを閉じる
    await driver.quit();
  }
}

基本操作

ウェブページにアクセス

// ウェブサイトを開く
await driver.get('https://www.example.com');

要素の検索と操作

// 必要なパッケージをインストール
// npm install selenium-webdriver

// 基本的なセットアップ
const { Builder, By, Key, until } = require('selenium-webdriver');

async function example() {
  // ブラウザを起動（ChromeDriverが必要）
  const driver = await new Builder().forBrowser('chrome').build();
  
  try {
    // 処理を記述
  } finally {
    // ブラウザを閉じる
    await driver.quit();
  }
}
Seleniumの要素検索方法 HTML例 <div id= “container” > <input type= “text” id= “username” class= “form-input login-field” name= “user” /> <button id= “loginBtn” > ログイン </button> </div> JavaScriptでの要素検索例 // ID検索 await driver.findElement(By.id(‘username’)); // クラス検索 await driver.findElement(By.className(‘form-input’)); // 名前検索 await driver.findElement(By.name(‘user’)); // CSSセレクタ検索 await driver.findElement(By.css(‘#loginBtn’)); // XPath検索 await driver.findElement(By.xpath(‘//button’)); Seleniumでは複数の方法でHTML要素を特定できます。 最も信頼性の高い方法（IDなど）を優先し、状況に応じて適切な検索方法を選びましょう。

要素の操作

// クリック
await element.click();

// テキスト入力
await element.sendKeys('検索ワード');

// キー入力（Enterキーを押す）
await element.sendKeys(Key.RETURN);

// テキスト取得
const text = await element.getText();

// 属性値取得
const attributeValue = await element.getAttribute('href');

待機処理

// 明示的な待機（要素が見つかるまで最大10秒待機）
await driver.wait(until.elementLocated(By.id('result')), 10000);

// 要素が表示されるまで待機
await driver.wait(until.elementIsVisible(await driver.findElement(By.id('result'))), 10000);

// タイトルに特定の文字列が含まれるまで待機
await driver.wait(until.titleContains('結果ページ'), 10000);

JavaScript実行

// ブラウザ上でJavaScriptを実行
await driver.executeScript('return document.title;');

// スクロール処理
await driver.executeScript('window.scrollTo(0, document.body.scrollHeight);');

// 要素までスクロール
const element = await driver.findElement(By.id('target'));
await driver.executeScript('arguments[0].scrollIntoView(true);', element);

新規記事

すべてを見る
人気記事ランキング
ピックアップ記事
話題のキーワードから探す