Question

我想使用casperJS自动选择复选框

<tr>
    <td style=" text-align:center;">
        <input type="checkbox" data-rowindex="1" data-crdid="0005442" data-numcrd="3" value="">
    </td>
    <td>Data Structures and Algorithms</td>
    <td>INT2203></td>
</tr>
<tr>
    <td style=" text-align:center;">
        <input type="checkbox" data-rowindex="2" data-crdid="0005682" data-numcrd="3" value="">
    </td>
    <td>Machine Learning</td>
    <td>INT2204></td>
</tr>
<tr>
    <td style=" text-align:center;">
        <input type="checkbox" data-rowindex="3" data-crdid="003643" data-numcrd="3" value="">
    </td>
    <td>Artificial Intelligence</td>
    <td>INT2205></td>
</tr>

第一列是要选择的复选框。第二个是主题的名称，最后一个是主题的ID。

现在我只知道主题的ID：INT2204，我想用casperjs来选择这个主题的方框。但是，唯一要区分的是data-crdid，我不知道。

无论如何选择ID为＆＃39; INT2204＆＃39;的主题的复选框？通过casperjs？

Answer 1

您可以使用jQuery过滤元素并获取兄弟姐妹。如果你注入jQuery（如果它还没有），可以在页面内部由CasperJS评估。

注入jQuery：

casper = require('casper').create();
casper.start();
casper.open('some url');
casper.then(function doSomething() {
    this.page.injectJs('relative/local/path/to/jquery.js');
     this.evaluate(function (courseId) {
        $('td').filter(function() {
            return $(this).text() === courseId;
        }).siblings().find('input').prop('checked', true);
    }, 'INT2203>');
});

浏览器中的示例：

var courseId = 'INT2203>';
$('td').filter(function() {
  return $(this).text() === courseId;
}).siblings().find('input').prop('checked', true);

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <title>Checkbox test</title>
</head>

<body>
<table>
  <tr>
    <td style=" text-align:center;">
      <input type="checkbox" data-rowindex="1" data-crdid="0005442" data-numcrd="3" value="">
    </td>
    <td>Data Structures and Algorithms</td>
    <td>INT2203></td>
  </tr>
  <tr>
    <td style=" text-align:center;">
      <input type="checkbox" data-rowindex="2" data-crdid="0005682" data-numcrd="3" value="">
    </td>
    <td>Machine Learning</td>
    <td>INT2204></td>
  </tr>
  <tr>
    <td style=" text-align:center;">
      <input type="checkbox" data-rowindex="3" data-crdid="003643" data-numcrd="3" value="">
    </td>
    <td>Artificial Intelligence</td>
    <td>INT2205></td>
  </tr>
</table>

</body>

</html>

Answer 2

我终于找到了一种在不使用jQuery的情况下解决问题的方法。

以下是我从@Evers回复的HTML代码：

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <title>Checkbox test</title>
</head>

<body>
<table>
  <tr>
    <td style=" text-align:center;">
      <input type="checkbox" data-rowindex="1" data-crdid="0005442" data-numcrd="3" value="">
    </td>
    <td>Data Structures and Algorithms</td>
    <td>INT2203</td>
  </tr>
  <tr>
    <td style=" text-align:center;">
      <input type="checkbox" data-rowindex="2" data-crdid="0005682" data-numcrd="3" value="">
    </td>
    <td>Machine Learning</td>
    <td>INT2204</td>
  </tr>
  <tr>
    <td style=" text-align:center;">
      <input type="checkbox" data-rowindex="3" data-crdid="003643" data-numcrd="3" value="">
    </td>
    <td>Artificial Intelligence</td>
    <td>INT2205</td>
  </tr>
</table>

</body>

</html>

我将使用CasperJS的方法getElementsInfo和getElementsAttribute：首先，我需要收集与主题相关的所有数据。由于我所知道的唯一内容是主题的ID和名称，因此我需要知道他们的data-crdid才能选中复选框。

casper.then(function () {
   // Select all the subject IDs in the table
   id = this.getElementsInfo('table tr td:nth-child(3)')
                .map(function (value, index, array) {
       return array[index].text();
   }); 

   // Select all the data-crdid in the table
   data = this.getElementsInfo('table tr td input', 'data-crdid');
});

之后，一切都很简单。我只需要通过其ID来选择我的主题，data-crdid将在数组data中具有相同的索引。

 casper.then(function () {
     selected = data[id.indexOf(subject)];
 });

 casper.thenEvaluate(function (selected) {
     document.querySelector('input[data-crdid="' + selected + '"]').click();
 }, selected);

以下是完整代码：

var casper = require('casper').create();
var subject = 'INT2204';

casper.start();
casper.thenOpen('/{{ URL }}');

casper.then(function () {
       // Select all the subject IDs in the table
       var id = this.getElementsInfo('table tr td:nth-child(3)')
                    .map(function (value, index, array) {
           return array[index].text();
       }); 

       // Select all the data-crdid in the table
       var data = this.getElementsInfo('table tr td input', 'data-crdid');

       var selected = data[id.indexOf(subject)];

       this.thenEvaluate(function (selected) {
         document.querySelector('input[data-crdid="' + selected + '"]').click();
       }, selected);
});

casper.run();

CasperJS选择具有指定文本的复选框

2 个答案: