Capybara / rspec在页面上找到角度链接的问题

Question

我和一些同学正在建立AirBNB的Rails / Angular克隆，我似乎遇到一些rspec / capybara问题！

我有以下测试...

context 'users are able to add a space' do scenario 'adding a space' do visit '/' click_link 'Post a space' fill_in 'Name', with: 'my hotel' fill_in 'Location', with: 'London' fill_in 'Price', with: '100' attach_file "Image", "spec/asset_specs/photo/Elephant.jpg" fill_in 'Details', with: 'single bedroom with ensuite' fill_in 'Available from', with: Date.new(2016,03,15) fill_in 'Available to', with: Date.new(2016,03,15) click_button 'Create Space' within 'ul#spaces' do expect(page).to have_content 'Location: London' expect(page.find('.space_thumb')['src']).to have_content 'Elephant.jpg' end end end end

我的看法如下...

 <input id='search' ng-model='query'></br> 
 <section ng-if='spaces == false'>
   <p>no spaces yet...</p>
 </section>

 <a ng-href='/spaces/new' id='post_space'>Post a space</a>

 <section>
   <ul id='spaces' ng-repeat='space in spaces | filter:query'>
     <li>
       <h5>{{space.name}}</h5>
       <img class='space_thumb' ng-src={{space.image_url}}/>
       <p>Location: {{space.location}}</p>
       <p>Price: {{space.price}}</p>
       <p>Details: {{space.details}}</p>
       <p>Available from: {{space.available_from}}</p>
       <p>Available to: {{space.available_to}}</p>
     </li>
   </ul>
 </section>

但是，当我使用默认驱动程序运行测试时，出现以下错误...

Capybara::ElementNotFound:
Unable to find link "Post a space"

但是，当我使用硒时，它可以工作，但是随后我检查图像src的测试却失败了，因为它返回了默认的missing.png文件。 我猜测是因为硒不允许水豚有足够的时间上传图像...

是否可以使用角度友好的驱动器，还是应该将其报废并在量角器或类似工具中进行测试...

谢谢！

Answer 1

默认的rack_test驱动程序根本不处理JS，因此在Angular站点中使用它会浪费时间（因为所有内容都是由JS驱动的）。 找不到链接的原因是链接必须具有href属性，您的标记没有href属性，但是标记在运行后由角度JS添加（因此，为什么用rack_test测试角度驱动的站点是没有用的）

对于图像测试-通过查找元素，获取src属性然后进行比较，您将禁用等待行为（因为要提取无法自动重新加载的字符串）。 相反，您应该做类似的事情

expect(page).to have_selector('.space_thumb[src$="Elephant.jpg"]')

最多可以重试Capybara.default_max_wait_time秒以匹配元素出现。 您可能需要根据实际页面中src的外观来调整css中的属性选择器的类型（例如，如果图像src具有缓存无效查询参数或其他任何内容，例如* =（包含））