{"id":7480,"date":"2015-11-12T16:48:37","date_gmt":"2015-11-12T13:48:37","guid":{"rendered":"http:\/\/railsware.com\/blog\/?p=7480"},"modified":"2021-08-13T11:37:40","modified_gmt":"2021-08-13T08:37:40","slug":"debugging-capybara-screenshot-of-error-page-on-circleci","status":"publish","type":"post","link":"https:\/\/railsware.com\/blog\/debugging-capybara-screenshot-of-error-page-on-circleci\/","title":{"rendered":"Debugging Capybara: screenshot of error page on CircleCI"},"content":{"rendered":"\n

Having real screenshot of a failed integration spec can save hours of debugging. We had screenshot with error on the local development environment, and wanted to have it on Continuous Integration server.<\/p>\n\n\n\n

Luckily for us, it’s a real no-brainer, if you use CircleCI<\/a>. There is no need for custom S3 upload or some additional services. It’s just a configuration matter.<\/p>\n\n\n\n

CircleCI has a concept of $CIRCLE_ARTIFACTS<\/code> folder. You can put any file into this folder, and it will show all files in this folder after build is finished.<\/p>\n\n\n\n

Configuring spec_helper.rb<\/h3>\n\n\n\n

Put this snippet into spec_helper.rb<\/code> file(RSpec 3):<\/p>\n\n\n\n

RSpec.configure do |config|\n\n  # ... other configuration options\n\n  def save_timestamped_screenshot(page, meta)\n    filename = File.basename(meta[:file_path])\n    line_number = meta[:line_number]\n\n    time_now = Time.now\n    timestamp = \"#{time_now.strftime('%Y-%m-%d-%H-%M-%S.')}#{'%03d' % (time_now.usec\/1000).to_i}\"\n\n    screenshot_name = \"screenshot-#{filename}-#{line_number}-#{timestamp}.png\"\n    screenshot_path = \"#{ENV.fetch('CIRCLE_ARTIFACTS', Rails.root.join('tmp\/capybara'))}\/#{screenshot_name}\"\n\n    page.save_screenshot(screenshot_path)\n\n    puts \"\\n  Screenshot: #{screenshot_path}\"\n  end\n\n  config.after(:each) do |example|\n    if example.metadata[:js]\n      save_timestamped_screenshot(Capybara.page, example.metadata) if example.exception\n    end\n  end\n\n  # ... other configuration options\nend\n<\/pre>\n\n\n\n
In RSpec 2 example<\/code> is implicit parameter, so config.after(:each)<\/code> should be slightly different:<\/p>\n\n\n\n
  config.after(:each) do\n    if example.metadata[:js]\n      save_timestamped_screenshot(Capybara.page, example.metadata) if example.exception\n    end\n  end\n<\/pre>\n\n\n\n
This configuration should work for webkit<\/code>, selenium<\/code>, and poltergeist<\/code> drivers.<\/p>\n\n\n\n
Usage<\/h3>\n\n\n\n
Running within CircleCI environment this script will save all screenshots with integration specs failures in the $CIRCLE_ARTIFACTS<\/code> folder. Here is how it looks like:
\"brightbytes:brightbytes<\/a>
You can open the link and see how scenario failed on the CI.<\/p>\n\n\n\n
For development environment it stores all screenshots within tmp\/capybara<\/code> of your Rails root folder, and outputs “Screenshot path-to-file” into the console, so it’s easy to find and check it. On the Mac it’s just:<\/p>\n\n\n\n
$ open path-to-file\n<\/pre>\n\n\n\n
That’s it, folks! Hope, you will save a lot of debugging hours with this simple trick.<\/p>\n","protected":false},"excerpt":{"rendered":"
Having real screenshot of a failed integration spec can save hours of debugging. We had screenshot with error on the local development environment, and wanted to have it on Continuous Integration server. Luckily for us, it’s a real no-brainer, if you use CircleCI. There is no need for custom S3 upload or some additional services….<\/p>\n","protected":false},"author":25,"featured_media":9432,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3],"tags":[],"coauthors":["Sergii Boiko"],"class_list":["post-7480","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development"],"acf":[],"aioseo_notices":[],"categories_data":[{"name":"Engineering","link":"https:\/\/railsware.com\/blog?category=development"}],"post_thumbnails":"https:\/\/railsware.com\/blog\/wp-content\/uploads\/2015\/11\/brightbytesbrightbytes-19159-CircleCI-2015-11-11-13-09-301.png","amp_enabled":true,"_links":{"self":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/7480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/comments?post=7480"}],"version-history":[{"count":20,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/7480\/revisions"}],"predecessor-version":[{"id":14027,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/posts\/7480\/revisions\/14027"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/media\/9432"}],"wp:attachment":[{"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/media?parent=7480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/categories?post=7480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/tags?post=7480"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/railsware.com\/blog\/wp-json\/wp\/v2\/coauthors?post=7480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}