Капибара не может уловить скрытый элемент - PullRequest
Новая
       11

Капибара не может уловить скрытый элемент

0 голосов
/ 11 ноября 2018

Довольно простая спецификация не работает после обновления (Rails 4.2 -> 5.2) и Capybara (2.x до 3.10.1).

Я думаю, что это может быть связано с тем, как .hover используется, чтобы скрытый элемент появлялся при наведении мыши, но я могу ошибаться?!?

Пузырь «1» появляется, когда драйвер вручную ставится на паузу прямо перед «ожидаем (…)». Тем не менее, я не уверен, что .hover Capybara работает в спецификации. Есть ли другой способ сделать это?

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.

HTML из Chrome остановился прямо перед тем, как 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 dev

Что произойдет, если я остановлю тест после find('...').hover, элемент виден, но элемент не обнаружен. Если я вручную наведу указатель мыши на эту точку или нажмем :hover (как видно на рисунке), то тест немедленно начнется и пройдет.

Он находит элемент, так как замена .hover на .click открывает модал. Что-то про .hover не работает. Это какой-то другой способ автоматизации :hover события?

enter image description here

...