Question

我编写了一个脚本，使用PhantomJS在页面上执行某些操作。现在我正在尝试编写相同的CasperJS脚本。

我使用的页面是this

我试图点击其中一个尺寸（本例中为34）然后点击＆＃34; Add to Bag＆＃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方法需要一个查询Selector，它可以是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：在click事件中引用DOM元素而不是selector

1 个答案: