Relative Locators And Chaining Locators In Nightwatch JS

Relative locators

Relative locators are an essential part of automating web applications. Nightwatch.js is a popular automation framework that provides several methods to find elements on a page using relative locators.

In Nightwatch, relative locators are used to locate elements based on their position in relation to another element.

Some of the common relative locators are:

• Above: Locate an element above another element
• Below: Locate an element below another element
• To Left Of: Locate an element to the left of another element
• To Right Of: Locate an element to the right of another element

Using these relative locators, we can easily locate an element without knowing its exact location on the page. This is particularly useful when the element's location is prone to change, or if it has a dynamic ID that is generated each time the page loads.

To use relative locators in Nightwatch, we first need to locate the reference element, which is the element that we are using as a reference to locate the target element. Then, we use the .element method and pass in the relative locator and reference element as arguments.

For example, if we want to locate an element that is above another element, we can write the following code:

const referenceElement = browser.element('css selector', '#reference-element');
browser.element('above', referenceElement, (result) => {
  console.log(result.value);
});

In the above code, we first locate the reference element using its CSS selector, and then use the .element method to find the target element that is above it.

It is important to note that the reference element must be present on the page before we can use it to locate the target element. We can ensure this by using the .waitForElementPresent method before using the relative locator.

In conclusion, relative locators are a useful tool in automating web applications. Nightwatch.js provides several methods to locate elements based on their position in relation to another element, which makes it easier to locate elements even when their location is prone to change.

Chaining relative locators

Chaining relative locators is a powerful feature in Nightwatch.js that allows developers to locate elements based on their relationship to multiple other elements on a page. In this article, we will explore how to use chaining relative locators in Nightwatch.js and provide some examples to help you get started.

A relative locator specifies the position of an element relative to another element. For example, we might want to find an element that is above and to the left of another element. By chaining relative locators, we can specify the position of the element based on multiple reference elements.

To chain relative locators in Nightwatch.js, we use the .element method multiple times, each time passing in the next reference element and the next relative locator. Here is an example that demonstrates how to use chaining relative locators:

const referenceElement1 = browser.element('css selector', '#reference-element-1');
browser.element('above', referenceElement1, (result) => {
  const referenceElement2 = result.value;
  browser.element('toLeftOf', referenceElement2, (result) => {
    console.log(result.value);
  });
});

In the above example, we first locate the first reference element using its CSS selector. Then, we use the .element method to locate the second reference element that is above the first reference element. Finally, we use the .element method again to locate the target element that is to the left of the second reference element.

It is important to note that each time we use the .element method, we are using the result of the previous .element method as the reference element. This allows us to build a chain of relative locators that specifies the position of the target element relative to multiple reference elements.

In conclusion, chaining relative locators is a powerful feature in Nightwatch.js that allows developers to locate elements based on their relationship to multiple other elements on a page. By using the .element method multiple times and passing in the reference element and relative locator each time, we can specify the position of the target element with precision. By combining this feature with the other methods available in Nightwatch.js, we can automate complex web applications with ease.