What is the browser variable at nightwatchjs

Question

I just learned about nighwatchjs and try to understand the framework to write my tests. Upon the examples I can notice the api using the variable browser - for which I could not find any more information on API Reference or any external docs.

I think I understood the concept of page object design pattern and I am experienced in using selectors etc.

But I would like to find out more about the browser object that is used as it confuses me what is really going on:

Consider this example:

this.demoTestGoogle = function (browser) {
  browser
    .url('http://www.google.com')
    .waitForElementVisible('body', 1000)
    .setValue('input[type=text]', 'nightwatch')
    .waitForElementVisible('button[name=btnG]', 1000)
    .click('button[name=btnG]')
    .pause(1000)
    .assert.containsText('#main', 'The Night Watch')
    .end();
};

I can understand that it uses the google url and will wait 1000ms to have the body tag visible, entering nightwatch value, waiting, clicking a button, pausing to have something done and do some assertions. But still the browser variable is pretty anonymous to me - what can I do with it further more?

Answer 1

I know the Commands documented at nightwatchjs.org describe what the browser object can do.

Let me know if this helps. I'm just learning myself, but I'll try share what I know about these commands.

Answer 2

The browser object is the essential foundation of all tests since it represents, literally, the browser (or session) environment. I write environment, per se, since it is misleading to say that browser, in this context, is equal to the current window, since you could for example be running tests headlessly with PhantomJS.

You can do a number of cool things with the browser object. In my Nightwatch config I set a custom globals.js file under globals_path which allows me to access global variables like so:

browser.globals.someFunction(browser.globals.someVariable);

This is also where you actually use all of the commands of the Nightwatch API. So, to maximise the window of the currently running environment, you could use:

browser.maximizeWindow();

before, say, pointing the browser to the URL you would like to test:

browser.url(www.example.com);

The reason the browser object might look a little strange in the example you posted is because of how Nightwatch supports and allows all of its commands to be chained (link to command chaining example using jQuery - same principles apply).

It does look awfully pretty, when chained, doesn't it!? But you don't have to chain your tests. You can simply write browser. before each command you wish to send to the session.

Browser, by the way, is not a reserved word here. You can call it whatever you want. I actually use the word 'client' since I thought the word 'browser' was misleading, since I also run tests on PhantomJS alongside Chrome and Firefox.

Hope that helps!