1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
|
---
title: Headless mode
slug: Mozilla/Firefox/Headless-Mode
tags:
- Automaisierung
- Firefox
- Flag
- Flagge
- Headless Modus
- Kopflos
- Mozilla
- QA
- Testautomatisierung
- Testen
- headless
- headless mode
- node.js
translation_of: Mozilla/Firefox/Headless_mode
---
<div>{{FirefoxSidebar}}</div>
<p class="summary">Der Headless-Mode ist eine sehr nützliche Weise auf dem der Firefox betrieben werden kann — dabei funktioniert Firefox normal, nur dass die Oberfläche nicht sichtbar ist. Das erscheint nicht besonder sinnvoll, wenn man im Web surfen möchte, aber es ist sehr nützlich für automatisierte Tests. Dieser Artikel gibt dir alle Infos, die du brauchst um Firefox im Headless-Mode laufen zu lassen.</p>
<h2 id="Den_Headless-Mode_verwenden">Den Headless-Mode verwenden</h2>
<p>Dieser Bereich bietet eine grunsätzliche Anleitung wie man den Headless-Mode verwendet.</p>
<h3 id="Grundsätzliche_Verwendung">Grundsätzliche Verwendung</h3>
<p>Auf der Komandozeile kannst du Firefox im Headless-Mode starten indem du das <code>-headless</code> Flag anhängst. Zum Beispiel:</p>
<pre class="brush: bash">/path/to/firefox -headless</pre>
<h3 id="Screenshots_aufnehmen">Screenshots aufnehmen</h3>
<p>Seit Firefox 57 ermöglicht es das <code>-screenshot</code> Flag auf Webseiten im Headless-Mode Screenshots aufzunehmen. Grundsätzlich sieht das dann so aus:</p>
<pre class="brush: bash">/path/to/firefox -headless -screenshot https://developer.mozilla.org/</pre>
<p>Das erzeugt einen Screenshot in voller Höhe von <code>https://developer.mozilla.com</code> in das aktuelle Verzeichnis mit dem Dateinamen <code>screenshot.png</code>, mit einer Viewport-Breite von 800px.</p>
<p>Beachte, dass du <code>-headless</code> weg lassen kannst, wenn du <code>-screenshot</code> angibst— es ist implizit enthalten.</p>
<pre class="brush: bash">/path/to/firefox -screenshot https://developer.mozilla.org/</pre>
<p>Um die Default-Werte, die oben angegeben sind, zu überschreiben,kannst du folgende <code>Flags/Features</code> verwenden<code>:</code></p>
<ul>
<li><code>-screenshot name url</code> — Setze einen beliebigen Dateinamen für den Screenshot indem du zwischen dem <code>-screenshot</code> Flag und der URL diesen angibst. Beachte, dass du auch weitere web-kompatible Bildformate wie z.B. <code>.jpg</code>, <code>.bmp</code>, etc.</li>
<li><code>--window-size=x,y</code> — Setze eine beliebige Bildbreite und -höhe für den Screenshot.</li>
</ul>
<p>Zum Beispiel erzeugt der folgende Befehl einen Screenshot von <code>https://developer.mozilla.com </code>im aktuellen Verzeichnis mit Dateinamen <code>test.jpg</code>, mit einer Breite von 800px und einer Höhe von 1000px:</p>
<pre class="brush: bash">/path/to/firefox -screenshot test.jpg https://developer.mozilla.org/ --window-size=480,1000</pre>
<h3 id="Browser_support">Browser support</h3>
<p>Headless Firefox works on Fx55+ on Linux, and 56+ on Windows/Mac.</p>
<h2 id="Automated_testing_with_headless_mode">Automated testing with headless mode</h2>
<p>The most useful way to use headless Firefox is to run automated tests with it, meaning that you can make your testing process much more efficient.</p>
<h3 id="Selenium_in_Node.js">Selenium in Node.js</h3>
<p>Here we'll create a <a href="http://www.seleniumhq.org/">Selenium</a> test using <a href="https://nodejs.org/">Node.js</a> and the <code><a href="https://www.npmjs.com/package/selenium-webdriver">selenium-webdriver</a></code> package. For this guide we'll assume that you already have basic familiarity with Selenium, Webdriver, and Node, and that you already have a testing environment set up. If you don't, work through our <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment#Setting_up_Selenium_in_Node">Setting up Selenium in Node</a> guide first, then come back.</p>
<p>First, of all, make sure you've got Node installed on your system, and the <code>selenium-webdriver</code> package installed, then create a new file called <code>selenium-test.js</code> and follow the steps below to populate it with test code.</p>
<div class="note">
<p><strong>Note</strong>: Alternatively, you could clone our <a href="https://github.com/mdn/headless-examples">headless-examples repo</a>; this also includes a package file so you can just use <code>npm install</code> to install necessary dependencies.</p>
</div>
<ol>
<li>
<p>Let's add some code. Inside this file, start by importing the main <code>selenium-webdriver</code> module, and the <code>firefox</code> submodule:</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>Next, we will create a new <code>binary</code> object representing Firefox Nightly, and add the <code>-headless</code> argument to it so that it will be run in headless mode:</p>
<pre class="brush: js">var binary = new firefox.Binary(firefox.Channel.NIGHTLY);
binary.addArguments("-headless");</pre>
</li>
<li>
<p>Now let's create a new driver instance for Firefox, and use <code>setFirefoxOptions()</code> to include an options object that specifies that we want to run the test using the binary we created above (this step will be unnecessary on Linux, and after headless mode lands in the release channel on Windows/Mac, but it is still useful if you want to test a Nightly-specific feature):</p>
<pre class="brush: js">var driver = new webdriver.Builder()
.forBrowser('firefox')
.setFirefoxOptions(new firefox.Options().setBinary(binary))
.build();</pre>
</li>
<li>
<p>Finally, add the following code, which performs a simple test on the Google search homepage:</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>Finally, run your test with following command:</p>
<pre class="brush: bash">node selenium-test</pre>
</li>
</ol>
<p>That's it! After a few seconds, you should see the message "Test passed" returned in the console.</p>
<p><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 contains additional useful tips and tricks for running Node.js Selenium tests with headless mode.</p>
<h3 id="Selenium_in_Java">Selenium in Java</h3>
<div class="note">
<p><strong>Note</strong>: Thanks a lot to nicholasdipiazza for writing these instructions!</p>
</div>
<p>This guide assumes that you already have Geckodriver on your machine, as explained in our <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Your_own_automation_environment#Setting_up_Selenium_in_Node">Setting up Selenium in Node</a> guide, and that you have an IDE set up that supports Gradle projects.</p>
<ol>
<li>
<p>Download our <a href="https://github.com/mdn/headless-examples/blob/master/headlessfirefox-gradle.zip">headlessfirefox-gradle.zip</a> archive (<a href="https://github.com/mdn/headless-examples/tree/master/headlessfirefox-gradle">see the source here</a>), extract it, and import the headlessfirefox folder into your IDE as a gradle project.</p>
</li>
<li>
<p>Edit the <code>build.gradle</code> file to set selenium to a later version if needed. At the time of writing, we used 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>Edit the <code>webdriver.gecko.driver</code> property in the HeadlessFirefoxSeleniumExample.java file to equal the path where you installed geckodriver (see line 15 below).</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>Run the java class and you should see the HTML content of this page printed in your console/terminal.</p>
</li>
</ol>
<h3 id="Other_testing_solutions">Other testing solutions</h3>
<ul>
<li>Slimerjs has Firefox support built in on Linux, with Mac and Windows support coming soon. See <a href="https://adriftwith.me/coding/2017/04/21/headless-slimerjs-with-firefox/">Headless SlimerJS with Firefox</a> by Brendan Dahl for more details.</li>
<li><a href="https://github.com/DevExpress/testcafe">TestCafe</a> (v.0.18.0 and higher) also supports testing in headless Firefox out of the box. See <a href="https://devexpress.github.io/testcafe/blog/testcafe-v0-18-0-released.html#testing-in-headless-firefox">the documentation</a> for the details.</li>
</ul>
<p>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.</p>
<h2 id="Troubleshooting_and_further_help">Troubleshooting and further help</h2>
<p>If you are having trouble getting headless mode to work, then do not worry — we are here to help. This section is designed to be added to as more questions arise and answers are found.</p>
<ul>
<li>On Linux, certain libraries are currently required on your system even though headless mode doesn't use them — because Firefox links against them. See {{bug(1372998)}} for more details and progress towards a fix.</li>
</ul>
<p>If you want to ask the engineers a question, the best place to go is the <code>#headless</code> channel on <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. If you are pretty sure you've found a bug, file it on <a href="https://bugzilla.mozilla.org/">Mozilla Bugzilla</a>.</p>
<h2 id="See_also">See also</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 (uses 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>
|
