Nightwatch experiences out-of-sequence execution of commands in a for loop

Question

Nightwatch experiences out-of-sequence execution of commands in a for loop

I've recently started exploring unit testing and am currently working on a Nightwatch script that navigates through the body content of a webpage, clicks on each link, and checks if it's broken.

My goal is to create a for loop that goes through every tag in the body content, counts the number of 'a' tags within them, and then clicks on each link. However, I'm facing an issue where the browser.execute command inside the for loop seems to be executing out of order.

Below is my code snippet with some console.log statements added to track what's happening:

'Click Links' : function(browser) {
browser
  //Count all non-link tags (p/div) in the content
  .useCss()
  .execute(function() {
    return document.querySelectorAll("div.field-item.even *:not(a)").length;
  },
  function(tags){
    tag_total = tags.value;

    //Loop through every tag in content and check each contained a tag
    for (var x = 1; x < tag_total+1; x++) {
      console.log("x val before execute: " + x);
      browser.execute(function() {
        return document.querySelectorAll("div.field-item.even *:not(a):nth-child(" + x + ") a").length;
      },
      function(links){
        console.log("x val at start of execute: " + x);
        a_total = links.value;

        for (var y = 1; y < a_total+1; y++) {
          browser.click("div.field-item.even *:not(a):nth-child(" + x + ") a:nth-child(" + y + ")");
          browser.pause(1000);

          //Check for on-site broken links
          browser.execute(function() {
            return document.querySelector("meta[content='Error Document']");
          }, 
          //Notify about broken link
          function(result){
            if (result.value != null) {
              browser.url(function(result) {
                console.log("BROKEN LINK: " + result.value);
              });
            }
          });

          //Navigate back to previous page
          browser.url(process.argv[2]);
          browser.pause(1000);
        }
        console.log("x val at end of execute: " + x);
      });
    console.log("x val at end of for loop: " + x);
    }
  })

.end()
}

The output shows a discrepancy in the execution sequence:

 x val before execute: 1
 x val at end of for loop: 1
 x val before execute: 2
 x val at end of for loop: 2
 x val at start of execute: 3
 x val at end of execute: 3
 ERROR: Unable to locate element: "div.field-item.even *:not(a):nth-child(3) a:nth-child(1)" using: css selector

It appears that the for loop is processing ahead and skipping the entire browser.execute section. Once the loop completes, the browser.execute part runs with an incorrect value of x. This leads to the question of why the browser.execute command disrupts the order of execution and whether there's a fix to maintain the intended order.

javascript selenium for-loop iteration nightwatch.js

Answer 1

Answer №1

Although this topic is not related to Nightwatch, it pertains to Javascript.

When a function is called within a loop, the variable used in that function is saved by reference. This means that the variable retains its value across all function calls.

Let's illustrate this with a simple example:

var myFuncs = [];
for (var i = 0; i < 3; i += 1) {
  myFuncs.push(function () {
    console.log('i is', i);
  });
}

myFuncs[0](); // i is 3
myFuncs[1](); // i is 3
myFuncs[2](); // i is 3

The reason for this behavior is that i is stored as a reference in the function. Therefore, when i increments in the next iteration, the reference remains the same while the value changes.

A solution to this issue would be to move the function outside of the loop:

function log (i) {
  return function () {
    console.log(i);
  }
}

var myFuncs = [];
for (var i = 0; i < 3; i += 1) {
  myFuncs.push(log(i));
}

myFuncs[0](); // i is 0
myFuncs[1](); // i is 1
myFuncs[2](); // i is 2

For further exploration of this concept, you can refer to this similar SO answer (which presents a similar example - ironically).

Answer 2

Although this topic is not related to Nightwatch, it pertains to Javascript.

When a function is called within a loop, the variable used in that function is saved by reference. This means that the variable retains its value across all function calls.

Let's illustrate this with a simple example:

var myFuncs = [];
for (var i = 0; i < 3; i += 1) {
  myFuncs.push(function () {
    console.log('i is', i);
  });
}

myFuncs[0](); // i is 3
myFuncs[1](); // i is 3
myFuncs[2](); // i is 3

The reason for this behavior is that i is stored as a reference in the function. Therefore, when i increments in the next iteration, the reference remains the same while the value changes.

A solution to this issue would be to move the function outside of the loop:

function log (i) {
  return function () {
    console.log(i);
  }
}

var myFuncs = [];
for (var i = 0; i < 3; i += 1) {
  myFuncs.push(log(i));
}

myFuncs[0](); // i is 0
myFuncs[1](); // i is 1
myFuncs[2](); // i is 2

For further exploration of this concept, you can refer to this similar SO answer (which presents a similar example - ironically).

Nightwatch experiences out-of-sequence execution of commands in a for loop

Answer №1

Similar questions

Moving the Promise.all feature from AngularJs to VueJs

Check if a user is currently on the identical URL using PHP and JavaScript

What are the steps for including and excluding components in Parallax JS?

Verifying the status following a promise execution in the initial promise function

How can I change an array from OData into JSON format?

Turn off specific default features within Sails.js

What is the best way to render geoJSON as a mesh instead of a line in three.js, and apply a color fill to it?

Error message from BitBucket pipeline indicates that the npm command was not found

Creating dynamic email content with Node.js using SendGrid templating

Search MongoDB to find, update, and validate any empty fields in the body

Creating an animated time-based scrollable bar chart in javascript

Learn the process of retrieving a file from server.js and showcasing it on an HTML page

The functionality of ng-click and ng-submit seems to be malfunctioning

Using jQuery to create a flawless animation

Ways to leverage the power of Reactivity APIs in Vue.js

Issues encountered while scraping Instagram's web content using Selenium with Python

Struggling to get Angular to properly sanitize inputs using ng-bind-html

Determining if a value is an Object Literal in JavaScript: Tips for judging

Efficient Method for Parameterizing Data in TestNG

Discover the location by determining the distance from established points