CasperJS 양식이 AngularJS에 제출되지 않았습니다.

Question

CasperJS를 테스트, 양식 제출 및 UI 테스트 용으로 사용할 예정이며 CasperJS 및 AngularJS를 처음 사용합니다. CasperJS로 테스트를하는 동안 내 양식이 제출되지 않지만 오류가 발생합니다. 즉, 양식을 찾을 수 없습니다.

여기 여기 내 CasperJS 코드가

casper.start('http://localhost:3000/#/login', function() { 
    this.fillSelectors('form#login-form', { 
     'emailId': 'test@gmail.com', 
     'passwordId': 'test123' 
    }, false); 
}); 

casper.then(function() { 
    this.evaluateOrDie(function() { 
     return /message sent/.test(document.body.innerText); 
    }, 'sending message failed'); 
}); 

casper.run(function() { 
    this.echo(this.getHTML()); 
    this.echo('message sent').exit(); 
}); 

Answer 1

당신의 선택이 잘못입니다 내 양식

<form role="form" name="login-form"> 
    <div class="list list-inset col-sm-6 well col-md-offset-3 shadowBox"> 
     <label class="item item-input item-stacked-label "> 
      <span class="input-label">Email</span> 
     </label> 
     <div class="item item-input item-stacked-label"> 
      <input class="form-control" name="emailId" type="email" ng-model="loginData.email" placeholder="Email" required> 
     </div> 
     <label class="item item-input item-stacked-label"> 
      <span class="input-label">Password</span> 
     </label> 
     <div class="item item-input item-stacked-label"> 
      <input class="form-control" name="passwordId" type="password" ng-model="loginData.password" placeholder="Password" required> 
     </div> 
     <div class="message-box alert-danger text-center" role="alert" ng-hide="!message.length"> 
       <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> 
       <span class="sr-only">Error:</span> 
       <span data-ng-bind="message"></span> 
     </div> 
     <div class="item" ng-show="{{applicationType}}"> 
       <hr/> 
       <button class="button button-positive pull-right btn btn-primary" ng-click="doLogin(loginData)" id="success">Log in</button> 
       <a ng-click="goToForgotPassword()" class="button button-clear button-positive">Forgot password?</a> 
     </div> 
     <div style="clear:both;"></div> 
     <label class="item" ng-hide="{{applicationType}}"> 
      <button class="button button-positive" ng-click="doLogin(loginData)" id="success">Log in</button> 
      <a ng-click="goToForgotPassword()" class="button button-clear button-positive">Forgot password?</a></div> 
     </label> 
    </div> 
</form> 

입니다. form[name="login-form"]을 사용한다는 의미입니다. #이 id 선택기이기 때문에 초기 선택기는 실제로 form[id="login-form"]과 같습니다.

fillSelectors 함수를 사용하므로 실제 선택기를 사용하여 필드를 찾아야합니다.

이것은 angularjs이기 때문에 양식이 나타날 때까지 기다려야 할 수도 있습니다.

전체 코드 :

casper.start('http://localhost:3000/#/login'); 

casper.waitForSelector('form[name="login-form"] input[name="emailId"]', function() { 
    this.fillSelectors('form[name="login-form"]', { 
     'input[name="emailId"]': 'test@gmail.com', 
     'input[name="passwordId"]': 'test123' 
    }, false); 
}); 

casper.run(function() { 
    this.echo(this.getHTML()); 
    this.echo('message sent').exit(); 
}); 

---

또한 evaluateOrDie 들어있는 단계는 유용한 아무것도되지 않습니다. 페이지 컨텍스트에 전달한 인수를 사용하지 않고 페이지 컨텍스트에서 반환 한 값을 사용하지 않습니다.