TL;DR if Phantomjs doesn’t show any text/fonts, give it a Truetype web font.

Despite Phantomjs‘ [1] development slowing down [2] it still brings most of the features I need for regression testing web applications. And, thanks to Docker, it should be possible to operate it for a long time to come. Installing and operating Phantomjs is disarmingly simple: it is a single binary with no dependencies and installing it is as simple as copying it into a folder. There are also ways to get it with a package manager [3].

In constrained, headless environments, Phantomjs will sometimes not render text. If folklore [4] is to be trusted, the reason is mostly fonts not being available in those environments. Version 2.1.10 and above seems to be able to load and render Truetype web fonts, which is the basic escape plan:

install a fallback Truetype font with the web application
declare a CSS rule which loads the fallback font only for Phantomjs
activate the rule in tests

Implementing the escape plan

Downloading a (preferably Unicode) TTF and deploying it with the web application should be straight forward.

Next, declare a Phantomjs-only rule in the web application’s CSS. I found that Phantomjs will not render fonts that have been inlined [5], it has to be a regular URL:

@font-face {
 font-family: phantomjsfont;
 src: url(/static/fonts/arial.ttf);
}

.phantomjs *{
 font-family: phantomjsfont;
}

Make sure your web server delivers fonts with a proper MIME type [6].

Last, activate the rule in integration tests. E.g. in a JUnit test with Webdriver, adding the “phantomjs” class to the root document element:

((JavascriptExecutor) webDriver).executeScript(
"document.getElementsByTagName('body')[0].setAttribute('class','phantomjs');"
);

One more thing…

A web UI which uses “strange” characters (U+00FF and above) may suddenly run into test failures with elements not being visible and/or clickable. I found that as long as Phantomjs had no font to render, it would render text with empty spaces which, however, do take up some space. Once Phantomjs has a font it can use for rendering, but cannot find a character in that font, it will not show anything. So make sure you use fonts that have glyphs for all characters that are important in tests.