Utilizing commands on Nightwatch.js sections: A step-by-step guide

Recently, I've delved into the world of PageObjects but have encountered some challenges.

  1. I'm trying to perform a command directly on a specific section rather than just on elements. For instance, I want to .waitForElementVisible directly within a section (not on individual elements). Is this even possible? I've experimented with various combinations like:

    browser.page.topMenu().section.loginBox.section.unauthenticated.waitForElementVisible('@loginTooltip', 10000)

So essentially, in this scenario: topMenu() is my PageObject file, followed by the loginBox section which contains -> the unauthenticated section containing -> the loginTooltip section. My goal is to call .waitForElementVisible on the final section. How can this be achieved? While I understand that sections can be combined without limitations, how do I interact with them subsequently?

  1. [consider this question as an added challenge since it deviates from the main topic] I am struggling with making assertions on a section within another section. Any tips on how to accomplish this successfully? I've attempted multiple approaches, one of them being:

browser.page.topMenu().expect.section('@loginBox').to.be.visible
- this works fine when dealing with just a single section

browser.page.topMenu().expect.section('@loginBox').section('@unauthenticated').to.be.visible
- does not yield the desired result; my intention is to verify if the unauthenticated section nested within the loginBox section is visible. How should this task be approached?

Thank you in advance for any assistance provided; despite my efforts, I haven't been able to resolve these issues independently.

javascriptseleniume2e-testingnightwatch.js

Answer №1

To start, let's simplify this for better understanding:

const mainPage = browser.page.mainPage(); // Set up the main page object.
const loginSection = mainPage.section.loginSection; // Define the login section.
const unauthenticatedSection = loginSection.section.unauthenticatedSection; // Specify the unauthenticated section.

and so forth...

When you need to execute a command, use:

loginSection.waitForElementVisible('@unauthenticatedSection');

Remember to declare the section selector like this: 

sections: {
   unauthenticatedSection: {
      selector: '.unauthenticated_section',
      elements: {
        sectionElements: '.section_elements'
      }
   },
   anotherSection: {
      ...
   }
}

The process is similar for the second question.

loginSection.expect.element('@unauthenticatedSection').to.be.visible;

Answer №2

To determine if a specific section is visible, use the following method:

loginBox.expect.section('@ unauthenticated').to.be.visible.before(1);

View more details on this in the NW github repository here

The high-level commands are limited to working with sections only and include assertions for visibility, enablement, and presence.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Prevent form submission when text input field is empty

In my web application, I have implemented modals for reporting words. The first modal pops up when you want to report a word and looks like this. Additionally, there is a second modal that appears after clicking the Submit button, confirming the successful ...

javascripthtmlnode.jsexpress

Contrasting deleting a node_module folder with running npm uninstall to remove a specific package

Do manual deletion of a package directly from the node_modules folder and running npm uninstall really make any difference, considering that npm just deletes the package anyway? ...

javascriptnpmnode-modules

Value comparison displayed in text boxes

Having two textboxes and a script to compare their values can sometimes result in unexpected behavior. For instance, when the value in Textbox2 comes from the database and it happens to be 0, it can cause issues. One possible solution is to allow Textbox1 ...

javascriptjquery

Utilize Router to efficiently deliver static files within Express

Currently immersed in a nodejs project, I have a straightforward query. My goal is to serve some libraries from the node_modules directory statically to the client (perhaps trivial, but not the focus of my question), without cluttering my main server JS fi ...

javascriptnode.jsexpressroutesmiddleware

Is there a difference in how WebDriverWait functions with Firefox in PHP Webdriver?

