Capybara testing with Quilljs and capybara-webkit

Question

I am trying to test my rails app with an RSpec feature test. I am using Quilljs for rich text and simply want to test the ability to create posts.

# erb view
<div id="post-form-container">
  <%= form_for :post, url: posts_path, html: {id: 'post-form'} do |f| %>
    <div class="form-group">
      <%= f.hidden_field :discussion_id, value: discussion.id %>
      <%= f.hidden_field :content, class: 'form-control', id: 'post-content-input' %>
      <div id="editor-container"></div>
    <%= f.button 'Post', class: 'btn btn-primary', id: 'post-button' %>
      </div>
  <% end %>
</div>

# spec
scenario 'can post in discussion', :js do
  login_as user
  visit community_group_path(community_group)
  within('form#post-form') do
    find('div[contenteditable="true"].ql-editor').send_keys 'This is a new post.'
    click_on 'Post'
  end
  expect(page).to have_content 'This is a new post.'
end

This question led me to try the above but it does not seem like Quill is creating the contenteditable div when running this scenario even with the :js tag.

Capybara::ElementNotFound:
   Unable to find css "div[contenteditable]"

Update: I have come to realize I need to allow the external URLs for Quill like below, but it's still not working.

Capybara::Webkit.configure do |config|
  config.allow_url("https://cdn.quilljs.com/*")
end

Update 2: I had my application JS loading async and that was causing issues. Changing that to this did the trick!

<%= javascript_include_tag 'application', 'data-turbolinks-track' => true, async: Rails.env.production? %>

HarlemSquirrel HarlemSquirrel · Accepted Answer · 2017-01-04T03:09:03

Two things fixed my issue:

Allow the external Quill URL

# spec/support/capybara.rb
Capybara::Webkit.configure do |config|
  config.allow_url("https://cdn.quilljs.com/*")
end

Load application JS synchronously during tests

<%# app/views/layouts/application.html.erb %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true, async: Rails.env.production? %>

Capybara testing with Quilljs and capybara-webkit

2 Answers