
Headless mode in Firefox - Vinnl
https://developer.mozilla.org/en-US/Firefox/Headless_mode
======
royka118
For all of you old fogies working on angular 1 apps and are running browser
tests with karma you can run your tests in firefox with headless mode with a
customer launcher. Add the snippet below to your karma conf

``` browsers: ['FirefoxHeadless'], customLaunchers: { FirefoxHeadless: { base:
'Firefox', flags: [ '-headless', ], }, }, ```

Note you need to be running the beta version of firefox, I needed to download
it from here [https://www.mozilla.org/en-
US/firefox/channel/desktop/](https://www.mozilla.org/en-
US/firefox/channel/desktop/)

~~~
MuffinFlavored
Does this offer any real benefit over Xvfb?

~~~
pcx
We were using Xvfb with PhantomJS. Moving to a headless browser gave us the
advantage of making sure everything is rendering just as we see in the GUI
mode of that browser. This had a lot to do with moving away from PhantomJS.
But it also removed the unkowns, Xvfb and other dependencies that came with
it, from our stack. The lesser the unkowns the better I guess.

~~~
knicholes
Wait, why did you need to use XVFB with PhantomJS? Isn't Phantom headless as
is?

~~~
jrgifford
Still requires a X server, which docker containers won't necessarily have.

~~~
first_amendment
Only versions 1.4 and below. Versions 1.5 and above do not require an X
server. Version 1.5 has been available for 5+ years:
[https://ariya.io/2012/03/pure-headless-phantomjs-
no-x11-or-x...](https://ariya.io/2012/03/pure-headless-phantomjs-no-x11-or-
xvfb)

~~~
pcx
We have found PhantomJS to be very buggy and hard to debug. We generate
millions of PDFs a month. Whenever we upgrade PhantomJS, something breaks with
no way to debug easily. We end up reverting to the older version. After trying
3 times, we gave up and had settled for the older version.

~~~
huehehue
In the middle of moving a massive codebase off PhantomJS, it is indeed a
nightmare. Old versions leaked memory, debugging/logging is really weird
because you get trapped in the context of the browser, and pooling...one of
the old phantom pooling packages on GH is part of someone's grad thesis.

Does not play well with React Fiber either, in my experience. Aaaand isn't the
brain behind PhantomJS stepping down or something? To any potential users:
just go with Chrome

------
makecheck
Tools like headless browsers might turn into the "perl" of this generation. :)

Years ago I could always find a way to make Perl do whatever I wanted. It was
usually "wrong" to fire up an entire interpreter compared to using faster,
less flexible tools but it got the job done. Now I imagine people thinking,
"the browser will do this", especially if they can grab screenshots or other
local data files.

------
bligh____
It would be cool if mozilla and google would standatalize the headless API and
command line flags as llvm and gcc has done, so you would perform headless
cross browser testing.

~~~
XCSme
So something like Webdriver.io ?

~~~
jacalata
Like that, but with documentation.

~~~
shados
and that actually works. Using headless chrome with the direct API is so much
more reliable than the selenium API.

~~~
Lightbody
The onus of who actually automates the browser is moving from Selenium (the
open source project) to the browser vendors. This will help with reliability
and is also exactly what you're asking for:

[https://www.w3.org/TR/webdriver/](https://www.w3.org/TR/webdriver/)

~~~
shados
Right. That will be nice when it's done and stable (I'm looking at you,
Safari), but for my tests today that doesn't really help me.

~~~
wgjordan
I would be very interested in tracking the details you're hinting at to know
when this is done and stable to use reliably. Do you have specific
examples/issues related to what your tests today require that is unreliable /
not currently possible using WebDriver with Safari and/or headless Chrome?

------
Derbasti
Can you tell Firefox to print in headless mode? I want to write reports using
HTML and JS, but printing is always an issue.

~~~
randlet
You can generate pdfs with headless Chromium/Chrome pretty easily[1].

    
    
        chromium-browser --headless --disable-gpu --print-to-pdf=output_file_name.pdf file:///path/to/your/html
    

