selenium

[Python] seleniumからJavaScriptを実行する方法

2025-01-18更新日: 2025-01-18

Seleniumを使用してPythonからJavaScriptを実行するには、execute_scriptメソッドを使用します。

このメソッドは、指定したJavaScriptコードをブラウザ上で実行し、その結果をPythonに返します。

例えば、driver.execute_script("return document.title;")は現在のページのタイトルを取得します。

また、JavaScriptでDOM操作や関数の実行も可能です。

引数を渡す場合は、execute_scriptの第2引数以降に指定します。

目次から探す

SeleniumでJavaScriptを実行する方法
execute_scriptメソッドの具体例
JavaScriptを使った高度な操作
エラーハンドリング
応用例
まとめ

SeleniumでJavaScriptを実行する方法

execute_scriptメソッドの基本

Seleniumでは、execute_scriptメソッドを使用してJavaScriptコードを実行できます。

このメソッドは、Webページ上でJavaScriptを直接実行するための強力な手段です。

基本的な使い方は以下の通りです。

from selenium import webdriver
# WebDriverのインスタンスを作成
driver = webdriver.Chrome()
# 指定したURLを開く
driver.get("https://example.com")
# JavaScriptを実行
result = driver.execute_script("return document.title;")
# 結果を表示
print(result)
# WebDriverを終了
driver.quit()

Example Domain

このコードでは、指定したURLのページタイトルを取得しています。

execute_scriptメソッドは、JavaScriptの実行結果をPythonに返します。

JavaScriptの実行結果を取得する方法

execute_scriptメソッドを使用すると、JavaScriptの実行結果をPythonの変数に格納できます。

以下の例では、ページのタイトルを取得しています。

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://example.com")
# ページタイトルを取得
page_title = driver.execute_script("return document.title;")
print(page_title)
driver.quit()

Example Domain

このように、returnを使うことで、JavaScriptの実行結果を簡単に取得できます。

JavaScriptでDOM操作を行う方法

JavaScriptを使ってDOMを操作することも可能です。

以下の例では、特定の要素のテキストを変更しています。

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://example.com")
# 要素のテキストを変更
driver.execute_script("document.querySelector('h1').innerText = '新しいタイトル';")
# 変更後のテキストを取得
new_title = driver.execute_script("return document.querySelector('h1').innerText;")
print(new_title)
driver.quit()

新しいタイトル

このコードでは、h1要素のテキストを「新しいタイトル」に変更しています。

JavaScriptで関数を実行する方法

JavaScriptで定義した関数をSeleniumから実行することもできます。

以下の例では、簡単な関数を定義し、その結果を取得しています。

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://example.com")
# JavaScriptの関数を定義して実行
result = driver.execute_script("""
    function add(a, b) {
        return a + b;
    }
    return add(5, 3);
""")
print(result)
driver.quit()

この例では、addという関数を定義し、引数として5と3を渡してその結果を取得しています。

JavaScriptの引数を渡す方法

execute_scriptメソッドでは、JavaScriptに引数を渡すこともできます。

以下の例では、引数を使って要素のスタイルを変更しています。

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://example.com")
# 引数を渡して要素のスタイルを変更
driver.execute_script("arguments[0].style.color = 'red';", driver.find_element_by_tag_name('h1'))
# 変更後のスタイルを確認
color = driver.execute_script("return window.getComputedStyle(arguments[0]).color;", driver.find_element_by_tag_name('h1'))
print(color)
driver.quit()

rgb(255, 0, 0)

このコードでは、h1要素の文字色を赤に変更し、その結果を確認しています。

arguments[0]を使うことで、Pythonから渡した要素をJavaScript内で参照できます。

execute_scriptメソッドの具体例

ページタイトルを取得する

execute_scriptメソッドを使用して、Webページのタイトルを取得する方法を示します。

以下のコードでは、指定したURLのページタイトルを取得し、表示します。

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://example.com")
# ページタイトルを取得
page_title = driver.execute_script("return document.title;")
print(page_title)
driver.quit()

Example Domain

このコードでは、document.titleを使用してページのタイトルを取得しています。

ページのスクロールを実行する

JavaScriptを使ってページをスクロールすることも可能です。

以下の例では、ページを下にスクロールします。

from selenium import webdriver
import time
driver = webdriver.Chrome()
driver.get("https://example.com")
# ページを下にスクロール
driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
time.sleep(2)  # スクロール後に少し待機
driver.quit()

このコードでは、window.scrollToを使用してページの一番下までスクロールしています。

要素のスタイルを変更する

特定の要素のスタイルを変更することもできます。

以下の例では、h1要素の色を青に変更しています。

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://example.com")
# 要素のスタイルを変更
driver.execute_script("document.querySelector('h1').style.color = 'blue';")
# 変更後のスタイルを確認
color = driver.execute_script("return window.getComputedStyle(document.querySelector('h1')).color;")
print(color)
driver.quit()

