問題描述

當我調用以下函數時，waitForSelector 為選擇器"傳遞，但 assertExists 對同一選擇器失敗.怎么可能?

When I call the following function, waitForSelector passes for 'selector', but assertExists fails for the same selector. How is it possible?

casper.waitForSelector(selector, function() {
    casper.test.assertExists(selector, sectionName + " opened up successfully.");
}, function() {
    casper.test.fail(sectionName + " did not load in given time");
}, max_timeout);

這里是使用 :nth-child 重現問題的完整示例 選擇器.

推薦答案

這是一個已知的錯誤(參見 #11632，#11737)在 WebKit 的 Qt4 分支中(來自2010).當使用 :nth-child() 或 :nth-of-type() CSS3 選擇器時會發生這種情況.選擇器第二次運行時，它返回不同的結果(大部分時間是 null).唯一已知的解決方法是使用 XPath 表達式而不是 CSS3 選擇器.此錯誤已在 PhantomJS 2 中修復，因為它使用 WebKit 的 Qt5 分支(版本 538.1).

This is a known bug (see #11632, #11737) in the Qt4 fork of WebKit (from 2010). It happens when :nth-child() or :nth-of-type() CSS3 selectors are used. The second time the selector is run, it returns a different result (most of the time null). The only known workaround is to use XPath expressions instead of CSS3 selectors. This bug is fixed in PhantomJS 2 as it uses a Qt5 fork of WebKit (version 538.1).

這是在 http://example.com 上重現問題的最小腳本(修改自 這里):

This is a minimal script to reproduce the issue on http://example.com (modified from here):

var casper = require('casper').create(),
    x = require('casper').selectXPath;

casper.start('http://example.com', function() {
    var selector = 'p:nth-child(3) > a',
        xpSelector = '//*[local-name()="p" and position()=3]/a';
    var first = this.exists(selector);
    var second = this.exists(selector);
    if(first !== second) {
        console.error('Expected First selector to equal the Second');
    } else {
        console.log('Passed');
    }
    first = this.exists(x(xpSelector));
    second = this.exists(x(xpSelector));
    if(first !== second) {
        console.error('Expected First selector to equal the Second');
    } else {
        console.log('Passed');
    }
}).run();

輸出:

標記是:

Markup is:

<div> <h1>text</h1> <p>text</p> <p><a href="url">text</a></p> </div>

XPath 表達式看起來有點尷尬，因為它直接再現了 CSS 選擇器的預期行為.通常人們會寫 //p[2]/a.

The XPath expression looks a little awkward, because it directly reproduces the intended behavior of the CSS selector. Normally one would write //p[2]/a.

這篇關于waitForSelector 通過，但 assertExists 對同一個選擇器失敗的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！