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