Issues with NightwatchJs arise when attempting to display element text, attributes, and values in the console

Question

Issues with NightwatchJs arise when attempting to display element text, attributes, and values in the console

I'm facing some challenges with my nightwatch tests as I'm struggling to retrieve data from a webpage and display it on my console. Any guidance in the right direction would be greatly appreciated.

Every time I attempt to log the data to my console, it simply returns [object Object]. As a beginner in test automation, I haven't been able to find a solution by searching online. Below is the code snippet (testing site is Google's front page):

module.exports = {
  tags: ['google'],
  'Demo test Google' : function (client) {
client
  .url('http://google.com')
  .pause(500);
  var msg = "---> : ";

client.expect.element('body').to.be.present;

client.getText("#gbw > div > div > div.gb_7d.gb_R.gb_le.gb_ee > div:nth-child(1) > a", function(result) {
client.expect.element("#gbw > div > div > div.gb_7d.gb_R.gb_le.gb_ee > div:nth-child(1) > a").text.to.equal("Gmail");
console.log(msg.toString()+result);
});

client.getValue("#tsf > div.tsf-p > div.jsb > center > input[type='submit']:nth-child(1)", function(result) {
client.expect.element("#tsf > div.tsf-p > div.jsb > center > input[type='submit']:nth-child(1)").to.have.value.that.equals("Sök på Google");
console.log(msg+result);
});

client.end();
}
};

javascript selenium nightwatch.js

Answer 1

Answer №1

Recently, I came across a problem and found a solution by utilizing the 'textContent' method to capture the text within specific tags.

For instance, consider the following code snippet:

<div data-v-407a767e="" class="alert alert-success alert-styled-left alert-bordered text-center">
"Success! Check your email for the password reset link. "
<br data...>
<a data-v-407a767e="" class="alert-link">Go back to login.</a>
</div>

To extract the text, I used the following code:

client.getAttribute('selector', 'textContent', function(result){
        console.log("Value: ", result.value);
    });

For more information on using the textContent attribute, you can visit this link.

Answer 2

Recently, I came across a problem and found a solution by utilizing the 'textContent' method to capture the text within specific tags.

For instance, consider the following code snippet:

<div data-v-407a767e="" class="alert alert-success alert-styled-left alert-bordered text-center">
"Success! Check your email for the password reset link. "
<br data...>
<a data-v-407a767e="" class="alert-link">Go back to login.</a>
</div>

To extract the text, I used the following code:

client.getAttribute('selector', 'textContent', function(result){
        console.log("Value: ", result.value);
    });

For more information on using the textContent attribute, you can visit this link.

Answer 3

Answer №2

Today, I found myself spending countless hours trying to figure out the same issue. It seems like the documentation on the getText command might be misleading, or even incorrect. This is because it states that the return should be a string, but I am getting objects instead.

Check out this example code from nightwatchjs.org

The only way I have managed to obtain the string value of the element is by using the supposedly optional callback parameter.

