Question

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

这样的东西

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

在水豚中

<div id='THE_ID' class='filter_group open'> subtags </div>？

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

我是铁杆和水豚的新手所以请原谅我，如果我错过了一些简单的话

我正在查看的代码块是

   <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部分用于演示该类已添加。希望我帮助你和其他人：）

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)

话虽如此，有很多方法可以点击＆lt; a＆gt;即使它没有任何可用的属性（假设它在页面上有大小），也可以通过确定它来确定它

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

如何用capybara编辑div类

2 个答案: