Ruby on rails RSpec+；前端集成测试用无头铬合金

我正在尝试测试Rails 5.1应用程序中使用Vue.js的一部分。 我遇到的问题是，例如，在生成列表时，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>

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

我试着用铬合金无头测试。我创建了以下chrome\u 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\u helper.rb中：

require 'selenium/webdriver'

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

我的RSpec测试如下所示：

<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>

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 headless解析Vue.js代码，从而在前端填充便利设施吗

---

提前谢谢

根据包装div的类名，

自定义控件自定义复选框

，我很确定这里的问题不是字段填充不正确（您可以使用

保存和打开屏幕截图

来验证，或者输出

page.html

）但是实际的html

元素在页面上实际上是不可见的（错误告诉您）。这样做可能是为了通过显示选中/未选中状态的图像为复选框提供一种奇特的样式。在这种情况下，要选中复选框，您有两个选项。第一个选项是找出用户实际需要单击什么元素来更改设置，并让水豚来完成。比如说

find(:label, 'Some amenity').click

当存在正确关联的标签元素时，更干净的解决方案是告诉

check

方法，如果需要，可以单击标签

check('Some amenity', allow_label_click: true)

如果希望在复选框/单选按钮隐藏时，

取消选中

，

取消选中

，并

选择

始终允许单击相关标签，则可以通过设置

Capybara.automatic_label_click = true

---

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

check('Some amenity', allow_label_click: true)

您可以通过以下方式解决此问题：

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

---

正确，我使用的是Bootstrap 4的

自定义复选框

，它似乎确实创建了一个输入复选框，而不是实际的

输入[type=“checkbox”]

。单击自定义复选框后，后者可能会通过Javascript进行选择。但是，我仍然无法使用您描述的方法使其工作。我将继续尝试查看是否需要选择其他内容。@DaniG2k添加为该控件生成的实际HTML，而不是vue模板，你的问题，因为它听起来像你的

标签

元素实际上可能没有正确地与checkbox关联。例如，我在问题中添加了实际生成的HTMLamenity@DaniG2k这就是你的问题--HTML ID不允许包含空格，这意味着

for

属性实际上并没有将标签链接到复选框——您希望为输入的

id

属性和label@DaniG2k这解决了你的问题吗？如果是这样，请不要忘记接受答案，这样问题就会被标记为已回答。

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