Question

升级（Rails 4.2-> 5.2）和Capybara（2.x至3.10.1）后，相当简单的规范失败了。

我认为这可能与.hover的使用有关，以使隐藏元素出现在鼠标悬停时，但我可能是错的吗？！？

在“ expect（…）”之前手动暂停驱动程序时，出现“ 1”气泡。但是，我不确定Capybara的.hover是否在规范中起作用。还有其他方法吗？

RSpec：

scenario 'changes counter' do
  close_modal type: :image

  find('editable-section:nth-child(1) li.photo:nth-child(1)').hover

  save_and_open_page # <- `1` is visible on the page (see HTML below)

  within 'editable-section:nth-child(1) li.photo:nth-child(1)' do
    expect(page).to have_css '.comment-count', text: '1'
  end
end

失败：

  1) Comment creation for image changes counter
     Failure/Error: expect(page).to have_css '.comment-count', text: '1'
       expected to find visible css ".comment-count" with text "1" within #<Capybara::Node::Element tag="li" path="/HTML/BODY/DIV[2]/SECTION/DIV/EDITABLE-SECTION[1]/DIV/DIV/DIV/SECTION/UL/LI"> but there were no matches. Also found "", which matched the selector but not all filters.

它甚至没有回应：

pry> expect(page).to have_css('.comment-count')
RSpec::Expectations::ExpectationNotMetError: expected to find visible css ".comment-count" but there were no matches. Also found "", "", "", which matched the selector but not all filters.

Chrome的HTML在expect明确显示.comment-count之前就暂停了：

<ul attachments="section.attachments" class="collage ng-scope ng-isolate-scope" image-collage="" ng-if="isDisplaying">
  <!-- ngRepeat: attachment in section.attachments -->
  <li class="photo ng-scope" ng-repeat="attachment in section.attachments" style="width: 299px; height: 300px; margin-bottom: 9.6px; margin-right: 0px; display: inline-block; vertical-align: bottom; overflow: hidden; opacity: 1;">
    <div class="meta-indicator">
      <div class="comment-count">
        <i class="fa fa-comment"></i>
        <span ng-bind="attachment.commentsCount" class="ng-binding">1</span>
      </div>
    </div>
    <a class="image-wrapper" href="">
      <img ng-click="openModal(attachment)" ng-src="https://d545dpp7432ym.cloudfront.net/images/medium/test-image.jpg" role="button" tabindex="0" src="https://d545dpp7432ym.cloudfront.net/images/medium/test-image.jpg" style="width: 299px; height: 300px;">
    </a>
  </li>
  <!-- end ngRepeat: attachment in section.attachments -->
</ul>

CSS（超薄）：

  ul.collage(image-collage attachments="section.attachments" ng-if="isDisabled")
    li.photo ng-repeat="attachment in section.attachments"
      .meta-indicator
        .comment-count
          i.fa.fa-comment
          span ng-bind="attachment.commentsCount"

      a.image-wrapper href=""
        img(
          ng-src="{{ attachment.mediaFile.previewUrl('medium') }}"
        )

  ul.collage(image-collage attachments="section.attachments" ng-if="isDisplaying")
    li.photo ng-repeat="attachment in section.attachments"
      .meta-indicator
        .comment-count
          i.fa.fa-comment
          span ng-bind="attachment.commentsCount"

      a.image-wrapper href=""
        img(
          ng-src="{{ attachment.mediaFile.previewUrl('medium') }}"
          ng-click="openModal(attachment)"
        )

修改：添加Chrome开发人员检查

在find('...').hover元素可见但不显示元素后停止测试会发生什么情况。如果我此时手动将鼠标悬停或强制使用:hover（如图中所示），则测试会立即进行并通过。

它正在查找元素，因为用.hover替换.click会打开模态。关于.hover的某事不起作用。还有其他自动化:hover事件的方式吗？

水豚无法拾取隐藏的元素

0 个答案: