Loop is not working properly - nightwatch

Question

I have this code, I want to go thru all the links available at the bottom of the page. After clicking them I want to make sure the URL opened is the correct one. I think the the recursive calls are done too early. Another issue is how can I do to tell that link belongs to certain URL.

function links(browser, total_links) {
    if (total_links <= 0) {
        browser.end();
        return;
    }

    console.log("Number of links: " + total_links);
    console.log('Flag1');

         browser
            .waitForElementVisible('.bottom .socal>span:nth-child(' + total_links + ')', 1000, function () {

            console.log('Flag2');
            browser.execute('scrollIntoView(alignToBottom)')

            .moveToElement('.bottom .socal>span:nth-child(' + total_links + ')', 3, 3)
                .pause(3000)
                .click('.bottom .socal>span:nth-child(' + total_links + ') a', function () {
                    console.log('Flag3');
                    browser.keys(['\uE006'])
                    //  .assert.urlContains('facebook')
                    //.assert.urlEquals('https://www.facebook.com/unitel.ao/?fref=ts')
                            .window_handles(function (result) {
                            console.log('Flag4');
                            browser.assert.equal(result.value.length, 2, 'There should be two windows open.');
                            var handle_1 = result.value[0];
                            var handle_2 = result.value[1];
                            browser.switchWindow(handle_2, function () {
                                browser.closeWindow()
                                    .switchWindow(handle_1, function () {
                                        total_links = total_links - 1;
                                        links(browser, total_links);
                                    });
                            });
                         });

                    console.log('Flag5');
                });
            console.log('Flag6');   
        });
}

module.exports = {
    'Social links': function (browser) {
        var total_links;

        browser
            .url('http://m.unitel.ao/fit/')
            .execute(function () {
                    return document.querySelectorAll("ul.navbar-nav>li").length;
                },
                function (tags) {
                    total_links = tags.value;
                    links(browser, total_links);

                });

        //  .end();
    }
};

Answer 1

Humh, it seems like you were stuck with this days ago.I recommend page-object,it will help you stay away hardcode and easier to change css in the future.

A home page object(home.js) may be like this :

module.exports = {
  url: function() {
    return 'http://m.unitel.ao/fit/';
  },
  commands: [{
    getUrl: function(n) {
      if (n === 3) {
        return 'youtube.com/user/tvUNITEL';
      }
      if (n === 1) {
        return 'facebook.com/unitel.ao/?fref=ts';
      }
      if (n === 2) {
        return 'instagram.com/unitelangola/';
      }
      if (n === 4) {
        return 'plus.google.com/110849312028181626033/posts';
      }
    }
  }],
  elements: {
    facebook: {
      selector: '.bottom .socal>span:nth-child(1)',
    },
    instagram: {
      selector: '.bottom .socal>span:nth-child(2)'
    },
    youtube: {
      selector: '.bottom .socal>span:nth-child(3)'
    },
    googleplus: {
      selector: '.bottom .socal>span:nth-child(4)'
    }
  }
};

And in your test should be like :

module.exports = {
  'Social links': function(browser) {
    const homePage = browser.page.home();
    var j = 0;
    for (var i in homePage.elements) {
      homePage
        .navigate()
        .waitForElementVisible(homePage.elements[i].selector, 5000, false,
          function() {
            browser.pause(3000);
          })
        .click(homePage.elements[i].selector, function() {
          browser
            .pause(2000)
            .window_handles(function(result) {
              url = homePage.getUrl(j + 1);
              var home = result.value[0];
              var handle = result.value[1];
              browser
                .switchWindow(handle)
                .verify.urlContains(url)
                .closeWindow()
                .switchWindow(home);
              j += 1;
            });
        })
    }
  }
};

PS:In case you dont know how to create a page-object, here is the doc http://nightwatchjs.org/guide#using-page-objects.

In config file
Nightwatch.js:

  "src_folders" : ["tests"],
  "output_folder" : "reports",
  "custom_commands_path" : "",
  "custom_assertions_path" : "",
  "page_objects_path" : "./lib/pages", /* you need to add the path,e.g: './lib/pages', */
  "globals_path" : "",