Можно ли взаимодействовать со скрытыми элементами с помощью капибары?
У меня есть поле с файлом opacity: 0
и перекрывает фальшивую кнопку. Это распространенная техника CSS, которая имитирует своего рода "кнопку загрузки", которая последовательно отображается в разных браузерах.
Капибара не позволяет мне звонить attach_file
на этом входе. Ошибка Selenium::WebDriver::Error::ElementNotVisibleError: Element is not currently visible and so may not be interacted with
,
Кто-нибудь знает, как заставить капибару взаимодействовать с невидимыми элементами?
Ответ до сих пор остается без ответа, но я нашел обходной путь. Ничего умного, просто сделать элемент видимым с помощью простого скрипта
page.execute_script %Q{
$('#photos').css({opacity: 1, transform: 'none'});
}
Я выкладываю это для записи.
7 ответов
Вы можете взаимодействовать со скрытыми элементами, используя visible: false
недвижимость в Капибара.
Если вы хотите нажать на скрытый элемент, используйте:
find("#photos", visible: false).click
Не использовать click_button('#photo')
непосредственно
Автор Capybara рекомендует установитьCapybara.ignore_hidden_elements
непосредственно перед тем, как увидеть невидимый элемент, а затем сбросить его:
Capybara.ignore_hidden_elements = false
click_button 'my invisible button'
Capybara.ignore_hidden_elements = true
В общем, взаимодействие с невидимыми элементами не должно быть возможным при использовании Capybara (вы можете найти их, используя visible: false/hidden
вариант в большинстве искателей, но на самом деле не делать с ними ничего). Тем не менее, ввод файла является особым случаем из-за того, как часто скрывают элемент и из-за ограничений безопасности, нет другого способа фактически добавить файл, взаимодействуя с видимыми элементами страниц. Из-за этого attach_file
имеет make_visible
опция, которую можно использовать, чтобы Capybara сделал элемент видимым, прикрепил файл и затем сбросил CSS к исходным настройкам.
attach_file('photos', file_path, make_visible: true)
Miquel, спасибо за работу.
У меня есть похожая проблема для взаимодействия со скрытым вводом файлов при привязке C# для Selenium Webdriver 2.35 и Firefox 24. Чтобы сделать выбор файлов работающим, сделали похожую хитрость:
((IJavaScriptExecutor)webdriver).ExecuteScript("$('#fileUploadInput').css({opacity: 1, transform: 'none'});");
IWebElement e = webdriver.FindElement(By.CssSelector("input#fileUploadInput")));
e.SendKeys("c:\\temp\\inputfile.txt");
Я закончил тем, что решил другой путь.
execute_script()
мне было трудно (это заморозило бы выполнение теста в FireFox), вот что я сделал:
У меня уже был соответствующий файл JavaScript. Я добавил следующее
<% if ENV["RAILS_ENV"] == "test" %>
$('#photos').show()
<% end %>
Я также должен был добавить .erb
в мой файл JavaScript для правильной обработки активов Rails.
И в моем тестовом файле я уже настраивал ENV["RAILS_ENV"] = "test"
Таким образом, я мог просто вывести из строя пользовательский интерфейс для тестирования, и в то же время сохранить внешний вид для производства.
Если скрытый элемент вложен в видимый родительский элемент (например, скрытый ввод внутри видимой метки), вместо этого вы можете щелкнуть родительский элемент. Если вы все еще хотите найти вход по идентификатору, вы можете перейти к родителю следующим образом:
find('#hidden_input').find(:xpath, '..').click
Я сделал это таким образом с элементами, которые имеют стиль CSS display:none;
задавать:
page.execute_script("$('.all-hidden-elements').show();");
all('.all-hidden-elements').first.click