如何使用 CasperJS 确定特定输入是否存在

Question

我的 HTML

<input name="SUBMIT-chn:$INTERNAL_password.pss" title="Select" 
    class="image  selectIcon" type="image" alt="Select" src="docs/pics/select.png">

我正在尝试使用 CasperJS 来了解它是否存在，如果存在则“单击”它？

var casper = require('casper').create();
var site = 'http://internalsite/username=abc';

var exists;
casper.start(site, function() {
    exists = this.evaluate(function() {
        return __utils__.exists('image selectIcon');
    });
});

casper.run(function() {
    this.echo(exists).exit();
});

Answer 1

clientutils.exists() 需要一个 CSS 选择器作为参数。您似乎想根据其两个类属性确定输入元素是否存在。

'image selectIcon' 不是基于类属性选择元素的方式。在这种情况下，一个合适的 CSS 选择器就是这个：

'.image.selectIcon'

可以基于单个类（多个类由空格分隔）选择一个元素，方法是在其前面加上一个点。基于同一元素的多个类的选择必须不带空格，因为选择器中的空格表示先前选择的元素的后代（例如子元素）。

您可以使用waitForSelector() 等待一个元素出现，以防网站是动态生成的，然后点击它：

casper
    .start(url)
    .waitForSelector('.image.selectIcon')
    .thenClick('.image.selectIcon')
    .then(function(){
        // see what happened after the click
        this.capture("screenshot.png");
    })
    .run();