使用 Quilljs 和 capybara-webkit 进行 Capybara 测试

Posted 2023-02-19

【中文标题】使用 Quilljs 和 capybara-webkit 进行 Capybara 测试

【英文标题】：Capybara testing with Quilljs and capybara-webkit

【发布时间】：2017-05-18 05:48:50

【问题描述】：

我正在尝试使用 RSpec 功能测试来测试我的 rails 应用程序。我将 Quilljs 用于富文本，只是想测试创建帖子的能力。

# 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 引导我尝试上述方法，但运行此场景时，即使使用 :js 标记，Quill 似乎也没有创建 contenteditable div。

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

更新： 我开始意识到我需要像下面那样允许 Quill 的外部 URL，但它仍然无法正常工作。

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

更新 2：我让我的应用程序 JS 异步加载，这导致了问题。把它改成这个就行了！

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

【参考方案1】：

两件事解决了我的问题：

允许外部 Quill URL

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

在测试期间同步加载应用程序 JS

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

【参考方案2】：

只是想注意，当您使用时，所有这些额外的调整都是不必要的 Selenium 驱动程序（Chrome 无头或非无头）