ヘッドレスモード

ヘッドレスモードは、その名の通り Firefox を実行する便利な方法です — UI コンポーネントが表示されない点を除いて、Firefox は通常通り実行されます。ウェブサーフィンにはあまり役立たないかもしれませんが、自動テストには非常に有効です。この記事では、ヘッドレス Firefox の実行について知るべきことをすべて提供します。

ヘッドレスモードを使用する

-headless フラグを含めることで、コマンドラインから Firefox をヘッドレスモードで実行できます。たとえば:

/path/to/firefox -headless

現時点では、シンプルになっていますが、今後はさらにオプションを追加します。

たとえば、ヘッドレス Firefox を使用して簡単にスクリーンショットを撮れる -screenshot オプションを開発中です。こちらの進捗は バグ 1378010 を見てください。

ブラウザーサポート

ヘッドレス 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 と呼ばれる新しいファイルを作成し、以下の手順に従ってテストコードを入力してください。

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 テストを実行するトリックが含まれています。

Selenium in Java

This guide assumes that you already have Geckodriver on your machine, as explained in our Setting up Selenium in Node guide, and that you have an IDE set up that supports Gradle projects.

1. Download our headlessfirefox-gradle.zip archive (see the source here), extract it, and import the headlessfirefox folder into your IDE as a gradle project.

2. Edit the build.gradle file to set selenium to a later version if needed. At the time of writing, we used 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. Edit the webdriver.gecko.driver property in the HeadlessFirefoxSeleniumExample.java file to equal the path where you installed geckodriver (see line 15 below).

   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. Run the java class and you should see the HTML content of this page printed in your console/terminal.

Other testing solutions

Slimerjs has Firefox support built in on Linux, with Mac and Windows support coming soon. See Headless SlimerJS with Firefox by Brendan Dahl for more details.

In addition, you will be able to use headless Firefox to run automated tests written in most other popular testing apps, as long as they allow you to set environment variables.

トラブルシューティングとヘルプ

ヘッドレスモードの実行でトラブルがあっても心配しないでください — ここで助けます。このセクションでは、追加の QA を載せることを想定しています。

• Linux では、ヘッドレスモードで使用しないにもかかわらず、システム上であるライブラリが要求されます。 — Firefox がそれらにリンクしているからです。詳細と修正に向けた進捗は バグ 1372998 を見てください。

エンジニアに質問したいなら、Mozilla IRC の #headless チャネルに行くのがベストです。バグを見つけた場合は、Mozilla Bugzilla で報告してください。

関連項目

• Using Selenium with Headless Firefox (on Windows) by Andre Perunicic (uses 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