브라우저 콘솔과 PhantomJS의 jQuery 선택기 출력이 다릅니다

Question

동일한 jQuery 선택기에 대해 다른 결과가 나타나는 이유는 무엇입니까?

사이트 : http://www.cleartrip.com/flights/results?from=BOM&to=DEL&depart_date=03/12/2014&return_date=12/12/2014&adults=1&childs=0&infants=0&class=Economy&airline=&carrier=&intl=n&page=loaded

Node.js 및/phantomjs-node 대교 코드 : 이것은 브라우저 콘솔에서 출력되는

phantom.create(function(ph){ 
    ph.createPage(function(page){ 
     page.open("http://www.cleartrip.com/flights/results?from=BOM&to=DEL&depart_date=03/12/2014&return_date=12/12/2014&adults=1&childs=0&infants=0&class=Economy&airline=&carrier=&intl=n&page=loaded",function(){ 
      setTimeout(function(){ 
       page.evaluate(function(){ 
        var flight= []; 

        $('table.resultUnitMini tbody tr:nth-child(2) td span span').each(function(){ 
         flight.push($(this).html()); 
        }); 

        return { 
         x: flight 
        }; 
       },function(result){ 
        console.log(result.x); 
       }); 
      },15000); 
     }); 
    }); 
}); 

:

var flight = []; 
undefined 
$('table.resultUnitMini tbody tr:nth-child(2) td span span').each(function(){ 
    flight.push($(this).html()); 
}); 
flight 
["G8-345", "9W-305", "AI-677", "AI-666", "AI-605", "AI-101", "G8-337", "6E-168", "6E-176", "6E-172", "6E-174", "6E-186", "6E-182", "G8-343", "6E-198", "G8-319", "G8-339", "G8-341", "6E-194", "6E-196", "6E-192", "AI-633", "AI-633", "AI-864", "AI-660", "AI-658", "G8-329", "9W-390", "9W-351", "G8-327", "6E-188", "G8-334", "6E-183", "6E-179", "AI-349", "AI-634", "AI-634", "AI-636", "AI-636", "6E-171", "SG-131", "G8-330", "6E-167", "SG-109", "G8-332", "G8-336", "6E-189", "6E-169", "G8-340", "SG-458", "G8-342", "SG-125", "G8-344", "6E-181", "6E-175", "6E-191", "6E-187", "AI-657", "AI-665", "AI-887", "AI-865", "6E-905", "AI-102"] 

단자에서 출력된다 :

[ 'G8-345', 
    '9W-305', 
    'AI-633', 
    'AI-633', 
    'G8-334', 
    '6E-183', 
    'AI-634', 
    'AI-634', 
    '6E-171' ] 

Answer 1

:nth-child CSS 선택기가 PhantomJS (1.x)에서 손상된 것 같습니다. 귀하의 페이지에는 필요하지 않습니다. 간단히 제거하십시오.

$('table.resultUnitMini tbody tr td span span').each(function(){ 
    flight.push($(this).html()); 
}); 

이 같은 문제가 깨져서 보이지 않기 때문에 당신은 두 번째 tr에 대한 table tr + tr td span span 같은 몇 가지 트릭을 사용하거나 XPath를 사용하거나 다음 :nth-child 및 이와 유사한을해야하는 경우 :

var iterator = document.evaluate("//table[contains(@class,'resultUnitMini')]//tr[2]//td//span//span", 
     document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null), 
    element = iterator.iterateNext(); 
while(element){ 
    // do something with element here 
    element = iterator.iterateNext(); 
}