Cameron Bass Cameron Bass - 1 month ago 14
Javascript Question

selecting element with RSpec and JS

I'm trying to select a radio button with JS: true on my rspec test. I don't know how to find the element and select it. Here is my test.

within(".plan-picker__plan--best") do
find("plan_id_3").click
end





right now it's saying it can't find that element.




Here is my HTML

<li class="plan-picker__plan plan-picker__plan--best">
<div class="plan-picker__plan__header">
<div class="plan-icon private-eye"></div>
<h6 class="plan-size">MEDIUM</h6>
<h5 class="plan-name">Private Eye</h5>
<p class="plan-summary">Great for small teams that need increased monitoring coverage options on a Project.</p>
</div>
<div class="plan-picker__plan__body">
<ul>
<li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %><strong> 100</strong> Snitches</li>
<li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %> Enhanced Invtervals</li>
<li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %> API</li>
<li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %> Field Agent</li>
<li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %> Integrations</li>
<li><%= inline_svg("icons.svg", class: "icon icon--pause", href: "#icon-pause") %> Up to <strong>5</strong> team members</li>
</ul>
</div>
<div class="plan-picker__plan__footer">
<h4>
<span class="dollar">$</span>29<span class="period">monthly</span><span class="cents">00</span>
</h4>
<label>
<input type="radio" name="plan_id" id="plan_id_3" value="3" required data-plan-form-next data-plan-name="Private Eye" data-plan-price="29" />
<span class="button-big reverse-blue">Select</span>
</label>
</div>
</li>





If you focus on the input. That is what I'm trying to find and select. Any help would be great thanks.

Answer

You are doing a more general search for anything with "plan_id_3" within a <li>. Rspec might not drill down within the <li>. Try focusing on the that contains that ID specifically as

within(".plan-picker__plan__footer") do
  find("#plan_id_3").click
end