Question

我正在使用真正漂亮的MagicSuggest库。

基本用法示例：here

如您所见，一旦您在所选的input中初始化魔术建议，它会附加预先修复div的新class个。

为了显示可能的选择选项，需要单击下拉图标，Magic Suggest指示该图标为class="ms-trigger"。显示的下拉列表为class="ms-res-ctn"，其中每个选项都有class="ms-res-item"。

我正在测试每当我点击class="ms-res-item"时，它会被添加到输入中，然后通过ajax更新我的模型（尽管这是另一个主题）。

我无法理解的是：

#Somewhere in my test
expect(page).to have_css('div.ms-res-item') #<-- This WORKS

expect(page).to have_xpath('.//div[@class="ms-res-item"]') #<- This DOESNT

我确定'div > .ms-res-item'已存在，我只是不知道为什么have_xpath或find(:xpath,...)无法找到它，而have_css可以找到它。

**更新：**这些是我在检查DOM时看到的选项

<div class="ms-res-item ms-res-item-active" data-json={"id":"paris","name":"paris"}>
<div class="ms-res-item" data-json={"id":"newyork","name":"newyork"}>

Answer 1

我认为你需要selenium来测试Rspec中的JS功能 1）所以安装宝石＆＃39; selenium-webdriver＆＃39;，＆＃39;〜＆gt; 2.42.0＆＃39 ;.捆绑。
2）如果您对测试有验证，您还需要安装gem＆＃39; database_cleaner＆＃39;，＆＃39;〜＆gt; 1.3.0＆＃39 ;.
如果你需要database_cleaner，你需要在spec helper中设置config.use_transactional_fixtures = false，并在你的规范支持文件中有一个如下所示的文件：https://gist.github.com/EvanTedesco/e2232e09cd16bb2faab4。

3）在阻止之后（或你使用的场景）你需要js：true ex：

it "does supercool stuff", js:true do.  
end

4）利润。

Answer 2

添加到DOM元素的CSS类名称是动态的，因此您有时会得到以下内容：

<div class="ms-res-item " data-json="{&quot;id&quot;:&quot;New York&quot;,&quot;name&quot;:&quot;New York&quot;}">New York</div>

现在，当你这样做时：

expect(page).to have_xpath('.//div[@class="ms-res-item"]')

它会在"ms-res-item"属性中查找确切的值class。正如您所看到的那样，这不是真的，因为该值只是被解析为字符串而"ms-res-item "！= "ms-res-item"

所以2个选项：

1 /它是一个开源项目。您可以提交一个请求以清除类defs（或者更好，然后自己执行，然后请求合并请求）。

2 /您可以将代码更改为expect(page).to have_xpath('.//div[contains(@class,"ms-res-item")]')

Rspec，have_xpath vs have_css过滤在DOM中搜索

2 个答案: