Можно ли взаимодействовать со скрытыми элементами с помощью капибары?

У меня есть поле с файлом 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
Другие вопросы по тегам