Is it possible to click an element with phantomJS in protractor?

Question

I am trying to click a button while using PhantomJS as my choice of browser, and I am getting many errors.

First attempt, straight clicking a button:

var button  = $('#protractorTest');
button.click();

Returns the error:

Element is not currently visible and may not be manipulated

Attempting to resize the phantomJS viewport seems to have no effect. The button is at the top left of the screen, but somehow out of the (if I remember correctly) default 400x300 viewport.

browser.manage().window().setSize(1920, 1080);

I cannot seem to log the window size at any point in time, the closest I can get is an unfinished promise being logged. So, I am unsure if the screensize changes at all.

Searching through lots of other questions, I've tried various execute scripts, different ways to select the element with no success thus far.

Trying to run an execute script to click it, I get issues with undefined is not a function:

var hiddenElement = browser.findElement(by.id('protractorTest'));
browser.executeScript("arguments[0].click()", hiddenElement).then(function() {
    expect(true).toMatch(true);
});

returns this error:

Failed: {"errorMessage":"'undefined' is not a function (evaluating 'arguments[0].click()')","request":{"headers":{"Accept-Encoding":"gzip,deflate","Connection":"Keep-Alive","Content-Length":"75","Content-Type":"application/json; charset=utf-8","Host":"localhost:42837","User-Agent":"Apache-HttpClient/4.3.6 (java 1.5)"},"httpVersion":"1.1","method":"POST","post":"{\"script\":\"arguments[0].click()\",\"args\":[{\"ELEMENT\":\":wdc:1441214073816\"}]}","url":"/execute","urlParsed":{"anchor":"","query":"","file":"execute","directory":"/","path":"/execute","relative":"/execute","port":"","host":"","password":"","user":"","userInfo":"","authority":"","protocol":"","source":"/execute","queryKey":{},"chunks":["execute"]},"urlOriginal":"/session/0fa194a0-5196-11e5-a5f1-99fee78af55e/execute"}}
    Build info: version: '2.45.0', revision: '5017cb8', time: '2015-02-26 23:59:50'
    System info: host: 'DS5539', ip: '10.4.4.65', os.name: 'Windows 7', os.arch: 'amd64', os.version: '6.1', java.version: '1.8.0_40'
    Driver info: driver.version: unknown

Trying to run the test with a webElement selector returns the same error as above:

var hiddenElement = element(by.id('protractorTest')).getWebElement();
browser.executeScript("arguments[0].click()", hiddenElement).then(function() {
    expect(successPage.isDisplayed).toBeTruthy();
});

Trying to run the test with a protractor select gives a different error:

var hiddenElement = $('#protractorTest');
browser.executeScript("arguments[0].click()", hiddenElement).then(function() {
    expect(successPage.isDisplayed).toBeTruthy();
});

Maximum call stack size exceeded

Is there any way to click a button using phantomJS and protractor?

Answer 1

First of all, if you choose PhantomJS as your target browser, I bet you'll come back to SO with a new problem in the nearest future. Even protractor developers recommend against it:

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

Plus, if you are doing this for testing, you should have your test environment be as close to the end user's environment as possible - have you seen the users of your application using PhantomJS? - probably not.

If you are picking up PhantomJS because of it's headless nature and absence of a real display, you might run firefox or chrome in a headless mode too, see:

• protractor with any headless browser?
• What is a good headless browser to run with protractor?

Also, read this @Louis's answer - great essay on headless vs headful.

Or, you can use remote selenium servers at BrowserStack or Sauce Labs or similar services.

---

The latest approach you've taken has a problem - isDisplayed should be called:

var hiddenElement = $('#protractorTest');
browser.executeScript("arguments[0].click()", hiddenElement).then(function() {
    expect(successPage.isDisplayed()).toBeTruthy();
    //                        HERE^
});

Or/And, you may scroll into view of an element with scrollIntoView():

var button  = $('#protractorTest');
browser.executeScript("arguments[0].scrollIntoView();", button.getWebElement()).then(function () {
    button.click();
});

Adding an explicit wait might also help:

var EC = protractor.ExpectedConditions;
browser.wait(EC.visibilityOf(button), 5000);