如何用水豚编辑 div class

Question

我有一个（我希望）简单的问题。有没有办法改变

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

<div id='THE_ID' class='filter_group open'> subtags </div> 在水豚中？

我正在查看的这个网站有一个非描述性 <a> 标签作为编辑 div class 的按钮，如上所示。我宁愿单击 <a> 标签，但它是非描述性的，没有任何信息。没有名字，没有 id，没有 href，什么都没有。

我是 rails 和水豚的新手，所以如果我遗漏了一些简单的东西，请原谅我

我正在看的代码块是

   <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>

Answer 1

这是一些代码（抱歉，它是纯代码 javascript 我没有看到你的问题中说它与 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>

CSS部分是为了证明class已经添加。希望我对你和其他人有所帮助:)

Answer 2

使用 JS 可以实现您的要求，但是您并没有真正测试网站（假设您正在测试而不仅仅是抓取）。要通过 JS 和 Capybara 3.2+ 做到这一点，你可以做到

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

在 3.2 之前你需要做一些类似的事情

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

也就是说，有很多方法可以通过限定范围来单击，即使它没有任何可用的属性（假设它在页面上有大小）

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

如何用水豚编辑 div class

How to edit div class with capybara

html

ruby

selenium

ruby-on-rails

capybara