Question

我正在通过ChromeDriver与Cucumber，Siteprism和Capybara一起运行Rails5.x。除...以外，大多数事情都可以工作。

我有一点点的javascript来响应事件来更改元素上的类。但是水豚从来没有看到这种变化。最初加载页面时，它只会看到元素具有的类。

使用Chrome并调试我的Cucumber步骤，我可以看到该元素具有新类，但Capybara没有看到它。

这可能是其他人遇到并解决的问题，尽管我找不到正确的主题标题。

示例咖啡脚本

$(document).on('focus', 'tbody#item-entry > tr > td > input', (e) ->
 $(@).closest('tr').addClass('focused-row')
 $(@).closest('td').addClass('focused-cell')
 )

触发焦点事件后的示例html

<tr class="focused-row">
 <td>ignore this </td>
</tr>

目的是更改包含具有焦点的输入元素的行的背景颜色。可以。

但是Capybara无法看到该类，但是可以看到页面加载时添加的任何类。例如

  expect(siteprism_stuff.root_element['class']).to match(/focused-row/)

忽略SitePrism的内容，只是获得正确的元素。 root_element是dom节点的Capybara类。

现在，我知道它正在获取正确的Capybara元素，因为如果我更改视图以将内容放入类中的每一行，那么它将完全正常。它看不到通过Coffeescript添加的任何新类。尽管它在Chrome检查器中可见，但可以根据需要更改焦点行的背景颜色。

Answer 1

您要指定一个CSS结尾的属性选择器（$ =）

input[class$='form-control']

由于您感兴趣的元素的类属性

<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="universitiesTable">

不以'form-control'结尾不正确。如果您继续按照自己的方式进行操作，则可能只想使用普通的CSS类选择器input.form-control。以下任一选项均应找到搜索字段并填写您要填写的数据。

fill_in 'Search:', with: string
fill_in type: 'search', with: string
find(:field, type: 'search').set(string)
find('input.form-control').set(string)

Answer 2

注意：关于在测试模式下是否在检查器中看到该类，以及在运行测试时线条颜色是否正在更改（或者是否仅在开发模式下才看到），您的问题仍不清楚）-此答案假设JS实际上正在测试模式下运行，并且您在测试运行时看到行颜色发生了变化。

您没有显示您实际上是如何触发焦点事件的，但是我假设您单击的是元素。使用Capybara时要了解的是浏览器是异步工作的，因此，当完成click之类的操作时，该单击触发的动作不一定已经完成。因此，无论何时对页面元素进行任何类型的期望，都应该始终使用Capybara提供的匹配器，而不是RSpec提供的基本匹配器。水豚提供的匹配器包括等待/重试行为，以处理与浏览器打交道的异步特性。在这种情况下，假设siteprism_stuff.root_element是row元素，那么您可能会做类似

的操作

expect(siteprism_stuff.root_element).to match_css('.focused-row')

或者根据您的站点棱镜页面对象的确切设置方式，您可以将class选项传递给站点棱镜存在性检查器

# `page_section` and `have_row` would need to be replaced with whatever is correct for your site prism page object
expect(page_section).to have_row(class: ['.focused-row'])

水豚未见Javascript对DOM进行的更新

2 个答案: