Nightwatch: PhantomJS fails on demo test example
When running the demo test example on the nightwatchjs.org homepage using PhantomJS as the browser, I get the following output:
[Google Test] Test Suite
========================
Running: Demo test Google
✔ Element <body> was visible after 53 milliseconds.
✔ Testing if the page title equals "Google".
✖ Testing if element <input[type=text]> is visible. Element could not be located. - expected "true" but got: null
ERROR: Unable to locate element: "input[type=text]" using: css selector
TEST FAILURE: 1 error during execution, 1 assertions failed, 2 passed and 6 skipped.. (6489 ms)
Strangely, if I change .assert.visible("input[type=text]") to .assert.visible("input[name=q]") then that step passes but the test later fails on another step: waitForElementVisible("button[name=btnG]", 1000).
My environment:
Mac OSX 10.9.4
Nightwatch 0.5.18
PhantomJS 1.9.2
selenium-server-standalone-2.42.0.jar
Note: the test runs fine against Firefox.
dkoo761
All 20 comments
Looks like someone else is having the same problem: http://stackoverflow.com/questions/25148268/chromedriver-works-but-phantomjs-unable-to-locate-item-using-css-selector
dkoo761
on 22 Aug 2014
Iirc it appeared on the mailing list as well recently.
davidlinse
on 23 Aug 2014
Indeed, I just found that link as well: https://groups.google.com/forum/#!topic/nightwatchjs/gnoStTN7Q6U
dkoo761
on 23 Aug 2014
So it seems to be an issue w/ google.com itself.
The following test is passing for me running w/ 0.5.18
module.exports = {
tags: ['casperjs'],
'Demo test casperjs.readthedocs.org' : function (client) {
client
.url('http://casperjs.readthedocs.org/en/latest/modules/casper.html')
.waitForElementVisible('body', 1000)
.assert.title('The casper module — CasperJS 1.1.0-DEV documentation')
.useCss()
.assert.visible('input[type="text"]')
.useXpath()
.assert.visible('//input[@type="text"]')
.setValue('//input[@type="text"]', 'zoom')
.useCss()
.waitForElementVisible('input[value="Go"]', 1000)
.click('input[value="Go"]')
.pause(1000)
.assert.containsText('#search-documentation', 'Search')
.end();
}
};
regards
~david
davidlinse
on 23 Aug 2014
see also google sniff
~david
davidlinse
on 23 Aug 2014
Thanks David and good to know this particular issue is specific to "PhantomJS + Google". It's strange that every other browser I tested (Firefox, Safari and Chrome all on Mac OSX) is able to run the google demo test just fine. So there definitely seems to be an issue with PhantomJS or GhostDriver or the way they interface with Nightwatch.
dkoo761
on 23 Aug 2014
Had this problem also, thought I'd broken something. Probably worth looking at since it's the first example you try out.
nickcolley
on 24 Aug 2014
I think this might be due to Google either A/B testing or rendering a different page based on user agent. I used saveScreenshot() to take a screenshot in PhantomJS just before the test failure and the screen looks quite different from what I see in Firefox or Chrome. I would suggest perhaps replacing google.com in the demo with another search engine that is consistent across all browsers.
dkoo761
on 3 Sep 2014
@dkoo761 have you try capture google.com using phantomjs directly without nighwatchjs ? How is the result compared to nightwatchjs captured page ?
iwanjunaid
on 10 Sep 2014
It's a mobile view of the page.
On Wednesday, September 10, 2014, Iwan Junaidy [email protected]
wrote:
@dkoo761 https://github.com/dkoo761 have you try capture google.com
using phantomjs directly without nighwatchjs ? How is the result compared
to nightwatchjs captured page ?—
Reply to this email directly or view it on GitHub
https://github.com/beatfactor/nightwatch/issues/243#issuecomment-55060710
.
beatfactor
on 10 Sep 2014
You're right, I noticed this on another project I'm working on. Calling browser.maximizeWindow() at the start of the test should solve the problem.
dkoo761
on 14 Sep 2014
I have some problem on "submitting" forms with phantomJS here.
vinogradoff
on 15 Sep 2014
@vinogradoff Could you be more specific ?
iwanjunaid
on 16 Sep 2014
Just to clarify the original issue, this is caused by Google serving up different content depending on the user-agent, and (validly) omitting type="text" on the input element, as it's the default value.
For Chrome 41 the page is XHTML, and the text box looks like this:
<input
class="gsfi lst-d-f"
id="lst-ib"
maxlength="2048"
name="q"
autocomplete="off"
title="Search"
type="text"
value=""
aria-label="Search"
aria-haspopup="false"
role="combobox"
aria-autocomplete="both"
dir="ltr"
spellcheck="false"
style="border: none; ..."
/>
For PhantomJS 2.0.0 it looks like this.
<input
style="color: rgb(0, 0, 0); margin: 0px; padding: 5px 8px 0px 6px; vertical-align: top; outline: none;"
autocomplete="off"
class="lst"
value=""
title="Google Search"
maxlength="2048"
name="q"
size="57"
dir="ltr"
spellcheck="false">
Perhaps the sample test could be changed to use input[name="q"], or just test nightwatchjs.org instead, as you have control over what is served up?
decates
on 19 Apr 2015
I've changed the sample test as suggested, thanks. I hope it's ok to close this now.
beatfactor
on 19 Apr 2015
Just to note, that the demo test on the http://nightwatchjs.org/ website still fails in PhantomJS
It might be better to use the nightwatchjs.org website as the target for the demo test - so that it wont break if/when google decides to change the way their search page works?
SuneRadich
on 5 Jun 2015
+1
maranomynet
on 24 Jun 2015
+1
christopherscott
on 5 Oct 2015
As @decates indicated above, if you want to use phantomjs, but are okay with it spoofing as a different browser via the user agent, you can configure phantomjs' user-agent capabilities like this (spoofing as Mac Chrome here):
"desiredCapabilities": {
"browserName": "phantomjs",
"phantomjs.cli.args" : ["--ignore-ssl-errors=true"],
"phantomjs.page.settings.userAgent" : "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36"
}
Then your tests should act the same as your other browser. Using any browser you like, you can check the user-agent string that it sends here: http://www.httpuseragent.org/. Here are some other examples:
// Mac Chrome 46
"phantomjs.page.settings.userAgent" : "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36"
// Windows Chrome 46
"phantomjs.page.settings.userAgent" : "Mozilla/5.0 (Windows NT 6.3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36"
// Mac Firefox 42.0
"phantomjs.page.settings.userAgent" : "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.10; rv:42.0) Gecko/20100101 Firefox/42.0"
// Windows Firefox 42.0
"phantomjs.page.settings.userAgent" : "Mozilla/5.0 (Windows NT 6.3; rv:42.0) Gecko/20100101 Firefox/42.0"
// PhantomJS 2.0
"phantomjs.page.settings.userAgent" : "Mozilla/5.0 (Macintosh; Intel Mac OS X) AppleWebKit/538.1 (KHTML, like Gecko) PhantomJS/2.0.0 Safari/538.1"
jantonypdx
on 9 Nov 2015
I have a problem like this but with [class^="peekPro"] [class^="icon"] not sure if it's a phantomjs problem or something else...
mmahalwy
on 14 Jan 2016
Related issues
dakebl
·
4Comments
sgleonardoopitz
·
3Comments
betweenbrain
·
4Comments
antogyn
·
4Comments
bushev
·
4Comments
Most helpful comment
As @decates indicated above, if you want to use phantomjs, but are okay with it spoofing as a different browser via the user agent, you can configure phantomjs' user-agent capabilities like this (spoofing as Mac Chrome here):
Then your tests should act the same as your other browser. Using any browser you like, you can check the user-agent string that it sends here: http://www.httpuseragent.org/. Here are some other examples: