From a065e04d529da1d847b5062a12c46d916408bf32 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 21:46:22 -0500 Subject: update based on https://github.com/mdn/yari/issues/2028 --- files/ja/mozilla/firefox/headless_mode/index.html | 267 ---------------------- 1 file changed, 267 deletions(-) delete mode 100644 files/ja/mozilla/firefox/headless_mode/index.html (limited to 'files/ja/mozilla/firefox/headless_mode/index.html') diff --git a/files/ja/mozilla/firefox/headless_mode/index.html b/files/ja/mozilla/firefox/headless_mode/index.html deleted file mode 100644 index 88e2da5052..0000000000 --- a/files/ja/mozilla/firefox/headless_mode/index.html +++ /dev/null @@ -1,267 +0,0 @@ ---- -title: ヘッドレスモード -slug: Mozilla/Firefox/Headless_mode -tags: - - Automation - - Firefox - - Mozilla - - QA - - Testing - - headless - - headless mode - - node.js -translation_of: Mozilla/Firefox/Headless_mode ---- -

ヘッドレスモードは、その名の通り 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
- -

上記のデフォルト値を上書きするために、次のフラグ/機能を使用できます。

- - - -

たとえば、次のコマンドは、ビューポートの幅が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 を実行するだけで必要な依存パッケージをインストールできます。

-
- -
    -
  1. -

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

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

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

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

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

    - - 
    var driver = new webdriver.Builder()
-    .forBrowser('firefox')
-    .setFirefoxOptions(new firefox.Options().setBinary(binary))
-    .build();
    -
    4. -
  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. -
  5. -

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

    - - 
    node selenium-test
    -
    6. -
- -

これでおしまい! 少し経つと、コンソール上に "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 があることを前提としています。

- -
    -
  1. -

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

    -
    2. -
  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. -
  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. -
  4. -

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

    -
    5. -
- -

Python で Selenium

- -

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

- -
    -
  1. -

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

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

    Pythonスクリプトを実行すると、このページのHTMLコンテンツがコンソール/端末に表示されます

    -
    4. -
- -

その他のテスト方法

- - - -

さらに、環境変数を設定できる限り、他の一般的なテストアプリで書かれた自動テストを実行するために、ヘッドレスFirefoxを使用することができます。

- -

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

- -

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

- - - -

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

- -

関連項目

- - -- cgit v1.2.3-54-g00ecf