在CasperJS中獲取具有特定（數據）屬性的每個元素

Question

我試圖使用CasperJS測試頁面。是否有可能獲取包含屬性數據的每個元素（段落）？...？ 之後，我需要將此屬性與內部HTML進行比較，但我不知道如何去做。

Answer 1

首先你需要檢索所有你感興趣的元素的表示這可以通過casper.getElementsInfo(selector)做到：

var elements = casper.getElementsInfo("p[data-whatever]"); 

這會給你的頁面上的所有<p>元素有data-whatever屬性集。如果您想按照data-whatever屬性的值過濾該值，則需要根據您的需要使用attribute selectors。

getElementsInfo()函數包含非常有用的信息，但不包含您要使用的實際元素。它只包含一個表示形式作爲數組。

您可以迭代這些元素表示並在其上運行您的操作。你說你想「比較此屬性與內部HTML」。這可以通過這種方式來完成：

elements.forEach(function(element){ 
    if (element.attributes["data-whatever"] === element.html) { 
     casper.echo("data attribute and content are exactly equal"); 
    } else { 
     casper.echo("data attribute and content are different"); 
    } 
}); 

請記住，你可以直接用正常的DOM功能的元件做到這一點，但你必須要做到這一點的casper.evaluate()裏面，因爲PhantomJS（其中CasperJS是建立在）有兩個上下文和頁面上下文是沙箱。另外，您不能從page context返回DOM節點。