DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Philipp Hansch
Philipp Hansch

Posted on

Testing your Jekyll Website with Capybara

Cross posted from my personal blog: Link

Even when it is just a static website like this one, it is always good to know that the most important things work.

I recently had problems when I was migrating my blog from Jekyll 2.5 to Jekyll 3.3. The permalinks were broken after the upgrade and I only noticed this after the change went live. Some basic tests could have easily prevented this.

After I fixed the broken permalinks I decided to add some basic Capybara tests, as I write them day-to-day for Ruby on Rails apps, too.

The setup

The setup is pretty basic for now with capybara, rack, rake and most importantly rack-jekyll:

# Gemfile
source 'https://rubygems.org'

gem 'jekyll', '3.3.1'

group :test do
  gem 'capybara'
  gem 'rack'
  gem 'rack-jekyll'
  gem 'rake'
end
Enter fullscreen mode Exit fullscreen mode

The test_helper tells Capybara.app to use Rack::Jekyll to serve a Rack version of our Jekyll site for our tests.

# test/test_helper.rb
require 'minitest/autorun'

require 'bundler/setup'
require 'capybara/dsl'
require 'rack/jekyll'

Capybara.app = Rack::Jekyll.new(force_build: true)

class CapybaraTestCase < MiniTest::Test
  include Capybara::DSL

  def teardown
    Capybara.reset_sessions!
    Capybara.use_default_driver
  end
end
Enter fullscreen mode Exit fullscreen mode

With the test_helper configured we can now start writing Capybara tests as usual:

# test/features/this_blog_post_test.rb
require 'test_helper'

class ThisBlogPostTest < CapybaraTestCase
  def test_describes_how_to_write_tests
    visit '2017/03/02/testing-jekyll-websites/'
    assert page.has_content?('configured we can now start '\
      'writing Capybara tests as usual:')
  end
end
Enter fullscreen mode Exit fullscreen mode

What to test

This of course depends on your website. For me I identified a few things:

  • The frontpage (which is a bit outdated) should have the link to my CV
  • Clicking on the archive link should bring me to the archive
  • /archive should contain the first and last post
  • The dates on /archive should be in the correct format
  • The 'Read more' link on /writing should bring me to the correct blog post
  • A blog post should have the correct time to read
  • A blog post should have its date in the correct format
  • The main navigation items go to pages with the correct content
  • The atom feed should be a valid atom feed

Apart from the atom feed validation this is all straight Capybara using has_content and some basic Ruby for the time check. You can find all the tests here.

Top comments (3)

Collapse
mrwesdunn profile image
Wes Dunn

Fantastic post!! I've done a bit of googling to find a simple testing solution for Jekyll and never came up with something that I could get excited about.

I'll definitely be giving your solution a test run (pun somewhat intended)!! Thanks for sharing this!!

Collapse
phansch profile image
Philipp Hansch Author

Happy to hear!

There is one gotcha for which I haven't found a workaround, yet. If you have a bigger site, then you probably have to sleep a few seconds in the test_helper until the site has been built completely. Without sleeping you will run into 'Element not found' errors from Capybara.

Collapse
simonini profile image
Alessandro

Hi Philipp, thanks for your article!
I've a problem with link to your tests; i get a 404 (gitlab.com/phansch/phansch.gitlab....)

Thanks again

🌚 Friends don't let friends browse without dark mode.

Good news! You can update to dark mode in your DEV settings.