Unable to click bootstrap modal dialog buttons using Poltergeist

Question

When I click on a button, a bootstrap modal popup displays. I tried to click on the OK or cancel button using Poltergeist functions as below, but none worked. Either the functions doesn't work or clicks outside.

<div class="modal-footer">
<a class="btn cancel" data-dismiss="modal" href="#">Cancel</a>
<a class="btn proceed btn-primary" href="#">OK</a>
</div>

click_link "Release"
page.driver.render('ReleaseOKCANCEL.jpg', :full =>true)

On Clicking 'release', there will be a bootstrap modal with OK and cancel buttons, which can be verified with the screenshots. Trying to click on OK button with the below commands.

page.find('.btn.proceed.btn-primary').trigger('click')
click_link('OK')
page.execute_script('$(".btn.proceed.btn-primary").trigger("click")')
page.execute_script('$(".btn.proceed.btn-primary").trigger("hover").trigger("cli‌ck")')
page.all(".//*[@id='confirmation_dialog']/div[3]/a[2]").first.click
click_button "OK"
click_on "OK"
page.dismiss_confirm do page.find('.btn.proceed.btn-primary').click end
page.find('.modal').find('.modal-footer').find('.btn.proceed.btn-primary').trigg‌er('click')

But nothing works. There will be a status change in the application after clicking on OK button. But that doesn't happen.

1) page.find('.modal').find('.modal-footer').find('.btn.proceed.btn-primary').trigger('click') 2) page.find('.btn.proceed.btn-primary').trigger('click') 3) click_link('OK') 4) page.execute_script('$(".btn.proceed.btn-primary").trigger("click")') 5) page.execute_script('$(".btn.proceed.btn-primary").trigger("hover").trigger("click")') 6) page.all(".//*[@id='confirmation_dialog']/div[3]/a[2]").first.click 7) click_button "OK" 8) click_on "OK" 9) page.dismiss_confirm do page.find('.btn.proceed.btn-primary').click end — anitha
Versions - Poltergeist - 1.5.1 Capybara- 2.4.4 Ruby - 1.9.3 I'm running via rspec "File name with path" — anitha
and you are sure that you can actually find those elements ? I had similar problem and it turned out that deep down stack of divs the modal was in iframe which is another DOM context (to put it that way) — 4rlekin
Ya visible, I was able to view it through page.driver.render(@screenshotLoc + 'page.jpg', :full =>true) — anitha
thats not what i asked, are you able to reach it via jquery selectors? — 4rlekin

Ben Hawker Ben Hawker · Accepted Answer · 2015-11-12T08:50:50

I have been writing a bunch of feature/integration specs the last few weeks - and have been targeting alot of fields and buttons within bootstrap modals (although class names have been changed from the bootstrap defaults).

Here a test that works great for me with a vanilla bootstrap modal:

 it "displays edit profile page pre-filled for editing after successful form submission" do
    click_link "List a Property"

    within("form#new_user") do
      fill_in "user[login]", with: user.username
      fill_in "user[password]", with: user.password
      fill_in "user[email]", with: user.email
      fill_in "user[first_name]", with: user.first_name
      fill_in "user[last_name]", with: user.last_name
      fill_in "user[phone_number]", with: user.phone_number
      click_button "List My Properties"
    end

    expect(current_path).to eq account_path(:profile)
    within(".profile-name") { expect(page).to have_content user.username }
    find_field("user[first_name]").value.should eq user.first_name
  end

Use of the within( ) method within Capybara usually saves alot of targeting issues that I would otherwise encounter.

I should also note that all tests are js enabled with the following line:

describe "User", js: :true do

Unable to click bootstrap modal dialog buttons using Poltergeist

2 Answers