Question

我试图测试使用Vue.js的Rails 5.1应用程序的一部分。我遇到的问题是，例如，在生成列表时，Vue代码如下所示：

<div v-for="(amenity, idx) in amenities">
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" v-bind:id="amenity.text" v-model="checkedAmenities[idx]" :value="amenity.id">
    <label class="custom-control-label" v-bind="{ 'for': amenity.text }" >{{ amenity.text }}</label>
  </div>
</div>

并且评估后生成的实际HTML如下所示：

<div>
  <div class="custom-control custom-checkbox">
    <input id="Air conditioning" class="custom-control-input" value="0" type="checkbox"> <label for="Air conditioning" class="custom-control-label">Air conditioning</label>
  </div>
</div>

我最终在我的规范中收到此错误：

Capybara::ElementNotFound:
  Unable to find visible checkbox "Some amenity" that is not disabled

这是因为便利设施是在Vue组件中定义的，但在我相信的JS解释器解析它们之前不会在HTML中输出。

我正在尝试使用Chrome Headless进行测试。我创建了以下 chrome_driver.rb 文件：

Capybara.register_driver(:headless_chrome) do |app|
  capabilities = Selenium::WebDriver::Remote::Capabilities.chrome(
    chromeOptions: { args: %w[headless disable-gpu] }
  )

  Capybara::Selenium::Driver.new(
    app,
    browser: :chrome,
    desired_capabilities: capabilities
  )
end

和我的 rails_helper.rb ：

require 'selenium/webdriver'

RSpec.configure do |config|
  # ...
  Capybara.javascript_driver = :headless_chrome
end

我的RSpec测试看起来像这样：

scenario 'successfully', js: true do
  # do some things here..

  check('Some amenity')
  click_button 'Next'
  click_link 'Create Listing'

  expect(page).to have_content 'Listing was created successfully!'
end

但如上所述，我得到的错误是：

Capybara::ElementNotFound:
  Unable to find visible checkbox "Some amenity" that is not disabled

我知道如何让Chrome无头解析Vue.js代码，以便在前端填充设施？

提前致谢!!

Answer 1

根据包装div的类名custom-control custom-checkbox来判断，我非常肯定这里的问题不是字段没有正确填充（你可以使用{ {1}}验证，或输出save_and_open_screenshot），而不是实际的html page.html元素在页面上实际不可见（正如错误告诉你的那样）。这可能是为了通过显示已选中/未选中状态的图像为复选框提供精美样式。要检查该情况下的复选框，您有几个选项。第一个选项是确定用户实际需要点击哪些元素来更改设置，并让Capybara这样做。例如

<input type="checkbox" ...>

当有正确关联的标签元素时，清洁解决方案是告诉find(:label, 'Some amenity').click方法，如果需要，可以单击标签

check

如果您希望始终允许check('Some amenity', allow_label_click: true)，check和uncheck在隐藏复选框/单选按钮时单击关联的标签，则可以通过设置< / p>

choose

Answer 2

如果您的标签包含链接，则会单击该链接，而不是复选框本身：

check('Some amenity', allow_label_click: true)

您可以通过以下方式解决它：

check('Some amenity', visible: :hidden)

RSpec +无头Chrome用于前端集成测试

2 个答案: