使用 Cucumber 和 Capybara 集成测试 Backbone.js 应用程序答案

【问题标题】：Integration Testing a Backbone.js application with Cucumber and Capybara使用 Cucumber 和 Capybara 集成测试 Backbone.js 应用程序
【发布时间】：2012-10-21 09:29:18
【问题描述】：

我正在尝试使用 Cucumber、capybara、capybara-webkit、selenium-webdriver、rspec 和 jasmine 测试在 Rails 3.2.8 之上运行的 Backbone 应用程序。我使用 eco 作为主干模板的模板引擎。

我的问题是当我使用@javascript 标签运行场景时，无论是使用 capybara-webkit 还是 selenium，显示的页面都不包含所有模型属性数据。

这是场景：

@javascript
Scenario : first scenario
     Given There is Model with "name" as name and "What is it about ?" as associated questions
     When I want to fill the questionnaire
     Then I should be on the SPA form
     And I should see "name"
     And I should see "What is it about?"

场景在“我应该看到'它是关于什么的？'”步骤中失败，页面没有显示问题，但它显示了“名称” 我使用 console.log 在我的主干代码中放置了几个调试语句，我可以看到模型的所有属性都是正确的。此外，它可以在现场正常工作

模板如下所示：'show.jst.eco'

<p class="text-info"><%= @model.name %></p>

<form id="quidget-form" class="form-vertical">
  <% for question in @model.questions: %>
    <div class="issue_field">
      <label class="string optional control-label"><%= question.question.question_text %></label>
      <div class="control-group text">
        <textarea class="text answer" name="question-<%= question.question.id %>" id="question_<%= question.question.id %>" data-question="<%= question.question.question_text %>" rows="3">
        </textarea>
      </div>
    </div>
  <% end %>

  <div class="controls">
    <input type="submit" value="Additional Informations" id="quidget-step-one" class="btn btn-success">

文本区域显示，但不显示上面带有问题文本的标签

有什么想法吗？我想看看这个通过，这样我就可以用更多的步骤测试更复杂的逻辑。

谢谢

【问题讨论】：

这可能不是您希望的答案，但根据我的经验，webkit 和 selenium 不太可靠。它们也不会让您免于跨浏览器测试。您可以尝试调试它，但您可能会花更多的时间在它上面。我通常使用 jasmine 进行 JS 单元测试，然后手动检查跨浏览器兼容性。

标签： ruby-on-rails backbone.js cucumber capybara

【解决方案1】：

我也一直在对这类事情进行一些研究。其中大部分都集中在 Ember.js 而不是 Backbone，但 Pamela Fox 刚刚写了一篇关于为 Coursera 测试 Backbone.js 前端的博客文章，这可能会有所帮助http://blog.pamelafox.org/2013/06/testing-backbone-frontends.html 另外，您是否尝试过以与您相同的方式使用 capybara 进行测试有:js => true 的通用rails 应用程序吗？可能值得一试。

【讨论】：