PhantomJS를 사용하여 Angular.js 앱에서 양식 작성

Question

PhantomJS를 사용하여 AngularJS 애플리케이션을 테스트하고 싶습니다. 첫 번째 단계는 로그인 양식을 username 필드로 채우는 것입니다 (다른 필드가 없다고 가정 해 봅시다).
일반적으로 (실제 브라우저에서)이 필드는 각도 (0-속성)로 제어되며 전체 양식은 ng-submit 속성을가집니다.

그래서 PhantomJS 스크립트에서 나는

1. 입력 이름

   page.evaluate(function() { 
       document.getElementsByName('username')[0].value = 'tester'; 
   }); 
   

2. 걸릴 스크린 샷을하고 '테스터'제출에 입력

   page.render('myfile.jpg'); 
   

3. 클릭에 존재하는 것을 볼 수 버튼 :

   page.evaluate(function() { 
       document.getElementById('go').click(); 
   }); 
   

4. 다른 스크린 샷을 촬영하십시오.

내가 볼하는 일이 버튼을 클릭 가져옵니다,하지만 메시지는 username의 값이 비어 있다고하는 표시됩니다. 그래서 모델이 제대로 업데이트되지 않았을 것입니다.
또한 jQuery를 사용하여 이러한 값을 설정하려고 시도했습니다. 동일한 결과가 나타납니다.

각도로 제어되는 필드에 값을 올바르게 입력하려면 어떻게해야합니까?

Answer 1

PhantomJS는 초보 sendKeys 구현하는 데 사용할 수있는 sendEvent 기능을 제공하지만, 당신은 첫 번째 요소에 초점을 맞출 필요가 : 당신이 중 하나를 체크 아웃 각도에 맞춰 것으로 보인다 protractor을 할 수 있습니다

function sendKeys(page, selector, keys){ 
    page.evaluate(function(selector){ 
     // focus on the text element before typing 
     var element = document.querySelector(selector); 
     element.click(); 
     element.focus(); 
    }, selector); 
    page.sendEvent("keypress", keys); 
} 
sendKeys(page, "*[name=username]", "tester"); 

을 .js 테스트 또는 CasperJS은 PhantomJS를 기반으로 훨씬 멋진 API를 사용합니다.