CODEWITHSUNDEEP
ruby-on-railstestingtwitter-bootstrapwatirwatir-webdriver
Toby
Toby

Reputation: 8792

Using Watir's .click inside of Bootstrap's popover

In Watir I am attempting to access an a element that appears inside of a popover supplied by Bootstrap.

Just calling a(:class, 'my_link').click didn't want to play ball, so I added the line a(:class, 'my_link').wait_until_present hoping that it was maybe a timing issue between clicking on the element that generates the popover and accessing its contents, but this just times out after 30 seconds and returns that the element never becomes present.

During the time it is waiting I am able to open up code inspector and confirm that the element does exist and is clickable.

I should mention, that manually doing the steps Watir should be doing works.

My current thinking

I know when I was trying to interact with this element using jQuery that using a regular .click(); wouldn't work and instead I had to call $('body').on('click', ',my_link'); could something similar be at play here?

It might be something to do with the element incorrectly being classed as not visible.

Any guidance would be gratefully received.

Code

Here is the generated code from inside the popover:

<div class="popover fade bottom in" style="top: 40px; left: 424px; display: block;">
  <div class="arrow"></div>
  <div class="popover-inner">
    <h3 class="popover-title"></h3>
    <div class="popover-content">
    <!-- SNIP -->
      <p>
        <a class="my_link">My Link</a>
      </p>
    </div>
  </div>
</div>

The popover is generated by a click;

$('.nav-popup').popover('show');

Here is the relevant part of the Watir test;

span(:class, 'nav-popup').click
a(:class, 'my_link').wait_until_present
a(:class, 'my_link').click

To check that I can interact with the popover I added the following to my Watir test;

quick_log = a(:class, 'my_link').html
binding.pry

And when pry opened I could see that quick_log contains the correct HTML content, which is annoying because the very next line is a(:class, 'my_link').wait_until_present which it gacks out on.

Error Messages

The line

a(:class, 'my_link').click

Generates;

Selenium::WebDriver::Error::ElementNotVisibleError:
   Element is not currently visible and so may not be interacted with

Upvotes: 1

Views: 575

Answers (2)

Chuck van der Linden
Chuck van der Linden

Reputation: 6660

Given your answer, then rather than two lines of code I'd simply do

browser.div(:class, 'popover-content').a(:class, 'my_link').click

Given that is being created dynamically by javascript, you might have to toss in some stuff to sync and wait for the element to come into being

browser.div(:class, 'popover-content').when_present.a(:class, 'my_link').click

Upvotes: 2

Toby
Toby

Reputation: 8792

This seems to be something to do with the way bootstrap generates the popover, it must clone it from somewhere which means when I was doing a(:class, 'my_link').click it was finding hidden version which the actual popover gets cloned from.

To fix this I changed a(:class, 'my_link').click to

container = div(:class, 'popover-content')
container.a(:class, 'my_link').click

This makes it more specific and avoids the duplicate element being found.

Upvotes: 1

Related Questions