PhantomJS fails on demo test example

dkoo761 commented 10 years ago

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 commented 10 years ago

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

davidlinse commented 10 years ago

Iirc it appeared on the mailing list as well recently.

dkoo761 commented 10 years ago

Indeed, I just found that link as well: https://groups.google.com/forum/#!topic/nightwatchjs/gnoStTN7Q6U

davidlinse commented 10 years ago

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 commented 10 years ago

see also google sniff

~david

dkoo761 commented 10 years ago

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.

NickColley commented 10 years ago

Had this problem also, thought I'd broken something. Probably worth looking at since it's the first example you try out.

dkoo761 commented 10 years ago

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.

iwanjunaid commented 10 years ago

@dkoo761 have you try capture google.com using phantomjs directly without nighwatchjs ? How is the result compared to nightwatchjs captured page ?

beatfactor commented 10 years ago

It's a mobile view of the page.

On Wednesday, September 10, 2014, Iwan Junaidy notifications@github.com 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 .

dkoo761 commented 10 years ago

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.

vinogradoff commented 10 years ago

I have some problem on "submitting" forms with phantomJS here.

iwanjunaid commented 10 years ago

@vinogradoff Could you be more specific ?

decates commented 9 years ago

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?

beatfactor commented 9 years ago

I've changed the sample test as suggested, thanks. I hope it's ok to close this now.

SuneRadich commented 9 years ago

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?

maranomynet commented 9 years ago

+1

christopherscott commented 9 years ago

+1

jantonypdx commented 8 years ago

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"

mmahalwy commented 8 years ago

I have a problem like this but with [class^="peekPro"] [class^="icon"] not sure if it's a phantomjs problem or something else...

nightwatchjs / nightwatch

PhantomJS fails on demo test example #243