[1]
[https://developers.google.com/web/updates/2017/04/headless-c...](https://developers.google.com/web/updates/2017/04/headless-
chrome#create_a_pdf_dom)

~~~
developer2
Any idea when _exactly_ the PDF capture is performed? So many pages now render
a minimal initial load, while the actual content is greatly delayed (usually <
100ms, but sometimes 3+ seconds) due to being loaded from one or more AJAX
sources.

Capturing the PDF at even the onload event (let alone the useless
DOMContentLoaded event) is going to capture an incomplete picture in a _huge_
number of situations. Frankly, a PDF capture at onload event is going to be
utterly unusable. Is there a way to set a delay before capturing, ie: 10
seconds?

In an ideal world, a true "finished loading" event would trigger only after
all DOMContentLoaded and onload handlers are executed, only once any AJAX
requests launched by such handlers are completed (including requests fired off
in _their_ handlers, recursively). Of course, websockets and long polling ajax
would _still_ interfere with detecting a true "finished" event, but it'd be
better than setting an artificially large delay of 10+ seconds.

~~~
Sacho
I don't think this feature is "utterly unusable". You can run your JS, wait
for whatever events you want, and then pipe the resulting HTML to a --print-
to-pdf command.

~~~
developer2
The primary reason to print a pdf would be to do so to any random 3rd party
page. Sadly, you have no control over how 3rd party sites render/load their
content. And --print-to-pdf likely captures the render of the page at some
predetermined point, my guess being the "onload" event. Which, again, is not
going to result in a fully rendered page for many sites that load in their
primary content using AJAX.

------
Vinnl
Note that this works in the latest release only on Linux - Windows and OS X
support is coming in the next release in a few weeks.

~~~
bobwaycott
> _Headless Firefox works on Fx55+ on Linux, and 56+ on Windows /Mac._

Edit: so people know what versions are pegged.

------
skrebbel
This is very nice. What's the recommended way to run end-to-end tests in
headless firefox _and_ headless chrome?

Can't wait for a cross-platform headless Edge :-)

~~~
thejosh
I'm currently evaluating testcafe which is pretty nice, and headless chrome
was easy to setup. I'm interested to see what people recommend for browser
testing, I'm also using preact.

~~~
TheAceOfHearts
Writing end-to-end tests is always a sucky and flaky experience, and it always
ends up slowing down CI. With that said, I've used testcafe without any big
complaints.

My general rule of thumb is to try having as few end-to-end tests as possible.
It's fine for an e2e test to cover multiple aspects of your application.
Trying to write e2e tests as if they were unit tests just leads to sadness and
infinite CI builds.

I don't think there's any value to running all your tests on the browser. It's
much faster and simpler to run the bulk of your tests on node, with a fake DOM
environment.

If you're interacting directly with the DOM, you might want to consider
breaking that off as a separate lib. From the lib's repo you can have all of
its tests run on a real browser.

~~~
gedrap
Totally agree. I am a fan of Test Pyramid model, where at the top you have a
very small number of long running, complex tests (usually e2e), and at the
very bottom you have a lot of small, isolated and very fast unit tests.

Testing everything in a browser/e2e provides a rather poor cost/benefit ratio,
especially as the project grows and more features and tests are added, so it
should be reserved for cases where it is really important.

I like having e2e tests that cover the very core functionality and involve
multiple parts of the stack. For example, if you have your rather typical app
with a login modal, it's probably good to have a test that clicks on the
button, makes sure that the modal is visible, and the user is redirected to
the expected page after logging in. But testing if error message is displayed
if email address is invalid? That's too much.

------
nicklaf
The article mentions screenshots. I am interested in running the browser as a
rendering tool, but ouputing not just a bitmap, but something closer to PDF.
The goal here would be to crawl a bunch of pages and spin up the CPU to run
all the needed JavaScript to render things, but to obtain an identical version
of the page that runs about as fast viewing a screenshot, but also includes
text. An offline "web OCR", if you will.

NeWS, Display PostScript, Quartz all come to mind. I know you can save
webpages as PDF documents, but I am thinking of something that is like PDF but
closer to HTML-just more closely coupled to what is being displayed, and not
whatever arbitrary style or JavaScript abuse the developer decided on.

Even just outputing some neat, canonical HTML based on the state of the page
once everything is loaded would be helpful, so that the bitmap could later be
combined in some kind of new document format.

~~~
richdougherty
I'm pretty sure you could write some WebDriver + JavaScript that captures the
DOM/text in the page. You might even be able to capture layout information for
later reconstruction.

~~~
nicklaf
That's useful to know, thank you. Perhaps the solution isn't so complicated.

------
nkkollaw
Can someone do an ELI5 on why headless browsers are useful?

I've use them before to make screenshots of webpages, and I have noticed that
many NPM packages come (or came) with PhantomJS as a dependency, but I have no
idea why one would need that.

~~~
cbhl
Automated integration/regression tests is a pretty big use case.

You spin up a copy of your server, point the headless browser at it, run some
JavaScript to simulate some user interactions, and verify the page contains
the right strings / screenshot doesn't deviate too much from a golden image.

I guess the ELI5 way of saying that would be: "Making sure your website still
works."

People also headless browsers for content generation inside larger systems. (I
saw one team make videos by creating CSS animations, and then capturing
screenshots from the headless browser at 30 fps.)

~~~
nashashmi
So an ELI5 of everything you said would be:

Putting the website through user actions in a firefox browser and
recording/capturing/documenting the results headlessly. Headless version
allows you to go through hundreds of results in the background.

~~~
cbhl
Maybe. I got stuck trying to imagine whether a five-year-old would understand
what "headless" means in a software context (as opposed to, "headless dragon"
or something).

------
beamatronic
Could you use this to write the best screen scraper? One you could run locally
and trust to obtain sensitive data?

~~~
vosper
I think so, and the same can probably be accomplished with headless Chrome.

------
coolio222
Can you download files in headless Firefox or Chrome?

~~~
eptgrant
Not with Chrome at the moment.

[https://bugs.chromium.org/p/chromium/issues/detail?id=696481](https://bugs.chromium.org/p/chromium/issues/detail?id=696481)

Soon.

In the interim I've been using standard C# web requests and using the cookies
from the ChromeDriver. Doesn't work for downloads where it is not a direct
link unfortunately.

------
wslh
With Chrome and Firefox finally adding a headless mode, could I replace Lynx
for Chrome or Firefox?

~~~
jamespo
Are you expecting chrome/ff to render in text on the console?

------
xexers
Does anyone have any metrics on headless vs headed browser testing? Can you
say headless is 25% faster and 20% more reliable? What is the sales pitch for
headless browsers for UI automation?

~~~
Sammi
Don't know about performance numbers, but one reason for headless browsers is
so that you can run your tests on cheap small headless Linux servers.

~~~
sacheendra
Adding to ^. You don't need to have the Xorg stuff running to run tests.

~~~
Wilya
That's what Xvfb is for.

"xvfb-run firefox" and "firefox -headless" should be functionally equivalent.
But I would still be interested in performance comparison with numbers.

~~~
Vinnl
Doesn't xvfb still just run an Xserver, simply without painting? Or do
headless Chrome and Firefox still require an X server running too?

~~~
Wilya
You're right, there is a difference.

I meant equivalent from the point of view of the user who wants to run tests,
not on the way they work internally.

------
fenesiistvan
What about the "app" mode? Chrome have introduced the --app command line
switch long time ago and similar functionality would be very useful also in
Firefox. I suppose that implementation would be also very easy, i don't
understand why there is still no such functionality in Firefox.

------
heipei
Now if only Firefox also implemented the Chrome Remote Debugging Protocol...
[https://chromedevtools.github.io/debugger-protocol-
viewer/to...](https://chromedevtools.github.io/debugger-protocol-viewer/tot/)

~~~
jxn
Firefox does have their own, documented and seemingly stable remote debugging
protocol. I haven't used it recently, but there is the Valence project
([https://github.com/mozilla/valence](https://github.com/mozilla/valence))
which provides adapters for their debugging tools for other protocols, namely
Chrome's remote debugger. In the past, I have used this to debug Chrome with
firefox's devtools. Maybe it works for your needs?

------
codewithcheese
Does anyone know if there is a way to control the window size? If there is
does it also modify screen.availHeight properties and other give aways that
you have modified the window size.

~~~
jopsen
Looks like it's controlled through webdriver..

I'm guessing you can lookup the webdriver spec to see what you can do...

------
mathgenius
Has anyone built a WaaS yet ? (Web-browser as a service.)

~~~
protomikron
I think if done right there would be a market (if this is actually the right
direction and useful is another question).

wbaas.io "web browser as a service"

Support like say the 5 major browsers (Firefox, Chrome, Safari, ...), provide
an API and charge like ~xx euro/month.

The biggest challenge is probably to make it secure as one builds in essence a
DOS proxy?

~~~
defied
That's what TestingBot offers; a cloud of browsers to run automated tests.
Pricing depends on test duration and concurrency.

We secure all VMs with a firewall, every test runs on a new VM which gets
destroyed after the test.

------
tree_of_item
Perhaps I'm spoiled, but I'm wondering why this wasn't a thing many years ago.
Am I wrong in saying this was brought about in reaction to Chrome adding the
same feature, or has this been there for a while? Clearly people wanted this
for ages, hence the work on things like PhantomJS. But it seems like it was
only added once they realized they needed to play catch-up with Chrome.

~~~
Manishearth
No, this has been in the works for a while

[https://bugzilla.mozilla.org/show_bug.cgi?id=1338004](https://bugzilla.mozilla.org/show_bug.cgi?id=1338004)

So not in reaction to Chrome.

In fact, the first attempt for this was almost a decade ago
([https://bugzilla.mozilla.org/show_bug.cgi?id=446591](https://bugzilla.mozilla.org/show_bug.cgi?id=446591))

~~~
tree_of_item
Thanks for the info, that's good news.

~~~
duck
Or you could look at as really bad news if it takes a decade to implement
this.

~~~
Manishearth
I mean, Selenium has worked for Firefox for years so it's not like this was a
priority.

It's a decade to decide this is worth doing, which is reasonable given that
there's also a "good enough" solution out there; Selenium.

~~~
hugs
Good enough to be the W3C standard.
[https://www.w3.org/TR/webdriver/](https://www.w3.org/TR/webdriver/)

------
justinph
Anyone know if you can run flash in headless mode?

------
kyledrake
It would be really nice to see see GPU / WebGL support here!

------
barbolo
Which way to go: Chrome headless, Firefox headless or both?

~~~
ZenoArrow
Both. Ideally, you shouldn't run website tests on a single browser. We
shouldn't want to return to the days where websites only worked well on a
single browser.

~~~
Vinnl
Exactly. I already think it's a shame that I can only run Firefox and Chrome
in Docker (i.e. CI), but I hope that their differences will compensate enough
to cover most potential problems in Edge and Safari.

------
bryanrasmussen
since you're setting the environment variable to be headless what happens if
you're browsing with Firefox while running your automated process?

~~~
traverseda
You don't need to set all your environment variables in your bashrc, if that's
not obvious. They're not global state. You can change them on a per-terminal
basis, and that only effects the environment of that one terminal.

Firefox does some weird stuff with multiprocessing, where if you run the
firefox command twice you only get one process. I don't know how that would
effect things, but I imagine just setting the env variable and running as a
different firefox profile would do it.

There's always firejail/firewarden, if you need a quick and easy sandbox for a
program you already have installed, and that will solve that problem, if it is
a problem.

~~~
Vinnl
Additionally, it's also possible to turn it on using the CLI flag
`--headless`, if setting env vars is a concern.

~~~
Vinnl
Oh, and additionally: passing options with a double dash doesn't work on
Windows, so use `-headless` to be sure.

------
computerwizard
I wonder if this will work with the iMacros addon?

------
minademian
welcome development. apparent that Firefox is paying attention what's
happening in JS world...

------
fake-name
Does it require X to be installed? If so, it's not headless.

~~~
mykmelez
It does require X to be installed, although it doesn't actually use X, and the
X implementation can just be Xvfb.

Unfortunately, fixing that is hard. I think Chrome has the same limitation.
For Firefox, the issue is tracked in
[https://bugzilla.mozilla.org/show_bug.cgi?id=1372998](https://bugzilla.mozilla.org/show_bug.cgi?id=1372998).

------
camoby
While I think solutions like this are useful in some situations, I wonder how
much non-human traffic and spam they might end up being responsible for.

------
fairpx
As a UI designer, I dream of _strike_ headless _strike_ chromeless browsers,
where the UI appears when you need it, intuitively, even when NOT in full
screen. The top bar simply takes too much unnecessary space. If there's any
dev that wants to collaborate on this, let me know :)

~~~
caiob
From a security POV, the URL being displayed at all times is absolutely
necessary in order to avoid phishing.

~~~
nilved
No it isn't, the URL is unreliable source of truth with Unicode spoofing
attacks and things like that. Safari only shows the domain at this point; the
URL is an unimportant implementation detail.

~~~
etplayer
It would be cool if browsers could highlight URLs that contain the kind of
characters which are commonly used to spoof, though I suppose it would lead
people to a false sense of security.

~~~
noisem4ker
Just set your browser to always show punycode. On Firefox,

    
    
      network.IDN_show_punycode = true
    

URLs are no place for unicode characters to hide in. An xn-- prefix is all the
warning you need.

~~~
bzbarsky
Your claims are false for the majority of the world's population (which lives
in non-English speaking countries and may well want to visit sites whose names
make sense in their own language).

~~~
eeZah7Ux
That's why Firefox detects if the URL mixes together symbols from different
languages:

[https://wiki.mozilla.org/IDN_Display_Algorithm](https://wiki.mozilla.org/IDN_Display_Algorithm)

Much better than showing punycode all the time.

