CasperJS seems unable to recognise password field on login form

问题

I'm brand new to CasperJS and coffeescript. I have a very simple part of my CasperJS coffeescript test to login to a website, that used to work before a recent change to the password element of the login form. Unfortunately I can't remember the original form but here's how the current login form looks:

<div id="login-body">
  <img src="/assets/images/logo.png" class="logo" alt="Test Acme Wil-e-Coyote Company">    
  <form action="/Login/login/" method="post">
    <h2>Please log in to catch the roadrunner:</h2>
    <div class="form-row">
      <label for="login-username">Username:</label>
      <input type="text" id="login-username" class="text placeholder" 
      data-placeholder="first.last" placeholder="first.last" name="username
      value>
    </div>
    <div class="form-row form-password">
      <label for="login-password-placeholder">Password:</label>
      <input type="text" id="login-password-placeholder" class="text password-placeholder 
      placeholder" name="password" data-placeholder="Password is case sensitive"
      placeholder="Password is case sensitive">
      <input type="password" id="login-password" class="text password-text placeholder"
      name="password" placeholder="Password is case sensitive" style="opacity: 0;
      position: fixed; display: none;">
    </div>
    <div class="form-row">
      <p class="switch"><a href="/Login/recover" 
      data-switch="forgot">Having trouble logging in? »</a></p>
      <input type="submit" id="login-submit" class="submit" value="Log In">
    </div>
  </form>

Variations of my coffeescript I've tried to use to login are as follows:

1. this one used to work fine before

casper.start appUrl('http://acmewilecoyote/Login/login'), ->
  @fill 'div#login-body > form'
      username: 'MyName'
      password: 'MyPassword'
    , true
  @wait 4000

casper.start appUrl('http://acmewilecoyote/Login/login'), ->
  @fill 'div#login-body'
      username: 'MyName'
      password: 'MyPassword'
    , true
  @wait 4000

3. there's no other form on this page - this has worked with a login form on a different site

casper.start appUrl('http://acmewilecoyote/Login/login'), ->
  @fill 'form'
      username: 'MyName'
      password: 'MyPassword'
    , true
  @wait 4000

casper.start appUrl('http://acmewilecoyote/Login/login'), ->
  @fill 'form#login-body'
      username: 'MyName'
      password: 'MyPassword'
    , true
  @wait 4000

The debug output doesn't supply anything useful, so I added some screen capturing to the script, and from what they look like it seems like it tries to submit the form with the password field left blank. Any help would be much appreciated.

回答1:

If you are willing to use the latest version of CasperJS from the master branch on the GitHub page, then you will be able to use Casper#fillSelectors instead of just Casper#fill.

You would then change your script to look like the following.

casper.start appUrl('http://acmewilecoyote/Login/login'), ->
  @fillSelectors 'form#login-body'
      '#login-username': 'MyName'
      '#login-password': 'MyPassword'
    , true
  @wait 4000

Without the master branch, you currently don't have the APIs needed to access the password input field since it is the second element with the name password

来源：https://stackoverflow.com/questions/16568186/casperjs-seems-unable-to-recognise-password-field-on-login-form

标签

forms

phantomjs

casperjs