Myujth

Pretty simple spec is failing after upgrade (Rails 4.2 -> 5.2) and Capybara (2.x to 3.10.1).

I think it might have something to do with the way .hover is being used to make a hidden element appear on mouseover, but I could be wrong?!?

The "1" bubble appears when driver is manually paused right before "expect(…)" . However, I'm not sure Capybara's .hover is working in the spec. Is there any other way to do do this?

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

Failure:

 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.

It doesn't even respond to:

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.

HTML from Chrome paused right before expect shows that .comment-count is clearly there:

<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 (slim):

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

Edit: Add Chrome dev inspection

What's happening if I stop the test after find('...').hover the element is visible but the element is not revealed. If i manually hover the mouse at this point or force a :hover (as seen in image) then the test proceeds immediately and passes.

It is finding the element, as replacing .hover with .click opens the modal. Something about .hover is not working. Is that any other way to automate a :hover event?