如何使用水豚编辑 div 类答案

【问题标题】：How to edit div class with capybara如何使用水豚编辑 div 类
【发布时间】：2018-11-24 15:44:31
【问题描述】：

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

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

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

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

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

我正在查看的代码块是

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

【问题讨论】：

标签： html ruby-on-rails ruby selenium capybara

【解决方案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 部分是为了证明该类已被添加。希望我能帮助到你和其他人:)

【讨论】：

【解决方案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

【讨论】：

您先生是我的英雄。您的第三个解决方案完美运行。我没有 JS 的经验，所以我很高兴我现在可以避免它。