Without the callback parameter, the value returned seems to be the browser object (basically, this, for making chained Command calls). If you echo this value, (and it's quite a bit of information), you will notice references to the browser Commands that are documented.

This discrepancy in return value and the documentation seems to be a recurring issue for many commands, including (as was the case for me today) getText.

If you happen to uncover more information later on that clarifies the apparent differences in return types (based on whether or not a callback parameter is utilized), please share it here. I am quite intrigued as well.

Answer 4

Today, I found myself spending countless hours trying to figure out the same issue. It seems like the documentation on the getText command might be misleading, or even incorrect. This is because it states that the return should be a string, but I am getting objects instead.

Check out this example code from nightwatchjs.org

The only way I have managed to obtain the string value of the element is by using the supposedly optional callback parameter.

Without the callback parameter, the value returned seems to be the browser object (basically, this, for making chained Command calls). If you echo this value, (and it's quite a bit of information), you will notice references to the browser Commands that are documented.

This discrepancy in return value and the documentation seems to be a recurring issue for many commands, including (as was the case for me today) getText.

If you happen to uncover more information later on that clarifies the apparent differences in return types (based on whether or not a callback parameter is utilized), please share it here. I am quite intrigued as well.

Answer 5

Answer №3

The explanation provided in the documentation lacks clarity. When a return value is received, it is in the form of an object, which can be accessed using the following code snippet:

self.getText('selectorvalue', function (result) {
   console.log('result: ' + JSON.stringify(result));
});

The returned object will contain various properties, with 'status' and 'value' being the most crucial ones.

If the 'status' in the result is -1, it indicates that the element was not found. Otherwise, the 'value' in the result should contain the text.

self.getText('selectorvalue', function (result) {
    if (result.status !== -1) {
        console.log('text: ' + result.text)
    }
});

To retrieve the text of existing elements and prevent test failures when elements do not exist, the following approach can be taken:

this.element('css selector', 'selectorvalue', function (present) {
     if (present.status !== -1) {
         self.getText('selectorvalue', function (result) {
             if (result.status !== -1) {
                 console.log('text: ' + result.text);
             }
         });
     }else{
         //don't try to get the text
     }
});

The 'this.element' function returns an object similar to 'getText', with a status of -1 for non-existent selector elements.

If an element is not found, the test does not fail.

It may be beneficial to define var self = this in commands and use 'self' instead of 'this'. In tests, 'client' or 'browser' can be used instead of 'this'.

Generally, the expectation is that the element will be present, so the test should fail if it is not. If this is not the desired behavior, the workaround mentioned above can be implemented.

Answer 6

The explanation provided in the documentation lacks clarity. When a return value is received, it is in the form of an object, which can be accessed using the following code snippet:

self.getText('selectorvalue', function (result) {
   console.log('result: ' + JSON.stringify(result));
});

The returned object will contain various properties, with 'status' and 'value' being the most crucial ones.

If the 'status' in the result is -1, it indicates that the element was not found. Otherwise, the 'value' in the result should contain the text.

self.getText('selectorvalue', function (result) {
    if (result.status !== -1) {
        console.log('text: ' + result.text)
    }
});

To retrieve the text of existing elements and prevent test failures when elements do not exist, the following approach can be taken:

this.element('css selector', 'selectorvalue', function (present) {
     if (present.status !== -1) {
         self.getText('selectorvalue', function (result) {
             if (result.status !== -1) {
                 console.log('text: ' + result.text);
             }
         });
     }else{
         //don't try to get the text
     }
});

The 'this.element' function returns an object similar to 'getText', with a status of -1 for non-existent selector elements.

If an element is not found, the test does not fail.

It may be beneficial to define var self = this in commands and use 'self' instead of 'this'. In tests, 'client' or 'browser' can be used instead of 'this'.

Generally, the expectation is that the element will be present, so the test should fail if it is not. If this is not the desired behavior, the workaround mentioned above can be implemented.

Answer 7

Answer №4

An easy fix would involve extracting the required value from the object. Once you have the object, you can access its properties to find the one you need.

For instance, in the scenario you provided, you might consider implementing the following code snippet:

client.getText("your_element_locator", function(result) {
  expect(result.value).to.equal("Gmail");
  console.log(msg.toString()+result.value);
});

Answer 8

An easy fix would involve extracting the required value from the object. Once you have the object, you can access its properties to find the one you need.

For instance, in the scenario you provided, you might consider implementing the following code snippet:

client.getText("your_element_locator", function(result) {
  expect(result.value).to.equal("Gmail");
  console.log(msg.toString()+result.value);
});

Issues with NightwatchJs arise when attempting to display element text, attributes, and values in the console

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Having trouble displaying the Primevue dialog modal in Vue 3?

Obtain the ending section of a URL using JavaScript

Encountering a "Value cannot be null" error while using VS2015 Coded UI for Cross Browser testing with Chrome

Adjust the value of a variable within a module using Angular JS

Implementing a new click method in JAVA Selenium WebElement class

Spinning item using a randomized matrix in Three.js

Activate a link, launch a pop-up window, and navigate to the link within the pop-up

Using Typescript to establish a connection between ngModel and an object's property

When you click on the column header to sort, the corresponding column row changes color in JavaScript

What is the best way to determine if an element exists?

Tips for updating a React state while using the history API

Arrange a JSON array by searching texts initially, followed by sorting the remaining results in alphabetical order

Display the hidden div element when clicked

Using Laravel Blade Variables in JavaScript Code

I require assistance in displaying a dynamic, multi-level nested object in HTML using AngularJS

NextJS: When attempting to serialize the `function` as JSON, an error occurs as it is not a JSON serializable data type

Error receiving parameter in express route callback function

Mastering the art of debugging a mongoose action in node.js

Executing a PUT XMLHttpRequest request results in an empty response being logged to the

Can you explain how to convert a 32-bit floating point number from a Buffer to a JSON string in NodeJS while maintaining the original precision?