Capybara cannot find a link on a modal which changes on button press

Question

I have a rails project using rspec 3.4.0 capybara 2.6.2 and capybara-webkit 1.8.0.

I am writing a feature test for a flow on my site which looks like the following:

scenario "Buyer creates a seller profile", :js => true do
   click_link("SELL ON MYSITE",match: :first)
   expect(page).to have_text("Reach thousands of customers in your area")
   click_link("Create an Activity",match: :first)
   expect(current_path).to eql (new_seller_profile_path)

    fill_in "seller_profile[business_name]", :with => "Test company"
    fill_in "seller_profile[business_email]", :with => "test@email.com"
    fill_in "seller_profile[business_phone_number]", :with => "07771330510"
    fill_in "seller_profile[business_description]", :with => "This is a test company"

    find('label[for="social"]').click


    find("#facebook-placeholder").click

    fill_in "seller_profile[business_facebook_url]", :with => "https://www.facebook.com/test"

    click_button("CREATE AN ACTIVITY")

------this button opens a modal after the page changes --------

    fill_in "seller_profile[requested_postcode]", :with => "EH21 8PB"

    click_button("Submit")

    save_and_open_screenshot

------this is where it goes wrong-------

    click_link("Continue")

    expect(page).to have_text("Choose the type of activity that you want to create")

 end

The click_link continue fails with error:

Failure/Error: click_link("Continue")

     Capybara::ElementNotFound:
       Unable to find link "Continue"

The link actually does exist - when you click on the submit button some javascript executes which changes the contents of the modal to display some new text and a new button. However for some reason click_link does not wait or look in the modal, it fails straight away.

Having added a save_and_open_screenshot call we can see this situation as the modal javascript has yet to execute as we can still see the submit button :

Interestingly the mouse seems to not be on the Submit button as it should have just clicked it?

How can I make the click_link wait until the continue button appears?!

This is the javascript which executes on press of 'submit' added to the modal which changes it:

$('#gate .modal-body .intro').text('Congratulations, we are available in your location, please continue to create your activity.');

$('#gate .modal-footer').append('<a class="btn btn-lg btn-primary" href="/events/new/">Continue</a>');

Have you tried something like [this](http://stackoverflow.com/a/23555725/634576)? — Dave Schweisguth, Apr 20 '16 at 13:06
Is the text on the button "Continue" or is it like the submit button all uppercase "CONTINUE", possibly through CSS text-transform? — Thomas Walpole, Apr 20 '16 at 14:38
Visually its all uppercase, in dom - it is 'Continue'. It is uppercased as per your thoughts of CSS text-transform — RenegadeAndy, Apr 20 '16 at 14:43
Dave I have tried that...its almost as if the press of the submit button doesn't actually execute the javascript, so the modal never actually changes!? — RenegadeAndy, Apr 20 '16 at 14:50
Add a sleep 5 before save_and_open_screenshot to see if the change does happen, if not check for JS errors, sometimes errors in one file in dev mode don't break things, but will in test mode when all the JS gets concatenated — Thomas Walpole, Apr 20 '16 at 14:50
Ive added sleep - no change. There are no JS errors in dev. Not sure how to test for errors in the JS in test? Interestingly the mouse seems to be in the wrong location having just clicked 'submit'? See the screenie added to the post. — RenegadeAndy, Apr 20 '16 at 14:58
Ok, so my guess is your modal is animated onto the page which causes capybara-WebKit to click where the button was, rather than is. An easy solution is to disable animation in whatever library you're using when in test mode. Another solution may be to check for classes on the modal before clicking (if there is a class that indicates animation is finished). You can test if animation is the issue by sleeping before interacting with the modal — Thomas Walpole, Apr 20 '16 at 15:06

score 1 · Answer 1 · answered Apr 20 '16 at 15:03

1

Seemingly adding a couple of sleeps in has fixed it. I don't know if this is 'right' solution. If somebody has a better way or potentially a better way I would love you to help me find it :

fill_in "seller_profile[requested_postcode]", :with => "EH21 8PB"

    sleep 2

    click_button("Submit")

    sleep 2

    click_link("Continue")

answered Apr 20 '16 at 15:03

RenegadeAndy

5,440
18
70
130

2

Probably only the first sleep is necessary to solve the issue and pretty much confirms its animation that's causing the issue. Disable animation in test mode (how to do that depends on the library you're using for your modals) and the need for the sleep should go away too. – Thomas Walpole Apr 20 '16 at 15:10
It doesn't tom, as the javascript still takes time to execute....so I believe a sleep will always be needed. Having tried removal of the css transitions and disabling of jquery animations it still isn't instantaneous as there is javascript running! – RenegadeAndy Apr 20 '16 at 17:37
1

It doesn't have to be instantaneous, Capybara will wait for the item to appear up to Capybara.default_max_wait_time seconds. It should just need to appear and not move within that time. You can also override that maximum time in the click_button call like `click_button('Submit', wait: 10)` which will wait up to 10 seconds, however the issue wasn't not seeing the button since it would have errored in that case - what library are you using for the modals (bootstrap, etc) ? If bootstrap - see http://getbootstrap.com/javascript/#disabling-transitions – Thomas Walpole Apr 20 '16 at 17:42
yeah bootstrap - going to try the disabling animations through that method :) ty tom. – RenegadeAndy Apr 20 '16 at 17:50

Capybara cannot find a link on a modal which changes on button press

1 Answers1