After making the switch from Chrome to Firefox standalone server, I encountered an error with the following 2 lines of code: $wait = new WebDriverWait($driver, 30); $wait->until(WebDriverExpectedCondition::visibilityOfElementLocated(WebDriverBy::xpath(& ...

phpseleniumselenium-webdriver

JSON data is returned as Object Object

Trying to work with a JSON object and need to stringify it for localStorage: $http.post('http://localhost:8000/refresh', { name: $scope.name, email: $scope.email, token: $rootScope.devToken, platform: ionic.Platform.platform() }).then( ...

javascriptangularjsjsonionic-frameworklocal-storage

Overlapping of JavaScript Array.push() function within nested arrays causing duplication

Recently, I encountered a puzzling situation while attempting to create arrays with three levels of depth. It may seem crazy, but this approach was the most suitable solution to my problem at the time. The code snippet below illustrates how these nested ar ...

javascriptnode.jsarraysmultidimensional-array

Using jQuery to collapse nested lists within a hierarchical structure

I'm facing a frustrating issue that seems to stem from my limited knowledge of javascript and jQuery. The problem lies within a list structured using recursion for hierarchy. Here's a snippet of the code: $(function (){ $('#foo').c ...

javascriptjqueryhtmlweb

An unforeseen issue arose while trying to update the data in a Chart.js chart within a Vue application

I am currently utilizing Chart.js version 3.5 along with Vue 3. After successfully creating a chart, I attempted to trigger a data change within a Vue method. However, I encountered an issue that displayed the following error message: "Uncaught TypeError: ...

javascriptvue.jschart.jsvuejs3

Using Python Selenium to interact with an angular autocomplete component

Currently facing a challenge with Selenium as the input element I'm attempting to send_keys to is throwing an ElementNotInteractableException. Upon investigation, I discovered that my input is within an angucomplete element. Despite having some experi ...

pythonpython-3.xseleniuminput

Implement Logo Size Reduction on Scroll in Navigation Bar

My design includes a div with a height of 120px, larger than the 75px navbar. When scrolling begins, I want the logo to transition to match the height of the navbar. Despite my efforts to toggle a CSS class, I am unable to achieve the desired effect. What ...

javascriptjquerycss

Tips on selecting the active color ID from a list of available color IDs

Currently, I am trying to retrieve the color ID of the active color selection. For example, if I have three colors - yellow, blue, and red - with yellow being the default color. In this scenario, I can obtain the color ID of yellow using a hidden input typ ...

javascriptphpjqueryajaxcodeigniter

Determining the Exact DOM Element Referenced by a WebElement in Selenium Java

When using Selenium in Java, how can you determine which DOM element is being pointed to by a WebElement in the Java debugger and browser developer tools? Sometimes the selector can be quite complex, combining xpath and css Selector, so it's useful t ...

javaseleniumdebuggingwebdriver

I encountered a permission denied error when trying to enter DEBUG=app ./bin/www in Node.js

After renaming 'my-application' to just 'app', I encountered an issue when running the DEBUG command in the terminal: I used DEBUG=app ./bin/www Originally, it was named 'my-application' as created by express. However, after ...

javascriptlinuxnode.jsexpress

The hidden absolute positioned div disappears once the sticky navbar becomes fixed on the page

Whenever my navbar reaches the top of the screen, the links in the dropdown menu disappear. I followed tutorials and examples from w3schools to build my webpage. Specifically: howto: js_navbar_sticky howto: css_dropdown_navbar This code snippet exempli ...

javascripthtmlcssmenusticky

Numerous instances of IEDriverServer.exe seem to crop up following a failed test

I am encountering an issue when trying to run a Selenium test on Internet Explorer 8.0 on Jenkins. The test fails and multiple IEDriverServer.exe instances start appearing. Upon checking the logs, I see the message "No connection could be made because the ...

pythoninternet-explorerseleniumwebdriver

In the realm of ASP.NET, the Razor FormExtensions.BeginForm Method holds the

In my current view, there is a dropdown list that allows the user to select an option which will then redirect them to another page or controller. I am using JavaScript to retrieve the selected value from the dropdown list, but I am facing difficulties whe ...

javascriptasp.netasp.net-mvcrazor

React Sortable JS is causing the bootstrap grid style to disappear

As I work on developing a straightforward React application, my goal is to integrate React Sortable Js into my Bootstrap grid layout. However, when I enclose within <ReactSortable>, the grid layout no longer displays two boxes side by side in two ro ...

javascriptreactjsreact-sortablejs

Filter Angular by columns that change dynamically

I have a filter function that works well when I use a static column name like this: this.listOfData = this.listOfData.filter((item: DataItem) => item.name.toLowerCase().indexOf(newValue.toLowerCase()) !== -1 ); Note: item.name However, I need to sea ...

javascriptangulartypescript

What is the process for applying a texture image onto a shader geometry?

Seeking assistance in Three.js: I have successfully mapped a texture image to a plane geometry and rendered it in one scene. In another scene, I have a cube with shader material. Now, I need help incorporating the texture from the first scene onto the surf ...

javascriptthree.jsglsl