CasperJS에서 일반 JavaScript가 작동하지 않는 이유는 무엇입니까?

Question

저는 CasperJS를 처음 사용합니다. this.echo(this.getTitle());은 어떻게 작동 하나 console.log("Page Title ", document.title);은 작동하지 않습니까? 또한 내 document.querySelector가 작동하지 않는 이유는 무엇입니까? 누구든지 좋은 설명이 있습니까? CasperJS 문서에서 어디에서 대답을 찾을 수 있습니까?

여기 내 코드입니다 :

var casper = require('casper').create(); 
var url = 'http://www.example.com/'; 

casper.start(url, function() { 
    this.echo(this.getTitle()); // works 
    this.echo(this.getCurrentUrl()); // works 
}); 

casper.then(function(){ 
    this.echo(this.getCurrentUrl()); // works 
    console.log("this is URL: ", document.URL); // doesn't work 
    console.log("Page Title ", document.title); // doesn't work 
    var paragraph = document.querySelectorAll('p')[0].innerHTML; 
    console.log(paragraph); // doesn't work 
}); 

casper.run(); 

편집 : 지금 casper.thenEvaluate 및 casper.evaluate을 사용하고 있는데 여전히 작동하지 않습니다. 어떤 아이디어?

var paragraph = this.evaluate(function() { 
    return document.querySelector('p').innerHtml; 
}); 

의심, the docs 상담 :

var casper = require('casper').create(); 
var url = 'http://www.example.com/'; 

casper.start(url, function() { 
    this.echo(this.getTitle()); // works 
    this.echo(this.getCurrentUrl()); // works 
    console.log('page loaded: '); // works 
}); 

casper.thenEvaluate(function(){ 
    var paragraph = document.querySelectorAll('p')[0].innerHTML; // doesn't work 
    console.log(paragraph); // doesn't work 
    console.log("Page Title ", document.title); // doesn't work 
}); 

casper.run(); 

Answer 1

당신은 this.evaluate와 document에 따라 함수를 호출해야합니다.

Answer 2

this.getTitle()은 Casper 객체에서 getTitle() 함수를 실행하고 캐스퍼 컨텍스트에서 실행되므로 예상 된 결과를 생성합니다.

그러나 '문서'는 캐스퍼 컨텍스트에서 사용할 수 없습니다. 근본적인 이유는 캐스퍼가 웹 브라우저 인 PhantomJS를 실행하고 있기 때문입니다. 따라서 '문서'는 브라우저에서만 사용할 수 있습니다.이 수준은 캐스퍼 컨텍스트에서 실행되는 코드보다 '더 깊이'있습니다. 두 환경간에 변수를 공유하는 직접적인 방법은 없지만 값을 복사하여 매개 변수로 전달하는 방법이 있습니다.

두 가지 환경 (캐스퍼 및 팬텀) 간의 "다리"는 캐스퍼의 '평가'기능입니다. 'evaluate'을 매개 변수로 전달한 함수 내부의 모든 것은 캐스퍼 컨텍스트가 아닌 브라우저 컨텍스트에서 실행됩니다. 그것은 중요한 차이입니다.

http://docs.casperjs.org/en/latest/modules/casper.html#evaluate

예 아래 :

casper.evaluate(function(username, password) { 
    document.querySelector('#username').value = username; 
    document.querySelector('#password').value = password; 
    document.querySelector('#submit').click(); 
}, 'sheldon.cooper', 'b4z1ng4'); 

주어진 예에서 당신이 캐스퍼에서 "사용자 이름"과 "암호"매개 변수를 전달하는 방법을 볼 수 있습니다 블렌더에 의해 언급 된 문서는 여기에서 확인할 수 있습니다 환경을 브라우저 (페이지) 환경으로 변경하십시오.

익명의 "기능 (사용자 이름, 암호)"이 브라우저 내에서 실행됩니다. 따라서 '문서'를 사용할 수 있습니다.

캐스퍼 측에서 다시 값을 전달할 수도 있습니다. 나는.

var result = casper.evaluate(function run_in_browser(){ 
    return document.title; 
}); 

Answer 3

시도해보십시오. innerhtml을 얻으려면 this.echo(this.fetchText('p'));을 시도하십시오. Refer documentation

Answer 4

CasperJS는 DOM 컨텍스트 (페이지 컨텍스트)와 PhantomJS의 외부 컨텍스트 사이의 분할을 상속받습니다. 모래 상자가있는 DOM 컨텍스트는 casper.evaluate()을 통해서만 액세스 할 수 있습니다. documentevaluate() 콜백 내부는 일반 자바 스크립트에서 예상하는 변수이지만 evaluate() 외부에있는 document은 더미 객체이며 페이지의 DOM에 대한 액세스를 제공하지 않습니다.

DOM 속성에 액세스하려면 evaluate()을 사용해야합니다.

var title = casper.evaluate(function(){ 
    return document.title; 
}); 

DOM 노드에서는 원시 객체 만 DOM 컨텍스트 밖으로 전달 될 수 있기 때문에 DOM 노드에서는 작동하지 않습니다.

참고 : 인수와 evaluate 함수에 반환 값을 간단한 원시적 오브젝트해야 PhantomJS 문서는 다음과 말했다. 경험 법칙 : JSON을 통해 직렬화 할 수 있다면 괜찮습니다.

클로저, 함수, DOM 노드 등 은이 아닙니다!

var form = casper.evaluate(function() { 
    var f = document.querySelector('form'); 
    return { html: f.innerHTML, action: f.action }; 
}); 
casper.echo(JSON.stringify(form, undefined, 4)); 

당신은 또한 사용할 수 CasperJS의 모든 기능을 사용할 수 있습니다 : 당신이 document.querySelector()를 사용하려면

는, 당신은 외부에서 전달 될 수있는 DOM 노드의 표현을 생산하기 위해 필요 casper.getElementsInfo()과 같은 DOM 노드의 표현을 제공 할 수 있습니다.

또한 Understanding the evaluate function in CasperJS을 살펴보십시오.