CODEWITHSUNDEEP
htmlruby-on-railsrubyseleniumcapybara
Kyle Hansen
Kyle Hansen

Reputation: 35

How to edit div class with capybara

I have a (I hope) simple question. Is there a way to change something like

<div id='THE_ID' class='filter_group'> subtags </div> to

<div id='THE_ID' class='filter_group open'> subtags </div> in capybara?

This website I'm looking at has a non-descript <a> tag as a button that edits the div class as seen above. I'd rather click the <a> tag but it being non-descript has no information. No name, no id, no href, nothing.

I'm new to rails and capybara so please forgive me if I'm missing something simple

The code block I am looking at is 

   <div id="ctl00_ContentPlaceHolder1_as1_divDateRange" class="filter_group">
        <label class="header">Date Range 
           <span class="label two-line"><span id="ctl00_ContentPlaceHolder1_as1_lblDateFrom">4/14/2018</span><br><span id="ctl00_ContentPlaceHolder1_as1_lblDateTo">6/14/2018</span></span>
           <a></a>
        </label>
     <div class="list">
         RADIOBUTTONS and FIELDS
     </div>
   </div>

Upvotes: 0

Views: 918

Answers (2)

fourk
fourk

Reputation: 332

Here is some code (Sorry it's pure javascript I didn't see the part of your question where it says it's ment to be with cappybra):

function yourFunction() {
   var element = document.getElementById("ctl00_ContentPlaceHolder1_as1_divDateRange");
   element.classList.add("open");
}
.open {
color:red;
}
<button onclick="yourFunction()">Add class</button>


<div id="ctl00_ContentPlaceHolder1_as1_divDateRange" class="filter_group">
        <label class="header">Date Range 
           <span class="label two-line"><span id="ctl00_ContentPlaceHolder1_as1_lblDateFrom">4/14/2018</span><br><span id="ctl00_ContentPlaceHolder1_as1_lblDateTo">6/14/2018</span></span>
           <a></a>
        </label>
     <div class="list">
         RADIOBUTTONS and FIELDS
     </div>
   </div>

The CSS part is to demonstrate that the class has beeen added. Hope I helped you and others :)

Upvotes: 0

Thomas Walpole
Thomas Walpole

Reputation: 49890

What you're asking is possible using JS, however then you're not really testing the site (assuming you're testing and not just scraping). To do it via JS with Capybara 3.2+ you could do

page.find("#ctl00_ContentPlaceHolder1_as1_divDateRange").execute_script("this.classList.add('open');")

Prior to 3.2 you would need to do something like

el = page.find("#ctl00_ContentPlaceHolder1_as1_divDateRange")
page.execute_script("arguments[0].classList.add('open');", el)

That being said, there are plenty of ways to click the <a> even if it doesn't have any usable attributes (assuming it has size on the page) by scoping to it

page.find("#ctl00_ContentPlaceHolder1_as1_divDateRange > .header > a").click

Upvotes: 4

Related Questions