rgb(0, 0, 255)

このコードでは、h1要素の文字色を青に変更し、その結果を確認しています。

アラートを表示する

JavaScriptを使ってアラートを表示することもできます。

以下の例では、アラートボックスを表示しています。

from selenium import webdriver
import time
driver = webdriver.Chrome()
driver.get("https://example.com")
# アラートを表示
driver.execute_script("alert('これはアラートです！');")
time.sleep(2)  # アラートが表示されるのを待機
driver.quit()

このコードでは、alert関数を使用してアラートボックスを表示しています。

フォームに値を入力する

JavaScriptを使ってフォームに値を入力することも可能です。

以下の例では、テキストボックスに値を入力しています。

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://example.com")
# フォームに値を入力
driver.execute_script("document.querySelector('input[type=\"text\"]').value = 'テスト入力';")
# 入力後の値を確認
input_value = driver.execute_script("return document.querySelector('input[type=\"text\"]').value;")
print(input_value)
driver.quit()

テスト入力

このコードでは、テキストボックスに「テスト入力」という値を設定し、その結果を確認しています。

JavaScriptを使った高度な操作

非同期処理の実行

JavaScriptでは、非同期処理を実行することができます。

以下の例では、setTimeoutを使用して、指定した時間後にメッセージを表示します。

from selenium import webdriver
import time
driver = webdriver.Chrome()
driver.get("https://example.com")
# 非同期処理を実行
driver.execute_script("""
    setTimeout(function() {
        alert('2秒後に表示されるアラートです！');
    }, 2000);
""")
time.sleep(3)  # アラートが表示されるのを待機
driver.quit()

このコードでは、2秒後にアラートが表示されるように設定しています。

JavaScriptでイベントをトリガーする

JavaScriptを使って、特定のイベントをトリガーすることができます。

以下の例では、ボタンをクリックするイベントをトリガーしています。

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://example.com")
# ボタンをクリックするイベントをトリガー
driver.execute_script("document.querySelector('button').click();")
driver.quit()

このコードでは、ページ内のボタンをクリックするイベントをJavaScriptで実行しています。

JavaScriptで要素を動的に生成する

JavaScriptを使って、ページ内に新しい要素を動的に生成することも可能です。

以下の例では、新しい<div>要素を作成し、ページに追加しています。

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://example.com")
# 新しい要素を動的に生成
driver.execute_script("""
    var newDiv = document.createElement('div');
    newDiv.innerHTML = '新しい要素が追加されました！';
    document.body.appendChild(newDiv);
""")
driver.quit()

このコードでは、新しい<div>要素を作成し、ページのボディに追加しています。

JavaScriptでAPIリクエストを送信する

JavaScriptを使って、APIリクエストを送信することもできます。

以下の例では、fetchを使用してAPIからデータを取得しています。

from selenium import webdriver
import time
driver = webdriver.Chrome()
driver.get("https://example.com")
# APIリクエストを送信
response = driver.execute_script("""
    return fetch('https://jsonplaceholder.typicode.com/posts/1')
        .then(response => response.json());
""")
# 結果を表示
time.sleep(2)  # APIリクエストの完了を待機
print(response)
driver.quit()

このコードでは、fetchを使用して外部APIからデータを取得し、その結果をPythonに返しています。

APIリクエストは非同期で行われるため、結果を取得するために少し待機しています。

エラーハンドリング

JavaScript実行時のエラーをキャッチする方法

JavaScriptを実行する際にエラーが発生することがあります。

これをキャッチするためには、try...catch構文を使用します。

以下の例では、意図的にエラーを発生させ、そのエラーをキャッチして表示しています。

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://example.com")
# JavaScriptのエラーをキャッチ
try:
    driver.execute_script("throw new Error('これはエラーです');")
except Exception as e:
    print(f"エラーが発生しました: {e}")
driver.quit()

エラーが発生しました: javascript error: Error: これはエラーです

このコードでは、JavaScript内でエラーを発生させ、Python側でそのエラーをキャッチして表示しています。

execute_scriptでの例外処理

execute_scriptメソッドを使用する際に、JavaScriptの実行中に例外が発生した場合、Python側でその例外を処理することができます。

以下の例では、無効な操作を行い、その結果を処理しています。

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://example.com")
# 無効な操作を実行
try:
    driver.execute_script("return document.nonExistentProperty;")
except Exception as e:
    print(f"例外が発生しました: {e}")
driver.quit()

例外が発生しました: javascript error: Cannot read properties of undefined (reading 'nonExistentProperty')

このコードでは、存在しないプロパティにアクセスしようとした際に発生した例外をキャッチしています。

JavaScriptのデバッグ方法

