ヘッドレスモードは、その名の通り Firefox を実行する便利な方法です — UI コンポーネントが表示されない点を除いて、Firefox は通常通り実行されます。ウェブサーフィンにはあまり役立たないかもしれませんが、自動テストには非常に有効です。この記事では、ヘッドレス Firefox の実行について知るべきことをすべて提供します。
ヘッドレスモードを使用する
このセクションではヘッドレスモードの使用方法について説明します
基本的な使い方
-headless
フラグを含めることで、コマンドラインから Firefox をヘッドレスモードで実行できます。たとえば:
/path/to/firefox -headless
スクリーンショットを撮る
Firefox 57以降、-screenshot
フラグを使用してウェブサイトのスクリーンショットを撮ることができます。基本的な使い方は:
/path/to/firefox -headless -screenshot https://developer.mozilla.com
これにより、screenshot.png
というファイル名で800pxのビューポート幅を持つhttps://developer.mozilla.com
の全画面スクリーンショットが作成され、アクティブなディレクトリに保存されます。
暗黙的に -screenshot
を使用している場合、-headless
を省略することができます。
/path/to/firefox -screenshot https://developer.mozilla.com
上記のデフォルト値を上書きするために、次のフラグ/機能を使用できます。
-screenshot name url
— スクリーンショットの名前をカスタマイズするには、-screenshot
フラグとキャプチャするURLの間に含めて設定します。.jpg
、.bmp
などの他のウェブ対応画像フォーマットを指定することができます--window-size=x
— スクリーンショットを撮るときにカスタムビューポートの幅(完全な高さが維持されます)を設定します。 これの単一の引数バージョンは動作しないことに注意してください--window-size=x,y
— キャプチャのカスタムビューポートの幅と高さを設定します
たとえば、次のコマンドは、ビューポートの幅が800px、高さが1000pxのhttps://developer.mozilla.com
のスクリーンショットをtest.jpg
というファイル名で作成し、アクティブなディレクトリに保存します。
/path/to/firefox -screenshot test.jpg https://developer.mozilla.com --window-size=800,1000
ブラウザーサポート
ヘッドレス Firefox は Linux 上の Fx55 以上と Windows/Mac 上の Fx56 以上で動作します。
ヘッドレスモードで自動テストを実行する
ヘッドレス Firefox の最も便利な使い方は、自動テストの実行です。つまり、テストプロセスをより効率的にできます。
Node.js で Selenium
ここで、Node.js と selenium-webdriver
パッケージを使用して Selenium テストを作成します。このガイドでは、読者が Selenium と Webdriver、Node に精通しており、テスト環境をセットアップ済みであることを想定しています。そうでないなら、最初に Setting up Selenium in Node ガイドを読んでから戻ってきてください。
まず、システムに Node と selenium-webdriver
パッケージがインストールされていることを確かめてから、selenium-test.js
と呼ばれる新しいファイルを作成し、以下の手順に従ってテストコードを入力してください。
ノート: 代わりに、headless-examples repo をコピーできます。これはパッケージファイルも含んでいるので、npm install
を実行するだけで必要な依存パッケージをインストールできます。
-
コードを追加していきましょう、このファイル内で、
selenium-webdriver
メインモジュールとfirefox
サブモジュールのインポートから始めます:var webdriver = require('selenium-webdriver'), By = webdriver.By, until = webdriver.until; var firefox = require('selenium-webdriver/firefox');
-
次に、Firefox Nightly を表す新しい
binary
オブジェクトを生成し、ヘッドレスモードで実行するために-headless
引数を追加します:var binary = new firefox.Binary(firefox.Channel.NIGHTLY); binary.addArguments("-headless");
-
いよいよ Firefox のための新しいドライバーインスタンスを生成します。上記で作成したバイナリを使用してテストの実行を指定するオプションオブジェクトを含めるためには、
setFirefoxOptions()
を使用します。(このステップは Linux と Windows/Mac でヘッドレスモードがリリースされた後は不要です。しかし、Nightly 特有の機能としてテストしたい場合にはまだ役立ちます):var driver = new webdriver.Builder() .forBrowser('firefox') .setFirefoxOptions(new firefox.Options().setBinary(binary)) .build();
-
Google 検索ホームページ上で簡単なテストを実行する次のコードを追加します:
driver.get('https://www.google.com'); driver.findElement(By.name('q')).sendKeys('webdriver'); driver.sleep(1000).then(function() { driver.findElement(By.name('q')).sendKeys(webdriver.Key.TAB); }); driver.findElement(By.name('btnK')).click(); driver.sleep(2000).then(function() { driver.getTitle().then(function(title) { if(title === 'webdriver - Google Search') { console.log('Test passed'); } else { console.log('Test failed'); } }); }); driver.quit();
-
最後に、次のコマンドでテストを実行します:
node selenium-test
これでおしまい! 少し経つと、コンソール上に "Test passed" というメッセージが表示されます。
Myk Melez の Headless Firefox in Node.js with selenium-webdriver には、追加の便利な tips やヘッドレスモードで Node.js Selenium テストを実行するトリックが含まれています。
Java で Selenium
Note: これらの手順を書いてくれてありがとう、nicholas dipiazzaに感謝します!
このガイドでは、Setting up Selenium in Node ガイドで説明したように、マシンに Geckodriver が既にあること、および Gradle プロジェクトをサポートする IDE があることを前提としています。
-
headlessfirefox-gradle.zip アーカイブ(ここのソースを参照)をダウンロードし、解凍してheadlessfirefoxフォルダをIDEにグラデルプロジェクトとしてインポートします
-
必要に応じて
build.gradle
ファイルを編集して、selenium をそれ以降のバージョンに設定します。執筆時点では 3.5.3 を使用しましたgroup 'com.mozilla' version '1.0' apply plugin: 'java' sourceCompatibility = 1.8 repositories { mavenCentral() } dependencies { compile('org.seleniumhq.selenium:selenium-api:3.5.3') compile('org.seleniumhq.selenium:selenium-remote-driver:3.5.3') compile('org.seleniumhq.selenium:selenium-server:3.5.3') testCompile group: 'junit', name: 'junit', version: '4.12' }
-
HeadlessFirefoxSeleniumExample.javaファイルの
webdriver.gecko.driver
プロパティをgeckodriverをインストールしたパスと等しくなるように編集します(下の15行目を参照)package com.mozilla.example; import org.openqa.selenium.By; import org.openqa.selenium.WebElement; import org.openqa.selenium.firefox.FirefoxBinary; import org.openqa.selenium.firefox.FirefoxDriver; import org.openqa.selenium.firefox.FirefoxOptions; import java.util.concurrent.TimeUnit; public class HeadlessFirefoxSeleniumExample { public static void main(String [] args) { FirefoxBinary firefoxBinary = new FirefoxBinary(); firefoxBinary.addCommandLineOptions("--headless"); System.setProperty("webdriver.gecko.driver", "/opt/geckodriver"); FirefoxOptions firefoxOptions = new FirefoxOptions(); firefoxOptions.setBinary(firefoxBinary); FirefoxDriver driver = new FirefoxDriver(firefoxOptions); try { driver.get("http://www.google.com"); driver.manage().timeouts().implicitlyWait(4, TimeUnit.SECONDS); WebElement queryBox = driver.findElement(By.name("q")); queryBox.sendKeys("headless firefox"); WebElement searchBtn = driver.findElement(By.name("btnK")); searchBtn.click(); WebElement iresDiv = driver.findElement(By.id("ires")); iresDiv.findElements(By.tagName("a")).get(0).click(); System.out.println(driver.getPageSource()); } finally { driver.quit(); } } }
-
Javaクラスを実行すると、このページのHTMLコンテンツがコンソール/端末に表示されます
Python で Selenium
このガイドでは、Setting up Selenium in Nodeで説明したように、マシンにgeckodriverが既にあることを前提としています。
-
SeleniumのPythonクライアントの最新バージョンをインストールします
-
geckodriverをインストールした場所にパスを通すためには、11行目の
executable_path
を設定し、次のように編集しますfrom selenium.webdriver import Firefox from selenium.webdriver.common.by import By from selenium.webdriver.common.keys import Keys from selenium.webdriver.firefox.options import Options from selenium.webdriver.support import expected_conditions as expected from selenium.webdriver.support.wait import WebDriverWait if __name__ == "__main__": options = Options() options.add_argument('-headless') driver = Firefox(executable_path='geckodriver', firefox_options=options) wait = WebDriverWait(driver, timeout=10) driver.get('http://www.google.com') wait.until(expected.visibility_of_element_located((By.NAME, 'q'))).send_keys('headless firefox' + Keys.ENTER) wait.until(expected.visibility_of_element_located((By.CSS_SELECTOR, '#ires a'))).click() print(driver.page_source) driver.quit()
-
Pythonスクリプトを実行すると、このページのHTMLコンテンツがコンソール/端末に表示されます
その他のテスト方法
- Slimerjs は Linux 上で Firefox をサポートしており、Mac と Windowsのサポートは間もなく公開されます。詳細については、Brendan Dahl の Headless SlimerJS with Firefox を参照してください
- TestCafe (v.0.18.0 以降) は、デフォルトでヘッドレス Firefox でのテストもサポートしています。詳細についてはドキュメントを参照してください。
さらに、環境変数を設定できる限り、他の一般的なテストアプリで書かれた自動テストを実行するために、ヘッドレスFirefoxを使用することができます。
トラブルシューティングとヘルプ
ヘッドレスモードの実行でトラブルがあっても心配しないでください — ここで助けます。このセクションでは、追加の QA を載せることを想定しています。
- Linux では、ヘッドレスモードで使用しないにもかかわらず、システム上であるライブラリが要求されます。 — Firefox がそれらにリンクしているからです。詳細と修正に向けた進捗は バグ 1372998 を見てください。
エンジニアに質問したいなら、Mozilla IRC の #headless
チャネルに行くのがベストです。バグを見つけた場合は、Mozilla Bugzilla で報告してください。
関連項目
- Using Selenium with Headless Firefox (on Windows) by Andre Perunicic (Python を使用)
- Headless Firefox in Node.js with selenium-webdriver by Myk Melez
- Headless SlimerJS with Firefox by Brendan Dahl
- Using Selenium with Headless Firefox on Travis-CI by Josef Rousek