Capybara :: ElementNotFound：无法找到可见的选择框

Question

我有一个简单的引导程序模式，当用户单击链接时，该模式会显示带有下拉菜单和提交按钮的表单。我尝试在Rspec功能测试中使用Capybara从下拉菜单中选择选项，但是找不到下拉菜单。

功能规格：

// client-side js
// run by the browser each time your view template referencing it is loaded

console.log('hello world :o');

let arrPfcCases = [];

// define variables that reference elements on our page

const tablePfcCases = document.getElementById("tablePfcCases");
const formNewPfcCase = document.forms[0];
const caseTitle = formNewPfcCase.elements['caseTitle'];
const caseMOI = formNewPfcCase.elements['caseMOI'];
const caseInjuries = formNewPfcCase.elements['caseInjuries'];

// a helper function to call when our request for case is done
const  getPfcCaseListener = function() {
  // parse our response to convert to JSON
  arrPfcCases = JSON.parse(this.responseText);

  // iterate through every case and add it to our page
  for (var i = 0; i = arrPfcCases.length-1;i++) {
    appendNewCase(arrPfcCases[i]);
  };
}

// request the dreams from our app's sqlite database
const pfcCaseRequest = new XMLHttpRequest();
pfcCaseRequest.onload = getPfcCaseListener;
pfcCaseRequest.open('get', '/getDreams');
pfcCaseRequest.send();

// a helper function that creates a list item for a given dream
const appendNewCase = function(pfcCase) {
  if (pfcCase != null) {
  tablePfcCases.insertRow();
  let newTr = document.createElement('tr');
  for (var i = 0; i = pfcCase.length - 1; i++) {
    let newTd = document.createElement('td');
    let newText = document.createTextNode(i.value);
    console.log(i.value);
    newTd.appendChild(newText);
    newTr.appendChild(newTd);
  }

  tablePfcCases.appendChild(newTr);
  }
}

// listen for the form to be submitted and add a new dream when it is
formNewPfcCase.onsubmit = function(event) {
  // stop our form submission from refreshing the page
  event.preventDefault();
  let newPfcCase = [caseTitle, caseMOI, caseInjuries];
  // get dream value and add it to the list
  arrPfcCases.push(newPfcCase);
  appendNewCase(newPfcCase);

  // reset form 
  formNewPfcCase.reset;

};

页面上的模式：

scenario "User searches records" do
    visit my_records_path

    click_link 'Search Records'

    within('#practiceSearchModal') do
      select('Pennsylvania', from: '#state_search')
      click_on('Submit')
    end
end

这是我在水豚上遇到的错误，找不到ID为state_search的选择菜单：

<div class="modal fade in" id="practiceSearchModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" style="display: block;"><div class="modal-backdrop fade in" style="height: 654px;"></div>
  <div class="modal-dialog" style="width: 750px;">
    <div class="modal-content">

      <select name="state" id="state_search" class="form-control">
        <option value="">Select</option>
         <option value="Pennsylvania">Pennsylvania</option>
        <option value="New York">New York</option>
      </select>



    </div>
  </div>
</div>

但是我看到页面上的元素：

为什么水豚单击链接后找不到在屏幕上看到的元素？

Answer 1

from选项使用id而不是CSS选择器-

select('Pennsylvania', from: ‘state_search')

Answer 2

有时某些js插件可能会将visible: hidden添加到您的选择框中。您可以将选项visible: :all添加到select以获得帮助。

Answer 3

试试这个：

find("#state_search", visible: false).find("option[value='Pennsylvania']").click

或在范围内：

within '#state_search', visible: false do
    find("option[value='Pennsylvania']").click
end