Search⌘ K
AI Features

Running Tests: Providing Support for JavaScript

Explore how to enable JavaScript testing support in Dockerized Rails applications by configuring Capybara with Selenium Chrome. Understand running Chrome inside a Docker container using Selenium's standalone image. This lesson guides you to perform effective system tests involving JavaScript behavior within your Rails app.

Running tests that rely on JavaScript

OK, let’s take this up a notch. Setting up testing with JavaScript support is not going to be so straightforward with Docker. But you are ready to handle it.

Imagine that we have an enhanced version of our /welcome page that has extra behavior that only works with JavaScript enabled. In fact, when functioning correctly, this JavaScript literally adds the message “ENHANCED!” on the page.

Modify index.html.erb

Here is a rather crude implementation in app/views/welcome/index.html.erb:

<% content_for :head do %>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded",function(){
document.getElementsByTagName('h1')[0].append(' ENHANCED!');
});
</script>
<% end %>
<h1>This page has been viewed <%= pluralize(@page_hits, 'time') %>!</h1>

Modify application.html.erb

We also need a tweak to app/views/layouts/application.html.erb to make this work:

<!DOCTYPE html>
<html>
<head>
<title>Myapp</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application',
media: 'all',
'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= yield :head %>
</head>
<body>
<%= yield %>
</body>
</html>

Adding scenario to test JavaScript

...