Капибара не видит обновлений DOM от Javascript

Question

Я запускаю Rails 5.x, с помощью Cucumber, Siteprism и Capybara через chromedriver.Большинство вещей работает, кроме ..

У меня есть небольшой кусочек JavaScript, который изменяет класс элемента в ответ на событие.Но Капибара никогда не видит изменений.Он только когда-либо видит класс, который элемент имеет, когда страница первоначально загружена.

Используя Chrome и отлаживая мои шаги Cucumber, я вижу, что у элемента есть новый класс, но Capybara его не видит.

Это должно быть проблемой, с которой сталкивались и решали другие люди, хотя я не могу найти правильный заголовок темы.

пример coffeescript

$(document).on('focus', 'tbody#item-entry > tr > td > input', (e) ->
 $(@).closest('tr').addClass('focused-row')
 $(@).closest('td').addClass('focused-cell')
 )

пример html после события фокусабыл запущен

<tr class="focused-row">
 <td>ignore this </td>
</tr>

Цель состоит в том, чтобы изменить цвет фона строки, содержащей элемент ввода, имеющий фокус.Это работает.

Но Capybara не может видеть класс, но он может видеть любые классы, добавленные при загрузке страницы.например,

  expect(siteprism_stuff.root_element['class']).to match(/focused-row/)

Игнорировать материал SitePrism, который просто получает нужный элемент.root_element - это класс Capybara для узла dom.

Теперь я знаю, что он получает правильный элемент Capybara, потому что, если я изменю свое мнение, чтобы поместить вещи в класс для каждой строки, то он увидит, что это совершенно нормально.Чего он не видит, так это любого нового класса, добавленного через Coffeescript.Хотя это видно в Инспекторе Chrome и при необходимости изменяет цвет фона выделенной строки.

Answer 1

Примечание. Ваш вопрос по-прежнему неясен: вы видите, добавлен ли класс в инспекторе в режиме тестирования, и изменяется ли цвет линии во время выполнения тестов (или вы видите это только в режиме разработки).) - В этом ответе предполагается, что JS на самом деле работает в тестовом режиме, и вы видите изменение цвета линии во время выполнения тестов.

Вы не показываете, как вы на самом деле вызываете событие фокуса, но яПредположим, вы нажимаете на элемент.При работе с Capybara важно понимать, что браузер работает асинхронно, поэтому, когда было выполнено что-то вроде click, действия, вызванные этим щелчком, еще не обязательно выполнялись.По этой причине при выполнении любого типа ожидания с элементами страницы вы всегда должны использовать сопоставления, предоставляемые Capybara, а не базовые сопоставления, предоставляемые RSpec.Средства сравнения, предоставляемые Capybara, включают в себя поведение ожидания / повторной попытки для обработки асинхронного характера работы с браузером.В этом случае, предполагая, что siteprism_stuff.root_element является элементом строки, вы можете сделать что-то вроде

expect(siteprism_stuff.root_element).to match_css('.focused-row')

или, в зависимости от того, как именно настроены объекты вашей страницы siteprism, вы можете передать параметр class в siteprism.проверка существования

# `page_section` and `have_row` would need to be replaced with whatever is correct for your site prism page object
expect(page_section).to have_row(class: ['.focused-row']) 

Answer 2

Вы указываете «заканчивается» селектором атрибута CSS ($ =)

input[class$='form-control'] 

, который, поскольку атрибут класса для интересующего вас элемента

<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="universitiesTable">

не заканчивается с помощью 'form-control' - не соответствует.Вы, вероятно, просто хотите использовать обычный селектор классов CSS input.form-control, если продолжаете делать то же, что и вы.Любой из следующих параметров должен найти поле поиска и заполнить данные, которые вы пытаетесь заполнить.

fill_in 'Search:', with: string
fill_in type: 'search', with: string
find(:field, type: 'search').set(string)
find('input.form-control').set(string)