Phantomjs cannot find element where chrome and firefox can

[aarkanov]

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.

[juliemr]

I've made a new label for PhantomJS issues now, so these can be nicely sorted and searched for people using phantom.

As a quick test, can you give the anchor element an id and try finding it using by.id, and see if that works? If it does, we've narrowed down the problem to something with phantomJS's ghostdriver and linkText.

[wayneseymour]

I had a similar issue a few weeks ago.
I just did not have the time to look into it.

[aarkanov]

Thanks for the quick reply, I've updated the element to have an id and that worked just fine, so it looks like its something to do with the linkText

[aarkanov]

after messing around some more i now get the following message:

     UnknownError: {"errorMessage":"Element is not currently visible and may not be manipulated","request":{"headers":{"Accept":"application/json, image/png","Connection":"Keep-Alive","Content-Length":"27","Content-Type":"application/json; charset=utf-8","Host":"localhost:11076"},"httpVersion":"1.1","method":"POST","post":"{\"id\":\":wdc:1394197850236\"}","url":"/click","urlParsed":{"anchor":"","query":"","file":"click","directory":"/","path":"/click","relative":"/click","port":"","host":"","password":"","user":"","userInfo":"","authority":"","protocol":"","source":"/click","queryKey":{},"chunks":["click"]},"urlOriginal":"/session/e621a050-a5f9-11e3-9786-4521f3073e1c/element/%3Awdc%3A1394197850236/click"}}
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":"Element is not currently visible and may not be manipulated","request":{"headers":{"Accept":"application/json, image/png","Connection":"Keep-Alive","Content-Length":"27","Content-Type":"application/json; charset=utf-8","Host":"localhost:11076"},"httpVersion":"1.1","method":"POST","post":"{\"id\":\":wdc:1394197850236\"}","url":"/click","urlParsed":{"anchor":"","query":"","file":"click","directory":"/","path":"/click","relative":"/click","port":"","host":"","password":"","user":"","userInfo":"","authority":"","protocol":"","source":"/click","queryKey":{},"chunks":["click"]},"urlOriginal":"/session/e621a050-a5f9-11e3-9786-4521f3073e1c/element/%3Awdc%3A1394197850236/click"}}
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 ====
WebElement.click()
    at element.(anonymous function) [as click] (/usr/local/lib/node_modules/protractor/lib/protractor.js:452:32)
    at /usr/local/lib/node_modules/protractor/lib/protractor.js:89:34
==== 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)

the test code that i'm running against protractor is as follows:

    it('will try to click on news & education', function() {
        element(by.id('newsButton')).click();
        var educationPage = element(by.tagName("body")).getText();
        expect(educationPage).toContain("Follow us on Twitter");
    });

[CalamarBicefalo]

I'm having the same issue with 1.0.4 version indeed it seems to be because of By.linkText()

[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);
    });

[CalamarBicefalo]

Wow! Thank you both. Indeed the problem was that as you said. I just thought it was some kind of driver issue...
Maybe the window size on the driver should be configured in a typical way to avoid these kind of problems.
Anyway, I appreciate your help prety much.

[henrytao-me]

Hi @mcalthrop ,

Would you like to help me out? I still cant make protractor work with phantomjs.
Case 1: If I use protractor_runner, put below setting in config file and start selenium jar file, I just got phantomjs crash

capabilities: {
    'browserName': 'phantomjs',
    'phantomjs.binary.path': 'node_modules/phantomjs/bin/phantomjs'
}

// SIMPLE DEFAULT TEST
describe('angularjs homepage', function() {
    it('should greet the named user', function() {
        browser.get('http://www.angularjs.org');

        element(by.model('yourName')).sendKeys('Julie');

        var greeting = element(by.binding('yourName'));

        expect(greeting.getText()).toEqual('Hello Julie!');
    });

    describe('todo list', function() {
        var todoList;

        beforeEach(function() {
            browser.get('http://www.angularjs.org');

            todoList = element.all(by.repeater('todo in todos'));
        }, 300000);

        it('should list todos', function() {
            expect(todoList.count()).toEqual(2);
            expect(todoList.get(1).getText()).toEqual('build an angular app');
        });

        it('should add a todo', function() {
            var addTodo = element(by.model('todoText'));
            var addButton = element(by.css('[value="add"]'));

            addTodo.sendKeys('write a protractor test');
            addButton.click();

            expect(todoList.count()).toEqual(3);
            expect(todoList.get(2).getText()).toEqual('write a protractor test');
        });
    });
});

I think It crashed on the line

element(by.model('yourName'))

Case 2: If I start ghostdriver as their instruction, it still crash.

Case 3: I combine case 1 and case 2, it still crash.

Thanks!

[mcalthrop]

@CalamarBicefalo: glad someone else benefited from my pain! :-) And I have no idea why the default window size for phantomjs would be so small. Seems short-sighted to me.

@henrytao-me: best to keep this in the relevant thread (#557) – I've responded there.

[juliemr]

Sounds like this issue is solved with screen sizing - closing as resolved!