Phantomjs cannot find element where chrome and firefox can

Hi,

I’m having an issue running protractor tests against phantomjs, and was wondering if I could get some help.

When I run the tests against firefox or chrome they pass no problem, however when I run the tests against phantomjs I get an error.

Here are all my steps:

1. start up webdriver with webdriver-manager start
2. the conf file looks as follows:

  exports.config = {

    seleniumAddress: 'http://localhost:4444/wd/hub',

    specs: [
    'PlayTests.js',
    ],

  multiCapabilities: [{
    'browserName': 'chrome'
  }, {
    'browserName': 'phantomjs'
  },{
    'browserName': 'firefox'
  }],



rootElement: 'body',

onPrepare: function () {
    // require('jasmine');
    require('jasmine-reporters');
    jasmine.getEnv().addReporter(
      new jasmine.JUnitXmlReporter('xmloutput', true, true));

        //     jasmine.getEnv().addReporter(new jasmine.JUnitXmlReporter(
    //         'outputdir/', true, true));
},

baseUrl: 'a base url',

jasmineNodeOpts: {
    // onComplete will be called just before the driver quits.
    onComplete: null,
    // If true, display spec names.
    isVerbose: false,
    // If true, print colors to the terminal.
    showColors: true,
    // If true, include stack traces in failures.
    includeStackTrace: true,
    // Default time to wait in ms before a test fails.
    defaultTimeoutInterval: 30000
  }
};

1. My test looks like this:

describe ('this is testing the new member website', function() {

    // var driver = null;
    beforeEach(function() {


        browser.get('/#');

    });

    it('will try to click on an element on the page', function() {
        element(by.linkText('News & Education')).click();
        var educationPage = element(by.tagName("body")).getText();
        expect(educationPage).toContain("Education");
    });

});

1. My error looks like this:

  1) this is testing the new member website will try to click on an element on the page
   Message:
     UnknownError: {"errorMessage":"Unable to find element with link text 'News & Education'","request":{"headers":{"Accept":"application/json, image/png","Connection":"Keep-Alive","Content-Length":"48","Content-Type":"application/json; charset=utf-8","Host":"localhost:17552"},"httpVersion":"1.1","method":"POST","post":"{\"using\":\"link text\",\"value\":\"News & Education\"}","url":"/element","urlParsed":{"anchor":"","query":"","file":"element","directory":"/","path":"/element","relative":"/element","port":"","host":"","password":"","user":"","userInfo":"","authority":"","protocol":"","source":"/element","queryKey":{},"chunks":["element"]},"urlOriginal":"/session/8d8fe850-a542-11e3-a78e-0bf0314fab61/element"}}
Build info: version: '2.39.0', revision: 'ff23eac', time: '2013-12-16 16:11:15'
System info: host: 'TestingMacs-Mac-mini.local', ip: '10.50.36.90', os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.9.2', java.version: '1.6.0_65'
Driver info: driver.version: unknown
   Stacktrace:
     UnknownError: {"errorMessage":"Unable to find element with link text 'News & Education'","request":{"headers":{"Accept":"application/json, image/png","Connection":"Keep-Alive","Content-Length":"48","Content-Type":"application/json; charset=utf-8","Host":"localhost:17552"},"httpVersion":"1.1","method":"POST","post":"{\"using\":\"link text\",\"value\":\"News & Education\"}","url":"/element","urlParsed":{"anchor":"","query":"","file":"element","directory":"/","path":"/element","relative":"/element","port":"","host":"","password":"","user":"","userInfo":"","authority":"","protocol":"","source":"/element","queryKey":{},"chunks":["element"]},"urlOriginal":"/session/8d8fe850-a542-11e3-a78e-0bf0314fab61/element"}}
Build info: version: '2.39.0', revision: 'ff23eac', time: '2013-12-16 16:11:15'
System info: host: 'TestingMacs-Mac-mini.local', ip: '10.50.36.90', os.name: 'Mac OS X', os.arch: 'x86_64', os.version: '10.9.2', java.version: '1.6.0_65'
Driver info: driver.version: unknown
==== async task ====
WebDriver.findElement(By.linkText("News & Education"))
    at Protractor.findElement (/usr/local/lib/node_modules/protractor/lib/protractor.js:573:25)
    at Object.elementFinder.(anonymous function) [as click] (/usr/local/lib/node_modules/protractor/lib/protractor.js:88:24)
    at null.<anonymous> (/Users/TestingMac/WebEx/PlayTests.js:14:44)
    at /usr/local/lib/node_modules/protractor/jasminewd/index.js:54:12
    at wrapper [as _onTimeout] (timers.js:252:14)
==== async task ====
    at null.<anonymous> (/usr/local/lib/node_modules/protractor/jasminewd/index.js:53:12)
    at null.<anonymous> (/usr/local/lib/node_modules/protractor/node_modules/minijasminenode/lib/async-callback.js:45:37)
    at Timer.listOnTimeout [as ontimeout] (timers.js:110:15)

Any suggestions would be really appreciated.

[mcalthrop]

Just a thought: I remember running into an issue with similar symptoms a while back (that was when phantomjs wasn’t crashing on me!).

I traced it to this: the site I am building is using Twitter Bootstrap, which has responsive web design built in. As it turns out, the default browser size for phantomjs was small enough that a CSS rule was triggered that meant that the element I was searching for was no longer displayed (it was in the menu bar, and the menu bar changes when you are viewing it on a device with a smaller screen size).

So the upshot was that I now check the browser dimensions in the onPrepare() method in my protractor.conf.js file, and make sure the dimensions are set to minimum values.

Here’s the full text of my current onPrepare() method:

onPrepare: function () {
    // At this point, global 'protractor' object will be set up, and
    // jasmine will be available.
    var minWindowWidth = 1024,
        minWindowHeight = 768,
        browserName,
        platform,
        window = browser.manage().window();

    // The require statement must be down here, since jasmine-reporters
    // needs jasmine to be in the global and protractor does not guarantee
    // this until inside the onPrepare function.
    require('jasmine-reporters');

    browser.getCapabilities().then(function (capabilities) {
            browserName = capabilities.caps_.browserName;
            platform = capabilities.caps_.platform;
        }
    ).then(function getCurrentWindowSize() {
            return window.getSize();
        }
    ).then(function setWindowSize(dimensions) {
            var windowWidth = Math.max(dimensions.width, minWindowWidth),
                windowHeight = Math.max(dimensions.height, minWindowHeight);

            return window.setSize(windowWidth, windowHeight);
        }
    ).then(function getUpdatedWindowSize() {
            return window.getSize();
        }
    ).then(function showWindowSize(dimensions) {
            console.log('Browser:', browserName, 'on', platform, 'at', dimensions.width + 'x' + dimensions.height);
            console.log("Running e2e tests...");
        }
    );

    jasmine.getEnv().addReporter(new jasmine.JUnitXmlReporter('test/results/', true, true));
}

Hope that helps!

Matt

[sgilroy]

I had a similar issue and also resolved the problem by changing the window size. An alternative to setting the window size in the onPrepare of the configuration (as @mcalthrop did above) would be to do it in your test code.

    beforeEach(function() {
        browser.driver.manage().window().setSize(1280, 1024);
    });