Guide to configuring capybara-webkit for testing ajax requests and capturing screenshots containing HTML with loaded CSS and JavaScript

Having some trouble setting up capybara-webkit on my Rails 4.2.1 app. Tests are running fine, links are being clicked, and ajax calls are working, but there's one odd issue with capybara-screenshot gem. I wanted to capture html screenshots with all assets loaded for a true representation.

After taking screenshots, I noticed that I was getting both 'png' and 'html' files. When looking at the 'html' file (e.g. file:///Users/monk/dev/things/tmp/capybara/screenshot_2015-08-31-16-06-51.840.html), the CSS wasn't loading. It seemed like the asset paths were different from where the screenshot files were located...

To address this, I made changes to my test environment configuration in 'config/environments/test.rb' by adding:

config.action_controller.asset_host = "file://#{::Rails.root}/public"
config.assets.compile = true
config.assets.digest = true

The first line sets a prefix for all asset URLs on the page, the second compiles assets, and the third adds a digest hash to asset files. This helped load CSS and JS as expected in the html screenshots.

But then came a new problem - now ajax calls weren't working correctly in tests, throwing an error:

Failure/Error: Unable to find matching line from backtrace
ActionController::RoutingError:
  No route matches [GET] "/things/ajax_calculate_it"

Changing the asset_host caused all ajax calls to fail in tests. Here's an example of an ajax call on my test page:

<a class="calculable" data-remote="true" rel="nofollow" data-method="post" href="/things/ajax_calculate_it?a=5&b=48">Calculate it</a>

It seems to be using GET instead of POST. There must be a simple configuration adjustment I'm missing. Any ideas?

Answer №1

Well well well... It appears I've cracked the code all on my own.

All it took was a simple tweak:

config.action_controller.asset_host = "file://#{::Rails.root}/public"

I switched it to:

config.action_controller.asset_host = "http://localhost:3000"

And just like that, everything fell into place. Ajax calls were smooth sailing, and even the screenshots loaded flawlessly with the proper css and javascript. Victory!

Answer №2

Instead of adjusting the action_controller asset_host, which could lead to synchronization issues between test and development servers, it is recommended to set Capybara's asset host.

Capybara.asset_host = "http://localhost:3000"

By doing this, Capybara will include a base tag in saved html pages, ensuring that only those specific pages rely on the dev server being active during tests.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent the navigation bar text from being truncated

The below code snippet: <div data-role="navbar"> <ul> <li><a href="#page_1" data-transition="none">Heading 1</a></li> <li><a href="#page_2" class="ui-btn-active ui-state-persist">Heading 2</a& ...

Dynamics of Rails and the power of jQuery with ajaxStop

For my Rails 5.2 project, I have included the gems 'jquery-rails' and 'jquery-ui-rails'. I am attempting to utilize the .ajaxStop( handler ) handler as outlined in the documentation found here: https://api.jquery.com/ajaxStop/#ajaxStop ...

Issues encountered when using Vue Transition in conjunction with v-autocomplete

Attempting to conditionally display or hide a selection text field using Vue's Transition feature, but experiencing an issue where the text field appears and disappears without any transition effect. <template> <Transition v-if="is ...

Ways to Ensure the Footer Stays Beneath Your Image Gallery

After successfully keeping the footer at the bottom of other pages on my website, I'm facing a challenge with my photo gallery page. The footer stubbornly sits in the middle of the page. :( This is the HTML code for that particular page: html { ...

Resetting the state of toggle/click states in AJAX and jQuery

Currently, I am encountering a small dilemma with a .on function and AJAX in conjunction with a mobile menu. The mobile menu is located in the header of a site that relies heavily on AJAX for its content loading. This poses an issue because when an AJAX ca ...

Unable to align a 1px element with the primary border

Can you please assist me? I would like to modify the CSS markup below in order to remove the 1 pixel added extra on the active clicked tab from my UL LI Tabbed Menu. How can this be achieved? Here is a picture of the issue: HTML Markup: <div class=" ...

Determining the nth-child within a given table or container

I have various divs within a container with the same class (class="myDiv"). The positioning of these divs inside the container can vary... The goal is to style all divs with the class .myDiv as follows: the first div should have color "red" the second d ...

Mobile display exhibiting glitches in animation performance

I have implemented an animation in the provided code snippet. const logo = document.querySelector('.logo'); const buttons = document.querySelectorAll('.loadclass'); const html = document.querySelector('html') const cornerme ...

Creating fluid designs for my boxes with CSS to enhance responsiveness

I have designed my HTML file with 8 boxes that appear correctly on desktop, but when viewed on mobile devices, the columns are misaligned and shifted to the right side instead of being centered. How can I make it more responsive? See Preview Here is the ...

The flipping action will only occur on the initial card

I am working on creating a unique photo gallery that allows users to flip the picture by clicking or tapping on it. Once flipped, users will be presented with additional information about the image and a link. I have included all of my CSS, JS, and HTML be ...

Unable to adjust image opacity using jQuery

I am attempting to change the opacity of an image based on a boolean flag. The image should have reduced opacity when the var pauseDisabled = true, and return to full opacity when pauseDisabled = false. To demonstrate this, I have created a fiddle below. ...

An abundant array of options spread across numerous dropdown menus

I have been tasked by a client to do something new that I haven't done before, so I am seeking the best approach. The project involves creating a form with three dropdown menus where users can select from thousands of options. For instance: Users mu ...

Problem encountered with HTML table formatting

I am struggling to create a table in HTML Click here for image Here is the code I have tried: <table> <tr> <th class="blue" colspan="3">3</th> <th class="orange " rowspan="2">2</th> <th class="blu ...

Dynamically loading iframes with JQuery

I have implemented a jQuery script to load another URL after a successful AJAX request. $(document).ready(function() { var $loaded = $("#siteloader").data('loaded'); if($loaded == false){ $("#siteloader").load(function (){ ...

Ways to retrieve several parameters from a controller using Ajax Jquery in Codeigniter

I need to retrieve a list of images from a folder based on a specific ID. Currently, I am able to get the file names but I also require the upload path. Is there a way to obtain both sets of data using a single function? Javascript Code: listFilesOnServ ...

Find the final element that does not include a particular class

Looking for the best way to identify the last item in a list without a specific class? Learn how to write code that can check for the absence of a class name. $('ul li:last') $('ul li:not(.special)') ...

Utilize jQuery to populate tables with JSON data

After reading numerous posts on Stack Overflow regarding this topic, I have tried to distill the information I needed, but unfortunately, my code still isn't working as expected. My goal is to populate a table with data using jQuery (unless JavaScrip ...

Jquery code not responding to ajax callback

i have the following two functions defined: function populateTableData(){ jQuery('select[name="drg-select"]').change(function() { drgValue=jQuery(this).val(); url="http://localhost/ur ...

The iPhone 6 Plus's Safari browser, when in landscape mode, displays multiple tabs open at once. Additionally, when a Bootstrap modal

Encountering an issue with the bootstrap modal on iPhone Safari 6+ in landscape mode. This glitch only happens when using multiple tabs on the browser. Follow these steps to replicate the problem: 1) Visit http://getbootstrap.com/javascript/ on your iP ...

Bootstrap's (g-) gap feature seems to be malfunctioning, unfortunately

Even though I followed the grid structure from Bootstrap reference, my code doesn't seem to have horizontal gaps, only vertical ones. I know it's not about the version because when I copy and paste the sample code into my HTML file, that code sti ...