Working with protractor events using phantomjs\chrome

Question

The following code works well when i'm running protractor using chrome browser. But when i'm changing browser to phantomjs, looks like he cant click at login button.

describe('Authentication capabilities', function() {

  var siteUrl = 'http://localhost:5000/';
  var loginURL = 'http://localhost:5000/views/account/login';

  browser.get("http://localhost:5000/");

  var username = element(by.model('credential.username'));
  var password = element(by.model('credential.password'));
  var loginButton = element(by.xpath('//form[1]/button[@type="submit"]'));
  var error = element(by.xpath('//form[1]/div[1]'));

  it('should redirect to the login page if trying to load protected page while not authenticated', function() {
    browser.get(loginURL);
    loginURL = browser.getCurrentUrl();

    browser.get(siteUrl);
    expect(browser.getCurrentUrl()).toEqual(loginURL);
  });

  it('should warn on missing/malformed credentials', function() {
    username.clear();
    password.clear();

    password.sendKeys('test');
    loginButton.click();
    expect(error.getText()).toMatch('Missing credentials');

    username.sendKeys('example');
    password.clear();
    loginButton.click();
    expect(error.getText()).toMatch('Missing credentials');

    username.clear();
    username.sendKeys("admin");
    password.sendKeys("someinvalidpassword");
    loginButton.click();
    expect(error.getText()).toMatch("Password not valid.");

    username.sendKeys("admin2");
    password.sendKeys("someinvalidpassword");
    loginButton.click();
    expect(error.getText()).toMatch("Incorrect username.");
  });

  it('should accept a valid email address and password', function() {
    username.clear();
    password.clear();

    username.sendKeys('admin');
    password.sendKeys('fubotv');
    loginButton.click();
    expect(element(by.binding('{{user.displayName}}')).getText()).toEqual("Administrator");
  });

  it('should return to the login page after logout', function() {
    element(by.xpath('//li[@class="dropdown user-dropdown"]/a[1]')).click();
    var logoutButton = element(by.xpath('//ul[@class="dropdown-menu"]/li[1]/a'));
    logoutButton.click();
    expect(browser.getCurrentUrl()).toEqual(loginURL);
  });
});

Config for phantomjs:

// myConf.js
exports.config = {

  seleniumAddress: 'http://localhost:9515',

  capabilities: {

    'browserName': 'phantom',

    'phantomjs.binary.path':'./../../node_modules/phantomjs/bin/phantomjs',

    'phantomjs.cli.args':['--logfile=PATH', '--loglevel=DEBUG']
  },

  specs: [
    'e2e/**/*Test.js'
  ],

  jasmineNodeOpts: {
    onComplete: null,
    isVerbose: false,
    showColors: true,
    includeStackTrace: false
  }
}

i'm getting error: Failures:

  1) Authentication capabilities should accept a valid email address and password
   Message:
     Error: No element found using locator: by.binding("{{user.displayName}}")


  2) Authentication capabilities should return to the login page after logout
   Message:
     Error: Error while waiting for Protractor to sync with the page: {"message":"Can't find variable: angular","line":4,"sourceId":140550656205136,"stack":"ReferenceError: Can't find variable: angular\n    at :4\n    at anonymous (:9)\n    at Na (phantomjs://webpage.evaluate():14)\n    at phantomjs://webpage.evaluate():15\n    at phantomjs://webpage.evaluate():15\n    at phantomjs://webpage.evaluate():16\n    at phantomjs://webpage.evaluate():16\n    at phantomjs://webpage.evaluate():16","stackArray":[{"sourceURL":"","line":4},{"function":"anonymous","sourceURL":"","line":9},{"function":"Na","sourceURL":"phantomjs://webpage.evaluate()","line":14},{"sourceURL":"phantomjs://webpage.evaluate()","line":15},{"sourceURL":"phantomjs://webpage.evaluate()","line":15},{"sourceURL":"phantomjs://webpage.evaluate()","line":16},{"sourceURL":"phantomjs://webpage.evaluate()","line":16},{"sourceURL":"phantomjs://webpage.evaluate()","line":16}],"name":"ReferenceError"}


Finished in 7.568 seconds
4 tests, 7 assertions, 2 failures

witch means it still at the login page, because this element {{user.displayName}} exists only at protected page. when i'm running at chrome, it works as well.

Answer 1

Are you using twitter bootstrap on your site? It might be that phantomJS is being sized too small. I had the same issue until I did:

onPrepare() {
  browser.driver.manage().window().setSize(1600, 800);
}