CasperJS：在單擊事件而不是選擇器中引用DOM元素

我已經編寫了一個腳本來使用PhantomJS在頁面上執行某些操作。現在我正在嘗試爲CasperJS腳本編寫相同的腳本。CasperJS：在單擊事件而不是選擇器中引用DOM元素

我使用的頁面是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方法需要查詢Selector，它可以是CSS選擇器或XPATH選擇器。我如何在CasperJS中實現這一點？

基本上我正在尋找XPATH選擇器或CSS選擇器的元素根據他們的內容或可能屬性在某些情況下。

來源

2015-10-24 mandeep_m91

您可以使用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>元素以及您要單擊的元素。

來源

2015-10-24 20:00:48

謝謝，但沒有任何方法可以提供參考選定的元素，就像我爲PhantomJS做的一樣？ –

該實用程序真的很酷btw。非常感謝！ –

那麼，你可以在CasperJS中運行任何PhantomJS。 'page'可以作爲'casper.page'使用，但是CasperJS提供了一些抽象，可以讓你做任何你想要的約束。也許[clientutils]（http://docs.casperjs.org/en/latest/modules/clientutils.html）模塊會給你一些想法如何結合這兩種方法。玩的開心！ –

CasperJS：在單擊事件而不是選擇器中引用DOM元素

回答

相關問題