CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-4rspeccapybara
Mathieu
Mathieu

Reputation: 4787

Rspec/Capybara - how to target data-target attribute inside a span

in my Rails4/rspec app, I need to male Capybara click on a zone that has no formal "link" , using data-target attribute.

html

<div class="info-zone">
   <span data-target="#myInfoZone1" class="City" data-toggle="modal">  
   </span>
</div>

My current attempt at using capyabar fails

describe "modal loads with the right content" do
      it "has right text" do
        visit actual_page_path(:id => @deal.id) 
        find("span[data-target='#myInfoZone1']").click
      end

I currently get this error

Capybara::ElementNotFound:
       Unable to find css "span[data-target='#myInfoZone1']"

How can I make capybara "find" and click on the zone ?

Thanks for your help

EDIT

I found out why capybara is not finding it!

for a reason I can't understand, that is the html output code capybara finds

<!-- city zone -->
<div id="city-zone">

  <!--
    We gather here the various types of <spans> and load it via javascript
we append it to the the div id=city-zone
  -->
</div>

I am using javascript to load inside this div. so when I load the 'page source' i see what's above

but when I go on chrome dev tools, then I see:

<!-- city zone -->
<div id="city-zone">

   <div class="info-zone">
       <!--
    We gather here the various types of <spans> and load it via javascript
we append it to the the div id=city-zone
  -->
   <span data-target="#myInfoZone1" class="City" data-toggle="modal">  
       </span>
    </div>
</div>

So i guess capybara sees the same thing as I see when I load the page source: no . how come my javascript which I append does not appear in the html code source?

what to do about it to make capybara work

Upvotes: 2

Views: 1438

Answers (1)

moeabdol
moeabdol

Reputation: 5049

Capybara's default driver only tests html rendered by your back-end application server. If you want to test pages with front-end javascript as well, you should use a javascript-enabled driver with Capybara.

Luckily, the folks at thoughtbot made a Capybara extension just for that Capybara-webkit You can easily install it in your Gemfile. Follow the instructions here on how to install the gem.

Finally, once you install it, you can enable javascript tests in your feature specs by adding js: true in your features/scenarios as following:

RSpec.feature "test my new feature", js: true do
  # my test
end

Upvotes: 2

Related Questions