「JavaScriptのエラーを見逃してしまった・・・」
「Chrome DevToolsのConsoleのログを保存したい」
このような場合には、この記事の内容が参考になります。
この記事では、Seleniumによるコンソールログの取得方法を解説しています。
本記事の内容
- SeleniumによるJavaScriptのエラー検知
- Seleniumによるコンソールログの取得方法
それでは、上記に沿って解説していきます。
SeleniumによるJavaScriptのエラー検知
JavaScriptのエラーを見逃したことがありませんか?
「JSのエラーなんて絶対に気付くだろ」
このような強者もいるかもしれません。
では、CSSや画像の読み込みエラーはどうですか?
「ぐぬぬ」となった方には、この記事の内容が参考になるはずです。
結論から言うと、Seleniumでコンソールログを取得します。
そして、自動でチェックすることでエラーを検知しようということです。
そのためには、Seleniumについてのある程度の理解は必要となります。
Seleniumのインストールは、次の記事が参考になります。
情報としては古くなっていますが、考え方は変わっていません。
Selenium 4によるheadless(ヘッドレス)対応は、次の記事で説明しています。
とにかく、Selenium 4が動く環境を用意しましょう。
以上、SeleniumによるJavaScriptのエラー検知を説明しました。
次は、Seleniumによるコンソールログの取得方法を説明します。
Seleniumによるコンソールログの取得方法
まず、次のページにアクセスしてみてください。
そして、コンソールログを見ましょう。
このような嫌な感じの表示になっています。
これらをすべてPythonで検知できるのです。
そのコードは、以下となります。
from selenium import webdriver from selenium.webdriver.chrome import service as fs from selenium.webdriver.common.desired_capabilities import DesiredCapabilities # ブラウザのログの詳細レベルをすべて表示する設定を行う caps = DesiredCapabilities.CHROME caps['goog:loggingPrefs'] = {'browser': 'ALL'} # ChromeDriverのパスと対象のURLを指定 CHROMEDRIVER = "ChromeDriverのパス" URL = "エラー検知したいページのURL" # ChromeDriverのサービスを初期化し、ログの詳細レベルの設定を適用 chrome_service = fs.Service(executable_path=CHROMEDRIVER, desired_capabilities=caps) # Chromeのオプションを設定(ヘッドレスモードで新しいウィンドウを開く) options = webdriver.ChromeOptions() options.add_argument("--headless=new") # Chromeブラウザを起動し、設定したオプションとサービスを適用 driver = webdriver.Chrome(service=chrome_service, options=options) # ブラウザのウィンドウサイズを設定(スクリーンショットを取る際のサイズにも影響) driver.set_window_size(1024, 768) # 指定したURLにアクセス driver.get(URL) # ブラウザのコンソールログを取得し、それを出力 logs = driver.get_log("browser") for log in logs: print(log) # ブラウザを閉じる driver.quit()
上記で挙げたページを対象にした場合、コード実行時には次のように表示されます。
コンソールログの表示とほぼ同じです。
行数表示が、若干異なっています。
{'level': 'SEVERE', 'message': 'https://self-development.info/etc/html/nonexistent.css - Failed to load resource: the server responded with a status of 404 ()', 'source': 'network', 'timestamp': 1698316795095} {'level': 'SEVERE', 'message': 'https://self-development.info/etc/html/console_log.html 17:16 "This is a SEVERE level message."', 'source': 'console-api', 'timestamp': 1698316795096} {'level': 'WARNING', 'message': 'https://self-development.info/etc/html/console_log.html 20:16 "This is a WARNING level message."', 'source': 'console-api', 'timestamp': 1698316795096} {'level': 'INFO', 'message': 'https://self-development.info/etc/html/console_log.html 23:16 "This is an INFO level message."', 'source': 'console-api', 'timestamp': 1698316795096} {'level': 'INFO', 'message': 'https://self-development.info/etc/html/console_log.html 26:16 "This is a DEBUG level message."', 'source': 'console-api', 'timestamp': 1698316795096} {'level': 'SEVERE', 'message': 'https://self-development.info/etc/html/nonexistent.jpg - Failed to load resource: the server responded with a status of 404 ()', 'source': 'network', 'timestamp': 1698316795115}
ログレベルを「SEVERE」に絞れば、エラーだけを抽出できます。
以上、Seleniumによるコンソールログの取得方法を説明しました。