javascript - CasperJS:在点击事件中引用 DOM 元素而不是选择器

Question

我已经编写了一个脚本来使用 PhantomJS 在页面上执行某些操作。现在我正在尝试为此编写 CasperJS 脚本。

我使用的页面是this

我尝试点击其中一种尺码(在本例中为 34)，然后点击“添加到购物袋”按钮。

大小 34 是动态提供给脚本的。这是我在 PhantomJS 中的做法

var point = page.evaluate(function (sizeToSelect){
    var sizes = document.querySelectorAll('.size-desktop li.first.popover-options');
    var filter = Array.prototype.filter;
    var selected = filter.call(sizes, function(size){ return size.textContent == sizeToSelect });
    if(selected && selected.length){
        selected = selected[0].querySelector("span");
        return selected.getBoundingClientRect();
    } else {
        return  { "error": "size not available" }
    }
}, inputElements.size)


if (point) {
    page.sendEvent('click', (point.left + point.width / 2) , point.top + point.height / 2 );
}

在这种情况下，我可以通过使用循环找到要单击的确切 DOM 元素。但是，CasperJS 文档指定 click 方法需要一个查询选择器，它可以是 CSS 选择器或 XPATH 选择器。我怎样才能在 CasperJS 中实现这一点？

基本上，我是根据元素的内容或某些情况下的属性来寻找元素的 XPATH 选择器或 CSS 选择器。

Answer 1

您可以使用 XPath 帮助程序生成 CasperJS 理解的有效 XPath 对象:

var x = require('casper').selectXPath;

您的代码在功能上应该等同于此:

var sizeToSelect = "34";
casper.thenClick(x("//*[contains(@class,'size-desktop')]//"+
    "li[contains(@class,'first') and contains(@class,'popover-options')]/"+
    "span[contains(text(),'"+sizeToSelect+"')]/"+
    ".."));

请注意，有一个 /..最后为了移动到 <span> 的父级<a> 元素元素和您要单击的元素。