CasperJS select 带有指定文本的复选框

Question

我想使用 casperJS 自动select一个复选框

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

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

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

是否有 casperjs select ID 为 'INT2204' 的主题的复选框？

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 才能 select 复选框。

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 select 带有指定文本的复选框

CasperJS to select a checkbox with specified text

javascript

checkbox

casperjs