CODEWITHSUNDEEP
ruby-on-railsselenium-webdriverrspeccapybara
chmich
chmich

Reputation: 1168

Capybara Screenshot formatted

My Capybara-screenshots are looking silly - it does not apply any stylesheets.

and, it seems to make screenshots not exactly after error occurs: by producing a error manually i see different views as opened by the gem.

what do i have to configure?

here is my spec/rails_helper.rb rails-6.1 and rails s -p 3000 is running alongside the tests

require 'spec_helper'
ENV['RAILS_ENV'] ||= 'test'

require File.expand_path('../config/environment', __dir__)

abort("The Rails environment is running in production mode!") if Rails.env.production?
require 'rspec/rails'

require 'capybara/rspec'
require 'capybara-screenshot/rspec'
#Capybara.server = :puma
Capybara.asset_host = "http://localhost:3000/"
Capybara::Screenshot.after_save_html do |path|
  `open #{path}`
end
Capybara::Screenshot.prune_strategy = :keep_last_run

begin
  ActiveRecord::Migration.maintain_test_schema!
rescue ActiveRecord::PendingMigrationError => e
  puts e.to_s.strip
  exit 1
end
RSpec.configure do |config|
  config.fixture_path = "#{::Rails.root}/spec/fixtures"
  config.use_transactional_fixtures = true
  config.infer_spec_type_from_file_location!
  config.filter_rails_from_backtrace!
end

Gemfile:

group :test do
  gem 'capybara', '>= 2.15'
  gem 'selenium-webdriver'
  gem 'webdrivers'
  gem 'capybara-screenshot'
end
group :development, :test do
  gem 'rspec-rails', '~> 3.9'
end

on the output-file, the first line ist

<html class="no-js" lang="en"><!--<![endif]--><head><base href='http://localhost:3000/' />

so, it seems that capybara-screenshot has checked the csshttps://github.com/mattheworiordan/capybara-screenshot#better-looking-html-screenshots

Thanks for help!

Upvotes: 1

Views: 1320

Answers (1)

Thomas Walpole
Thomas Walpole

Reputation: 49900

Is there a specific reason you're looking at the HTML "screenshots" instead of the jpg screenshots? The HTML ones will never be fully correct, and really should only be used for verifying HTML structure, not for current values/state. The reason for this is it saves the HTML and attributes, but can't save the JS properties of each element, so it won't save the current state of checkboxes, etc. The jpg screenshots, on the other hand, are a picture of what the browser actually rendered. As for why the HTML versions wouldn't be loading the CSS, take a look at the source of the file and make sure a <base> element is correctly being injected into the <head> element of the page.

Upvotes: 1

Related Questions