Protractor: 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!

[daniellmb]

FYI if you are working with exact sizes you may need to add 10px to account for scrollbars!

[NicoSa]

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

This worked for us! Thanks at sgilroy !

[ghost]

Exact same issue, wonderful solution @mcalthrop !
Java version :
driver.manage().window().setSize(new Dimension(1280, 1024));

[LightningK0ala]

Thanks @mcalthrop!

[mcalthrop]

de nada! :-)

[serpulga]

In config:

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

[mightymuke]

@mcalthrop - I could kiss you - thank you so much!

(Github needs a thanks button)

[glennypagaduan]

@mcalthrop Hi,

I am facing the same problem with and tried your suggestion. But seems not working for me.

Issue: No element found using locator: by.model....

Here is my config file:
exports.config = {

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

'baseUrl' : 'http://....', <--- pointing in my local server to check my web app

'capabilities' : {
    'browserName'                    : 'phantomjs',
    'phantomjs.binary.path'          : '/usr/local/bin/phantomjs',
    'phantomjs.ghostdriver.cli.args' : [ '--loglevel=DEBUG' ]
},

'allScriptsTimeout' : 100000,

'getPageTimeout' : 100000,

'specs' : [ 'test/e2e/login/login.spec.js' ],

'framework' : 'jasmine2',

'jasmineNodeOpts' : {
    'showColors'             : true, 
    'defaultTimeoutInterval' : 100000,
    'showTiming'             : true,
    'print'                  : function () {},
    'realtimeFailure'        : true
},

'onPrepare' : function () {
    var SpecReporter = require( 'jasmine-spec-reporter' );
    browser.ignoreSynchronization = false;
    browser.driver.manage().window().setSize( 1280, 1024 );
    // browser.driver.manage().window();
    jasmine.getEnv().addReporter( new SpecReporter( { displayStacktrace : true } ) );
}

};

Versions:
Protractor 2.0
Phantomjs 2.0
Jasmin 2

[dotjose]

My cases normally relates with this issue but mine is a little bit different. All my tests pass in firefox browser but when I change my browser config to phantomjs. All the tests failed. Every test suit failed why this is so? Is there any one who could help me?

[sallojusuresh]

https://github.com/angular/protractor/blob/master/docs/browser-support.md

(**) We recommend against using PhantomJS for tests with Protractor. There are many reported issues with PhantomJS crashing and behaving differently from real browsers.

[oiwn]

http://stackoverflow.com/questions/29632810/firefox-sees-element-where-phantomjs-does-not-when-using-selenium-webdriver

this one fixed issue for me

[michaelezehi]

Yep! I had similar issues and the sizing of PhantomJS was the culprit. Thanks for the heads up.

[skarensmoll]

Thank you ! @mcalthrop Your solution worked !
I really appreciate your help pretty much.

[capitolkrs]

getDriver().manage().window().setSize(new Dimension(1280, 1024));
if you are using java

[Shyam-Chen]

const SpecReporter = require('jasmine-spec-reporter');
const phantomjs = require('phantomjs-prebuilt');
const babel = require('babel-core/register');

exports.config = {
  specs: [
    './src/**/*.e2e-spec.js'
  ],
  exclude: [],
  capabilities: {
    'browserName': 'phantomjs',
    'phantomjs.binary.path': phantomjs.path,
    'phantomjs.ghostdriver.cli.args': ['--loglevel=DEBUG']
  },
  onPrepare() {
    babel({ presets: ['latest'] });
    jasmine.getEnv().addReporter(new SpecReporter({ displayStacktrace: true }));
    global.webdriver = browser.driver;
    webdriver.ignoreSynchronization = true;
    webdriver.manage().window().setSize(1280, 768);
  },
  framework: 'jasmine',
  jasmineNodeOpts: {
    isVerbose: false,
    showColors: true,
    includeStackTrace: false
  }
};

describe('About', () => {

  beforeEach(() => {
    webdriver.get('http://localhost:9876/about');
  });

  it('getCurrentUrl toMatch', () => {
    expect(webdriver.getCurrentUrl()).toMatch('/about');
  });

  it('getText toEqual', () => {
    let el = webdriver.findElement(by.css('#page p:nth-child(1)'));
    expect(el.getText()).toEqual('About');
  });

});
``

[edgarechm]

I have seen a lot commenting that this:

browser.driver.manage().window().setSize(1280, 1024);

...solved their problems. I tried and yes, solved the issue in my code. But I have not seen that anyone say WHY this solves the issue. WHY sticking to a window size of 1280x1024 pixels?

If I use _1 million by 1 millon pixels, problem solved FOREVER_.

Why not? Why yes? @mcalthrop ?

[mcalthrop]

@edgarechm: the answer is in this comment. It relates to Twitter Bootstrap.

[AdamWital]

It still doesnt work for me..

[smajazayeri]

The same :( The error I receive is as follows:

Failed: {"errorMessage":"Unable to find element with css selector '*[id=\"cred_userid_inputtext\"]'","request":{"headers":{"Accept-Encoding":"gzip,deflate","Connection":"Keep-Alive","Content-Length":"66","Content-Type":"application/json; charset=utf-8","Host":"localhost:28755","User-Agent":"Apache-HttpClient/4.5.1 (Java/1.8.0_121)"},"httpVersion":"1.1","method":"POST","post":"{\"using\":\"css selector\",\"value\":\"*[id=\\\"cred_userid_inputtext\\\"]\"}","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/dc848950-141d-11e7-b1ec-2fb7a4bbff83/element"}}
    For documentation on this error, please visit: http://seleniumhq.org/exceptions/no_such_element.html
    Build info: version: '2.53.1', revision: 'a36b8b1', time: '2016-06-30 17:37:03'
    System info: host: 'MININT-S1C4UPR', ip: '10.161.177.65', os.name: 'Windows 10', os.arch: 'x86', os.version: '10.0', java.version: '1.8.0_121'
    Driver info: driver.version: unknown

[pmros]

@AdamWital @smajazayeri maybe some javascript code is failing. Check phantomjs console log: browser.log('browser'). I had similar issues with pantomjs. Finally I solved it by adding polyfills (core.js), needed in phantomjs but not in chrome (a more modern browser).

[Shyam-Chen]

Switch to Chrome headless.

[edgarechm]

@pmros
1: "browser.log is not a function." (sic) Message returned by protractor.
2: What do you mean with "adding polyfills, needed in phantomjs"(sic)? how do you add "polyfills" to phantomjs?

@Shyam-Chen headless chrome is not an option in Windows. That only works on linux. But if you know how to do it for Windows, please tell us.

[pmros]

@edgarechm

1. I used browser.log in webdriverio. I guess protactor has something similar.
2. I added polyfills to my html file, not to phantonjs specifically:

<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>

I hope my comments can help someone.

[cedarmora]

In my case, the problem was that the class name of the element that I was looking for changed when I switched from Google Chrome to PhantomJS. I found this out by printing the page source from each browser, and piping the output to a file, where I could inspect it from the browser tools. The solution for me was that while the class names changed, the role attribute did not, so I could find the elements by xpath, where the role attribute was equal to the constant role that did not change between browsers.

[jeserkin]

I have exact id and in one test it finds element and in the next already gets described error.