diff options
Diffstat (limited to 'files/ja/mozilla/firefox/headless_mode/index.html')
| -rw-r--r-- | files/ja/mozilla/firefox/headless_mode/index.html | 267 |
1 files changed, 267 insertions, 0 deletions
diff --git a/files/ja/mozilla/firefox/headless_mode/index.html b/files/ja/mozilla/firefox/headless_mode/index.html new file mode 100644 index 0000000000..88e2da5052 --- /dev/null +++ b/files/ja/mozilla/firefox/headless_mode/index.html @@ -0,0 +1,267 @@ +--- +title: ヘッドレスモード +slug: Mozilla/Firefox/Headless_mode +tags: + - Automation + - Firefox + - Mozilla + - QA + - Testing + - headless + - headless mode + - node.js +translation_of: Mozilla/Firefox/Headless_mode +--- +<p class="summary">ヘッドレスモードは、その名の通り Firefox を実行する便利な方法です — UI コンポーネントが表示されない点を除いて、Firefox は通常通り実行されます。ウェブサーフィンにはあまり役立たないかもしれませんが、自動テストには非常に有効です。この記事では、ヘッドレス Firefox の実行について知るべきことをすべて提供します。</p> + +<h2 id="ヘッドレスモードを使用する">ヘッドレスモードを使用する</h2> + +<p>このセクションではヘッドレスモードの使用方法について説明します</p> + +<h3 id="基本的な使い方">基本的な使い方</h3> + +<p><code>-headless</code> フラグを含めることで、コマンドラインから Firefox をヘッドレスモードで実行できます。たとえば:</p> + +<pre class="brush: bash">/path/to/firefox -headless</pre> + +<h3 id="スクリーンショットを撮る">スクリーンショットを撮る</h3> + +<p>Firefox 57以降、<code>-screenshot</code>フラグを使用してウェブサイトのスクリーンショットを撮ることができます。基本的な使い方は：</p> + +<pre class="brush: bash line-numbers language-bash"><code class="language-bash">/path/to/firefox -headless -screenshot https://developer.mozilla.com</code></pre> + +<p>これにより、<code>screenshot.png</code>というファイル名で800pxのビューポート幅を持つ<code>https://developer.mozilla.com</code>の全画面スクリーンショットが作成され、アクティブなディレクトリに保存されます。</p> + +<p>暗黙的に <code>-screenshot</code> を使用している場合、<code>-headless</code>を省略することができます。</p> + +<pre class="brush: bash line-numbers language-bash"><code class="language-bash">/path/to/firefox -screenshot https://developer.mozilla.com</code></pre> + +<p>上記のデフォルト値を上書きするために、次のフラグ/機能を使用できます。</p> + +<ul> + <li><code>-screenshot name url</code> — スクリーンショットの名前をカスタマイズするには、<code>-screenshot</code>フラグとキャプチャするURLの間に含めて設定します。<code>.jpg</code>、<code>.bmp</code>などの他のウェブ対応画像フォーマットを指定することができます</li> + <li><code>--window-size=x</code> — スクリーンショットを撮るときにカスタムビューポートの幅（完全な高さが維持されます）を設定します。 これの単一の引数バージョンは動作しないことに注意してください</li> + <li><code>--window-size=x,y</code> — キャプチャのカスタムビューポートの幅と高さを設定します</li> +</ul> + +<p>たとえば、次のコマンドは、ビューポートの幅が800px、高さが1000pxの<code>https://developer.mozilla.com</code>のスクリーンショットを<code>test.jpg</code>というファイル名で作成し、アクティブなディレクトリに保存します。</p> + +<pre class="brush: bash line-numbers language-bash"><code class="language-bash">/path/to/firefox -screenshot test.jpg https://developer.mozilla.com --window-size=800,1000</code></pre> + +<p> </p> + +<h3 id="ブラウザーサポート">ブラウザーサポート</h3> + +<p>ヘッドレス Firefox は Linux 上の Fx55 以上と Windows/Mac 上の Fx56 以上で動作します。</p> + +<h2 id="ヘッドレスモードで自動テストを実行する">ヘッドレスモードで自動テストを実行する</h2> + +<p>ヘッドレス Firefox の最も便利な使い方は、自動テストの実行です。つまり、テストプロセスをより効率的にできます。</p> + +<h3 id="Node.js_で_Selenium">Node.js で Selenium</h3> + +<p>ここで、<a href="https://nodejs.org/">Node.js</a> と <code><a href="https://www.npmjs.com/package/selenium-webdriver">selenium-webdriver</a></code> パッケージを使用して <a href="http://www.seleniumhq.org/">Selenium</a> テストを作成します。このガイドでは、読者が Selenium と Webdriver、Node に精通しており、テスト環境をセットアップ済みであることを想定しています。そうでないなら、最初に <a href="https://developer.mozilla.org/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment#Setting_up_Selenium_in_Node">Setting up Selenium in Node</a> ガイドを読んでから戻ってきてください。</p> + +<p>まず、システムに Node と <code>selenium-webdriver</code> パッケージがインストールされていることを確かめてから、<code>selenium-test.js</code> と呼ばれる新しいファイルを作成し、以下の手順に従ってテストコードを入力してください。</p> + +<div class="note"> +<p><strong>ノート</strong>: 代わりに、<a href="https://github.com/mdn/headless-examples">headless-examples repo</a> をコピーできます。これはパッケージファイルも含んでいるので、<code>npm install</code> を実行するだけで必要な依存パッケージをインストールできます。</p> +</div> + +<ol> + <li> + <p>コードを追加していきましょう、このファイル内で、<code>selenium-webdriver</code> メインモジュールと <code>firefox</code> サブモジュールのインポートから始めます:</p> + + <pre class="brush: js">var webdriver = require('selenium-webdriver'), + By = webdriver.By, + until = webdriver.until; + +var firefox = require('selenium-webdriver/firefox');</pre> + </li> + <li> + <p>次に、Firefox Nightly を表す新しい <code>binary</code> オブジェクトを生成し、ヘッドレスモードで実行するために <code>-headless</code> 引数を追加します:</p> + + <pre class="brush: js">var binary = new firefox.Binary(firefox.Channel.NIGHTLY); +binary.addArguments("-headless");</pre> + </li> + <li> + <p>いよいよ Firefox のための新しいドライバーインスタンスを生成します。上記で作成したバイナリを使用してテストの実行を指定するオプションオブジェクトを含めるためには、<code>setFirefoxOptions()</code> を使用します。(このステップは Linux と Windows/Mac でヘッドレスモードがリリースされた後は不要です。しかし、Nightly 特有の機能としてテストしたい場合にはまだ役立ちます):</p> + + <pre class="brush: js">var driver = new webdriver.Builder() + .forBrowser('firefox') + .setFirefoxOptions(new firefox.Options().setBinary(binary)) + .build();</pre> + </li> + <li> + <p>Google 検索ホームページ上で簡単なテストを実行する次のコードを追加します:</p> + + <pre class="brush: js">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();</pre> + </li> + <li> + <p>最後に、次のコマンドでテストを実行します:</p> + + <pre class="brush: bash">node selenium-test</pre> + </li> +</ol> + +<p>これでおしまい! 少し経つと、コンソール上に "Test passed" というメッセージが表示されます。</p> + +<p>Myk Melez の <a href="https://mykzilla.org/2017/08/30/headless-firefox-in-node-js-with-selenium-webdriver/">Headless Firefox in Node.js with selenium-webdriver</a> には、追加の便利な tips やヘッドレスモードで Node.js Selenium テストを実行するトリックが含まれています。</p> + +<h3 id="Java_で_Selenium">Java で Selenium</h3> + +<div class="note"> +<p><strong>Note</strong>: これらの手順を書いてくれてありがとう、nicholas dipiazzaに感謝します！</p> +</div> + +<p>このガイドでは、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment#Setting_up_Selenium_in_Node">Setting up Selenium in Node</a> ガイドで説明したように、マシンに Geckodriver が既にあること、および Gradle プロジェクトをサポートする IDE があることを前提としています。</p> + +<ol> + <li> + <p><a href="https://github.com/mdn/headless-examples/blob/master/headlessfirefox-gradle.zip">headlessfirefox-gradle.zip</a> アーカイブ（<a href="https://github.com/mdn/headless-examples/tree/master/headlessfirefox-gradle">ここのソースを参照</a>）をダウンロードし、解凍してheadlessfirefoxフォルダをIDEにグラデルプロジェクトとしてインポートします</p> + </li> + <li> + <p>必要に応じて<code>build.gradle</code>ファイルを編集して、selenium をそれ以降のバージョンに設定します。執筆時点では 3.5.3 を使用しました</p> + + <pre class="brush: java">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' +}</pre> + </li> + <li> + <p>HeadlessFirefoxSeleniumExample.javaファイルの<code>webdriver.gecko.driver</code>プロパティをgeckodriverをインストールしたパスと等しくなるように編集します（下の15行目を参照）</p> + + <pre class="brush: java">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(); + } + } +}</pre> + </li> + <li> + <p>Javaクラスを実行すると、このページのHTMLコンテンツがコンソール/端末に表示されます</p> + </li> +</ol> + +<h3 id="Python_で_Selenium">Python で Selenium</h3> + +<p>このガイドでは、<a href="/ja/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment#Setting_up_Selenium_in_Node">Setting up Selenium in Node</a>で説明したように、マシンにgeckodriverが既にあることを前提としています。</p> + +<ol> + <li> + <p><a href="https://pypi.python.org/pypi/selenium">SeleniumのPythonクライアント</a>の最新バージョンをインストールします</p> + </li> + <li> + <p>geckodriverをインストールした場所にパスを通すためには、11行目の<code>executable_path</code>を設定し、次のように編集します</p> + + <pre class="brush: python line-numbers language-python"><code class="language-python">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()</code></pre> + </li> + <li> + <p>Pythonスクリプトを実行すると、このページのHTMLコンテンツがコンソール/端末に表示されます</p> + </li> +</ol> + +<h3 id="その他のテスト方法">その他のテスト方法</h3> + +<ul> + <li>Slimerjs は Linux 上で Firefox をサポートしており、Mac と Windowsのサポートは間もなく公開されます。詳細については、Brendan Dahl の <a href="https://adriftwith.me/coding/2017/04/21/headless-slimerjs-with-firefox/">Headless SlimerJS with Firefox</a> を参照してください</li> + <li><a href="https://github.com/DevExpress/testcafe">TestCafe</a> (v.0.18.0 以降) は、デフォルトでヘッドレス Firefox でのテストもサポートしています。詳細については<a href="https://devexpress.github.io/testcafe/blog/testcafe-v0-18-0-released.html#testing-in-headless-firefox">ドキュメント</a>を参照してください。</li> +</ul> + +<p>さらに、環境変数を設定できる限り、他の一般的なテストアプリで書かれた自動テストを実行するために、ヘッドレスFirefoxを使用することができます。</p> + +<h2 id="トラブルシューティングとヘルプ">トラブルシューティングとヘルプ</h2> + +<p>ヘッドレスモードの実行でトラブルがあっても心配しないでください — ここで助けます。このセクションでは、追加の QA を載せることを想定しています。</p> + +<ul> + <li>Linux では、ヘッドレスモードで使用しないにもかかわらず、システム上であるライブラリが要求されます。 — Firefox がそれらにリンクしているからです。詳細と修正に向けた進捗は {{bug(1372998)}} を見てください。</li> +</ul> + +<p>エンジニアに質問したいなら、<a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a> の <code>#headless</code> チャネルに行くのがベストです。バグを見つけた場合は、<a href="https://bugzilla.mozilla.org/">Mozilla Bugzilla</a> で報告してください。</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li><a href="https://intoli.com/blog/running-selenium-with-headless-firefox/">Using Selenium with Headless Firefox (on Windows)</a> by Andre Perunicic (Python を使用)</li> + <li><a href="https://mykzilla.org/2017/08/30/headless-firefox-in-node-js-with-selenium-webdriver/">Headless Firefox in Node.js with selenium-webdriver</a> by Myk Melez</li> + <li><a href="https://adriftwith.me/coding/2017/04/21/headless-slimerjs-with-firefox/">Headless SlimerJS with Firefox</a> by Brendan Dahl</li> + <li><a href="http://blog.rousek.name/2017/09/08/going-headless-with-firefox-since-55/">Using Selenium with Headless Firefox on Travis-CI</a> by Josef Rousek</li> +</ul> |