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

Question

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

我使用的页面是this

我正在尝试点击其中一种尺寸（在本例中为 34），然后点击 "Add to Bag" 按钮。

大小 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> 元素，也是您要单击的元素。

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

CasperJS: reference to a DOM element in click event instead of selector

javascript

xpath

phantomjs

casperjs