document.querySelectorAll을 사용하여 CasperJS로 textContent를 얻으십시오.

Question

저는 CasperJS로 온라인 양식을 작성하는 작업을 자동화하고 있습니다. 필수 입력란에 입력 한 양식에 잘못된 데이터를 입력하려고 시도 할 때마다 문제가 무엇인지 알려주는 잘못된 데이터가있는 각 필드에 오류 메시지가 나타납니다. 배열이나 다른 방법을 사용하든 관계없이 이러한 모든 메시지를 모아 하나에 연결하고 싶습니다. 오류 메시지에 대한 CSS는 다음과 같다 : 나를 돌아

var arr = document.querySelectorAll('.field-validation-error'); 
for (var i = 0; i < arr.length; i++) { 
    var err = arr[i]; console.log(err.textContent); 
} 

: 브라우저 콘솔에서

<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="Name.Last"> 
    <span class="" for="Name_Last" generated="true"> 
     The Last Name field is required. 
    </span> 
</span> 

<span class="field-validation-error" data-valmsg-replace="true" data-valmsg-for="Address.City"> 
    <span class="" for="Address_City" generated="true"> 
     The City field is required. 
    </span> 
</span> 

, 나는 이렇게 성공했다 :

"The Last Name field is required." 
"The City field is required." 

나는 CasperJS에서 동일한 작업을 수행하려고했지만 동일한 결과를 얻을 수는 없습니다. 여기 내 코드는 지금까지입니다 (훨씬 더 큰 파일의 조각, 그래서 난 내 casper.start 또는 아무것도 게시하지 않습니다) :

는

var results = self.evaluate(function() { 
    var arr = document.querySelectorAll('.field-validation-error'); 
    return Array.prototype.map.call(arr, function(e) { 
     return e.getAttribute('textContent'); 
    }); 
}); 

for (var i = 0; i < results.length; i++) { 
    console.log(results[i]); 
} 

이 세 개의 빈 줄을 출력합니다. 만약 내가 return e이고 그 다음에 console.log(results[i].textContent))이라면, 스크립트는 하나의 에러 메시지를 올바르게 출력하지만 나머지 배열은 null 객체로 가득 차 있기 때문에 충돌이 발생합니다! 나는 이것을 막으려는 Array.prototype.map을 생각 했을까? 캐스퍼를 통해 오류 메시지 배열을이 페이지 밖으로 가져 오려면 어떻게해야합니까?

Answer 1

기본 CasperJS 함수 getElementsInfo으로이 작업을 수행 할 수 있어야합니다. 단지 textContent 특성이 더 textContent 속성은 없지만, 때문에, 분명히

var texts = casper.getElementsInfo('.field-validation-error').map(function(info){ 
    return info.text.trim(); 
}); 

---

e.getAttribute('textContent')이 작동하지 않을 수 있습니다 : 그것은 각 요소에 대한 text 속성이 포함되어 있습니다. PhantomJS에서 브라우저 콘솔에서 사용했던 것과 동일한 코드가 작동했을 것입니다. .textContent을 .innerText으로 변경하십시오.

Answer 2

Node. textContent 속성에는 연결된 특성이 없습니다. 속성에 직접 액세스하십시오 :

return Array.prototype.map.call(arr, function(e) { 
    return e.textContent; 
});

어떤 이유로 든 첫 번째 샘플에서 속성에 액세스하여 두 번째 속성을 찾았습니다.