Search code examples
rubycapybarafont-facecapybara-webkit

Display @font-face Fonts in Capybara-Webkit

When I test my website using capybara-webkit and I take a screenshot, @font-face declarations in CSS are ignored.

This is especially bad because I am using FontAwesome, so there will be major differences to how the page is displayed in a real browser.

How to reproduce: https://gist.github.com/anonymous/4948827

Output: https://i.sstatic.net/lBbFn.jpg

Is there any way to fix this?

Solution

  • Depending on the version of qt that capybara-webkit is built against, webkit needs non-localhost urls whitelisted. That includes meta references to external assets such as fonts.

    To make that happen globally, add this to spec_helper.rb in the rspec configuration block:

    config.before(:each) do
  page.driver.allow_url("the-domain-name.com")
end

    If you have a before :each already, just throw it in there instead. allow_url also accepts an array of strings.

    I've placed a comment in your gist to this effect.