Nightwatch script runs code before browser opens
<p>I have a lot of tests where the script runs first, before the browser actually starts, and this sometimes makes the test run incorrectly. The latest scenario that actually causes me problems is a <code>try/catch</code> expression, where it doesn't really catch the fact that some of the elements are not present (though expected not to be present).  </p>

<p>In my test i am trying to loop through a list of 5 products, try to add them to cart and check for a button. For some of the products i know the Add to Cart button must be there, in some cases i know it won't be there, so i try to catch the error and move to the next one. (I know it's not the smartest approach, but i'm trying little by little to learn and improve my programming skills in javascript).</p>

<p>So my test contains this, as main functionality, besides reading test data from a file and some variables declaration:</p>

<pre><code>var myFunction = function (x) {
      var productID = data[x][0];
      var quantity = data[x][1];
      browser.url(homepage + 'p/' + productID);


      try {
            pageObject.addToCart(quantity);
            pageObject.click('@continueShopping');
            browser.pause(500);
            browser.assert.ok(true);
          }
      catch (err) {
            console.log('This error is expected');
            browser.asset.ok(true, 'but the product is not addable to cart');
         };
    }


for (var i = 0; i &lt; data.length; i++) {
       myfunction(i);
    }
</code></pre>

<p>I'm getting this:</p>

<pre><code>[Add To Cart Different Products] Test Suite
==================================================================

Running:  Add to cart different types of products
 ? Passed [ok]: true ok
 ? Passed [ok]: true ok
 ? Passed [ok]: true ok
 ? Passed [ok]: true ok
 ? Passed [ok]: true ok // this means is ran through whole list of 5 products already and just afterwards it starts trying to actually add them to cart (run the code)
 ? Element &lt;body&gt; was visible after 360 milliseconds.
 ERROR: Unable to locate element: "#addToCartButton" using: css selector
 ERROR: Unable to locate element: ".continueShopping" using: css selector
</code></pre>

<p>What happens here is that the script runs the assertions immediately once started, but before the browser window is actually launched. And once it launches, it starts doing the add to cart actions. So it looks to me that it's not actually running the whole sequence of code inside <code>try</code>, which breaks the point of using the <code>try/catch</code> in the first place.  </p>

<p>How can i solve this situation? Is there a way to make the script wait for the browser to be actually launched, Or maybe a way to check if it's launched? I have the feeling that there is something specific for Nightwatch that generates this asynchronous behavior and that i'm missing when writing my tests. Could you please shed some light over this?</p>

<p><strong>Note:/Edit</strong> Please note that i have a <code>before</code> block before my test that it meant to launch the browser <strong>first</strong> and make sure the body is visible. But as you can notice in the console results, this happens after the assertions are made, so it doesn't have an effect.</p>

<pre><code> before : function (browser) {
        browser.url(homepage)
        .waitForElementVisible('body', 5000);
 },
</code></pre>

<p><strong>Update:</strong> by someone's suggestion, this should be achieved by using callbacks on that function, which i have tried. when i used it like this:</p>

<pre><code>var myFunction = function (x) {
        console.log("on line" + x);
        return x;
    };

    var callback = function (y) {
        //var declaration etc
        try { //the code here }
        catch (err) { //the code here }            
    };

    for(var lineNr = 0; lineNr &lt; data.length; lineNr++) {
        myFunction(lineNr, function (){
            console.log(lineNr);
            callback(lineNr);
        });
    }
</code></pre>

<p>or like this:</p>

<pre><code>var myFunction = function (x,callback) {
        console.log("on line" + x);
        callback(x);
    };

    var callback = function (y) {
        // variables declaration
        try { //code here}
        catch (err) { //code here }
    };
    for(var lineNr = 0; lineNr &lt; data.length; lineNr++) {
        myFunction(lineNr);
    }
</code></pre>

<p>i have got the same results, no success with it. or maybe i'm doing it wrong?</p>