What is the best way to verify that the navigation menu contains all the anticipated items?

Question

What is the best way to verify that the navigation menu contains all the anticipated items?

I am currently utilizing Nightwatch.js (Selenium/WebDriver) to conduct tests on my Node.js application.

My objective now is to verify the existence of a navigation bar and ensure that the items within the navbar are as anticipated.

This is my attempt at retrieving all navigation items, but I am unsure how to validate these elements. Furthermore, I feel that this process may be overly complex. Is this the appropriate approach when using Nightwatch.js?

module.exports = {
  'navigation': function(browser) {
    var navElements = []

    function getNavElements(elements) {
      elements.value.forEach(function(element) {
        browser.elementIdText(element.ELEMENT, function(res) {
          navElements.push(res.value)
        })
      })
    }

    browser
      .url(browser.launchUrl)
      .waitForElementVisible('#nav', 10000)

    browser.expect.element('#nav').to.be.present

    browser.elements('css selector', '#nav > .item', getNavElements)
    browser.expect(navElements).to.equal(['First', 'Second', 'Third'])

    browser.end()
  }
}

javascript testing selenium-webdriver nightwatch.js e2e-testing

Answer 1

Answer №1

While your code is on the right track, there are a few key points you may have overlooked:

getNavElements functions as a callback, so there's no guarantee that navElements will be populated correctly when it's tested on the subsequent line.
browser.expect isn't actually a function; instead, it's a basic object that includes an element method. If you intend to conduct a standard test with expect, your best bet is to utilize Chai directly (Nightwatch BDD-style interface hinges on this particular library).

Below, you'll find a simplified version of the working code:

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <title>Nightwatch</title>
</head>
<body>
  <ul id="nav">
    <li class="item">First</li>
    <li class="item">>Second</li>
    <li class="item">>Third</li>
  </ul>
</body>
</html>

JavaScript (nav.js)

var expect = require('chai').expect;

module.exports = {
  'Navigation': function (browser) {
    var expectedNavElements = ['First', 'Second', 'Third'];

    function testNavElements(elements) {
      elements.value.forEach(function (element, index) {
        browser.elementIdText(element.ELEMENT, function(res) {
          expect(res.value).to.equal(expectedNavElements[index]);
        });
      });
    }

    browser
      .url('http://localhost:8000/index.html') // Modify if necessary
      .waitForElementVisible('#nav', 1000);

    browser.expect.element('#nav').to.be.present;
    browser.elements('css selector', '#nav > .item', testNavElements);

    browser.end();
  }
};

Instructions

npm i chai for Chai installation
nightwatch -t tests/nav.js to execute the test suite

Note: Nightwatch doesn't handle passing Chai expectations silently. You won't receive any messages in the console if Chai expectations succeed, but you'll encounter an assertion error if they fail. Feel free to input incorrect values in expectedNavElements to see this in action...

Answer 2

While your code is on the right track, there are a few key points you may have overlooked:

getNavElements functions as a callback, so there's no guarantee that navElements will be populated correctly when it's tested on the subsequent line.
browser.expect isn't actually a function; instead, it's a basic object that includes an element method. If you intend to conduct a standard test with expect, your best bet is to utilize Chai directly (Nightwatch BDD-style interface hinges on this particular library).

Below, you'll find a simplified version of the working code:

HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <title>Nightwatch</title>
</head>
<body>
  <ul id="nav">
    <li class="item">First</li>
    <li class="item">>Second</li>
    <li class="item">>Third</li>
  </ul>
</body>
</html>

JavaScript (nav.js)

var expect = require('chai').expect;

module.exports = {
  'Navigation': function (browser) {
    var expectedNavElements = ['First', 'Second', 'Third'];

    function testNavElements(elements) {
      elements.value.forEach(function (element, index) {
        browser.elementIdText(element.ELEMENT, function(res) {
          expect(res.value).to.equal(expectedNavElements[index]);
        });
      });
    }

    browser
      .url('http://localhost:8000/index.html') // Modify if necessary
      .waitForElementVisible('#nav', 1000);

    browser.expect.element('#nav').to.be.present;
    browser.elements('css selector', '#nav > .item', testNavElements);

    browser.end();
  }
};

Instructions

npm i chai for Chai installation
nightwatch -t tests/nav.js to execute the test suite

Note: Nightwatch doesn't handle passing Chai expectations silently. You won't receive any messages in the console if Chai expectations succeed, but you'll encounter an assertion error if they fail. Feel free to input incorrect values in expectedNavElements to see this in action...

What is the best way to verify that the navigation menu contains all the anticipated items?

Answer №1

Similar questions

Is it possible to trick the desktop browser into utilizing mobile-designed media queries?

Even though I have successfully stored a key value pair in LocalStorage using JSON stringify and setItem, the data does not persist after the page is refreshed

What is the best way to enable the user to scroll through a list seamlessly?

Ways to store a JSON string in a variable

Redirect to a new URL using $routeProvider's resolve feature

Incorporate a for loop in Javascript to add a variety of items (object1, object2, and object3) to an array

Automatically simulate the pressing of the enter key in a text field upon page load using Javascript

Establishing references to the following and previous pages

The endless scroll just keeps going even after all the content has been viewed

Using Javascript to update text content by utilizing `innerText` property instead of checking if it is

Creating a duplicate of the Object in order to include a new key and value pair

Is there a way for me to choose a single file while executing the migrate-mongo up command?

What is the best way to remove data from both arrays simultaneously?

Hide a span dynamically based on conditions in AngularJS

Filter an array containing nested objects based on dynamically determined properties

Configuring select options using API data

Having trouble with the functionality of the cascading menu?

The issues with VUE3 compounding filters are causing unexpected results

Tips for setting up a Vue application (using vue-cli) to include nonce attributes in created script tags

"Transforming a list retrieved from Django context into a JavaScript or Vue.js list: A step-by-step guide