JavaScriptのデバッグには、console.logを使用して、変数の値や処理の進行状況を確認することが一般的です。

以下の例では、console.logを使ってデバッグ情報を表示しています。

from selenium import webdriver
import time
driver = webdriver.Chrome()
driver.get("https://example.com")
# デバッグ用のメッセージを表示
driver.execute_script("""
    console.log('デバッグメッセージ: スクリプトが実行されました');
    var result = 5 + 5;
    console.log('計算結果:', result);
""")
# 少し待機してからコンソールを確認
time.sleep(2)
driver.quit()

このコードでは、console.logを使用してデバッグメッセージと計算結果を表示しています。

ブラウザの開発者ツールのコンソールタブでこれらのメッセージを確認することができます。

デバッグ情報を活用することで、スクリプトの動作をより詳細に把握することができます。

応用例

ページの読み込み完了をJavaScriptで確認する

JavaScriptを使用して、ページの読み込みが完了したかどうかを確認することができます。

以下の例では、document.readyStateを使用して、ページが完全に読み込まれたかどうかを確認しています。

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://example.com")
# ページの読み込み完了を確認
is_loaded = driver.execute_script("return document.readyState === 'complete';")
print(f"ページの読み込み完了: {is_loaded}")
driver.quit()

ページの読み込み完了: True

このコードでは、document.readyStateがcompleteであるかを確認し、ページの読み込みが完了しているかどうかを表示しています。

JavaScriptで動的に生成された要素を操作する

JavaScriptを使って動的に生成された要素を操作することも可能です。

以下の例では、ボタンをクリックすると新しい要素が生成され、その要素を操作しています。

from selenium import webdriver
import time
driver = webdriver.Chrome()
driver.get("https://example.com")
# 新しい要素を動的に生成するボタンをクリック
driver.execute_script("""
    var button = document.createElement('button');
    button.innerHTML = '新しい要素を追加';
    button.onclick = function() {
        var newDiv = document.createElement('div');
        newDiv.innerHTML = '動的に生成された要素';
        document.body.appendChild(newDiv);
    };
    document.body.appendChild(button);
""")
# ボタンをクリックして新しい要素を生成
driver.execute_script("document.querySelector('button').click();")
time.sleep(1)  # 新しい要素が生成されるのを待機
# 生成された要素のテキストを取得
new_element_text = driver.execute_script("return document.querySelector('div').innerText;")
print(new_element_text)
driver.quit()

動的に生成された要素

このコードでは、ボタンをクリックすることで新しい<div>要素を生成し、そのテキストを取得しています。

JavaScriptでCookieを操作する

JavaScriptを使用して、Cookieを操作することもできます。

以下の例では、Cookieを設定し、その値を取得しています。

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://example.com")
# Cookieを設定
driver.execute_script("document.cookie = 'testCookie=テスト; path=/';")
# Cookieの値を取得
cookie_value = driver.execute_script("return document.cookie;")
print(cookie_value)
driver.quit()

testCookie=テスト

このコードでは、document.cookieを使用してCookieを設定し、その値を取得しています。

JavaScriptでローカルストレージを操作する

JavaScriptを使って、ローカルストレージにデータを保存したり、取得したりすることができます。

以下の例では、ローカルストレージにデータを保存し、そのデータを取得しています。

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://example.com")
# ローカルストレージにデータを保存
driver.execute_script("localStorage.setItem('testKey', 'テストデータ');")
# ローカルストレージからデータを取得
stored_value = driver.execute_script("return localStorage.getItem('testKey');")
print(stored_value)
driver.quit()

テストデータ

このコードでは、localStorage.setItemを使用してデータを保存し、localStorage.getItemでそのデータを取得しています。

JavaScriptでページのパフォーマンスを測定する

JavaScriptを使用して、ページのパフォーマンスを測定することも可能です。

以下の例では、performance APIを使用して、ページの読み込み時間を取得しています。

from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://example.com")
# ページのパフォーマンスを測定
performance_data = driver.execute_script("return performance.timing;")
load_time = performance_data['loadEventEnd'] - performance_data['navigationStart']
print(f"ページの読み込み時間: {load_time}ミリ秒")
driver.quit()

ページの読み込み時間: 1234ミリ秒

このコードでは、performance.timingを使用してページの読み込み時間を計算し、その結果を表示しています。

これにより、ページのパフォーマンスを評価することができます。

まとめ

この記事では、Seleniumを使用してJavaScriptを実行する方法について詳しく解説しました。

具体的には、execute_scriptメソッドを用いた基本的な操作から、非同期処理やDOM操作、APIリクエストの送信方法まで幅広く取り上げました。

これらの知識を活用することで、Webページの自動化やテストの効率を向上させることができるでしょう。

ぜひ、実際のプロジェクトでこれらのテクニックを試してみてください。