WebDriver element is returning false for isVisible

Question

I am working on my first set of Cucumber tests in a Meteor app, but I cannot get the login step to work. My app uses a custom login plugin I wrote specifically for this project. Here is the step, as I currently have it defined with debug output:

this.Given(/^I am logged in as a\/an "([^"]*)"$/, function(roleName, callback) {
  this.browser
    .url(url.resolve(process.env.HOST, '/'))
    .waitForExist('#appSignIn');
  this.browser.getHTML('#appSignIn', function(err, html) {
    if (err) {
      console.log('err: ', err);
    } else {
      console.log('link HTML: ', html);
    }
  });
  this.browser.getCssProperty('#appSignIn', 'display', function(err, value) {
    console.log('link HTML display: ', value);
  });
  browser.isVisible('#appSignIn', function(err, isVisible) {
      console.log('#appSignIn', isVisible);
  });
  this.browser
    .waitForVisible('#appSignIn')
    .click('#appSignIn')
    .waitForExist('#username')
    .waitForVisible('#username')
    .setValue('#username', 'test' + roleName)
    .setValue('#password', 'test' + roleName)
    .leftClick('#signin')
    .waitForExist('#appSignOut')
    .waitForVisible('#appSignOut')
    .call(callback);
});

What I am seeing is in this logs is this:

 Scenario:                               # features/my.feature:11
    Given The server data has been reset  # features/my.feature:12
link HTML:  <a id="appSignIn" href="/signin">Sign In</a>
link HTML display:  { property: 'display',
  value: 'block',
  parsed: { type: 'ident', string: 'block' } }
#appSignIn false
    And I am logged in as a/an "ADMIN"    # features/my.feature:13
      RuntimeError: RuntimeError
           (ScriptTimeout:28) A script did not complete before its timeout expired.
           Problem: Timed out waiting for asyncrhonous script result after 511 ms

Basically, I see the HTML output, so I know the element is there. I see the CSS is set to display: block, but then WebDriver reports the element is not visible with the isVisible, and similarly times out with the waitForVisible call. the "Sign In" link is part of a Bootstrap collapsible nav-bar, located in the upper-right.

Answer 1

The issue was simple: The default size of the viewport was too small, which was causing the Bootstrap nav element to collapse. I set the browser size to 1000x600 and it worked as expected.