ヘッドレスモード

ヘッドレスモードは、その名の通り 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-webdriver パッケージを使用して Selenium テストを作成します。このガイドでは、読者が Selenium と Webdriver、Node に精通しており、テスト環境をセットアップ済みであることを想定しています。そうでないなら、最初に Setting up Selenium in Node ガイドを読んでから戻ってきてください。

まず、システムに Node と selenium-webdriver パッケージがインストールされていることを確かめてから、selenium-test.js と呼ばれる新しいファイルを作成し、以下の手順に従ってテストコードを入力してください。

1. コードを追加していきましょう、このファイル内で、selenium-webdriver メインモジュールと firefox サブモジュールのインポートから始めます:

   var webdriver = require('selenium-webdriver'),
       By = webdriver.By,
       until = webdriver.until;
   
   var firefox = require('selenium-webdriver/firefox');

2. 次に、Firefox Nightly を表す新しい binary オブジェクトを生成し、ヘッドレスモードで実行するために -headless 引数を追加します:

   var binary = new firefox.Binary(firefox.Channel.NIGHTLY);
   binary.addArguments("-headless");

3. いよいよ Firefox のための新しいドライバーインスタンスを生成します。上記で作成したバイナリを使用してテストの実行を指定するオプションオブジェクトを含めるためには、setFirefoxOptions() を使用します。(このステップは Linux と Windows/Mac でヘッドレスモードがリリースされた後は不要です。しかし、Nightly 特有の機能としてテストしたい場合にはまだ役立ちます):

   var driver = new webdriver.Builder()
       .forBrowser('firefox')
       .setFirefoxOptions(new firefox.Options().setBinary(binary))
       .build();

4. 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();

5. 最後に、次のコマンドでテストを実行します:

   node selenium-test

これでおしまい! 少し経つと、コンソール上に "Test passed" というメッセージが表示されます。

Myk Melez の Headless Firefox in Node.js with selenium-webdriver には、追加の便利な tips やヘッドレスモードで Node.js Selenium テストを実行するトリックが含まれています。

このガイドでは、Setting up Selenium in Node ガイドで説明したように、マシンに Geckodriver が既にあること、および Gradle プロジェクトをサポートする IDE があることを前提としています。

1. headlessfirefox-gradle.zip アーカイブ（ここのソースを参照）をダウンロードし、解凍してheadlessfirefoxフォルダをIDEにグラデルプロジェクトとしてインポートします

2. 必要に応じて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'
   }

3. 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();
      }
    }
   }

4. Javaクラスを実行すると、このページのHTMLコンテンツがコンソール/端末に表示されます

このガイドでは、Setting up Selenium in Nodeで説明したように、マシンにgeckodriverが既にあることを前提としています。

1. SeleniumのPythonクライアントの最新バージョンをインストールします

2. 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()

3. 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