Element could not be located following successful login process

Currently, I am in the process of developing automation scripts using NightWatchJS. My test scenario involves a few basic steps:

  1. Launching a URL
  2. Logging in
  3. Verifying elements on the page
  4. Ensuring the presence of elements within an iframe

The login page is straightforward with a submit button. Once logged in successfully, there is an inner page with an iframe. Upon successful login, JavaScript focuses on the text field within the iframe.

Below is an excerpt from my NightWatch test code:

/* Insert your Nightwatch test code here */

Initially, the test runs smoothly up to the point of form submission. However, it encounters failure thereafter due to timing out while waiting for a particular element to be present.

For this testing, I am utilizing Chrome 50 and ChromeDriver 2.21.371459 on OS X - El Capitan. For further reference, details of my selenium setup are provided below:

https://i.sstatic.net/Ivwzv.png

Thank you in advance.

javascriptselenium-webdriverui-automationselenium-chromedrivernightwatch.js

Answer №1

Does your page automatically redirect after a successful login?

Here is a suggestion you can try:

  browser
  .url("siteurl") 
  .waitForElementVisible('#email', 10000,false)
  .setValue('#email','example@email.com') 
  .setValue('#password', 'encrypted')
  .click('#login_form')
  .waitForElementVisible('li.active', 5000,false)
  .verify.containsText('li.active', "Home")
  .verify.elementPresent('#iframeone')
  .frame('#iframeone')
  .waitForElementVisible('.wi-wrap', 5000,false)
  .verify.containsText('header h1', 'Messages')

Keep in mind that if the frame id is missing or null, the server should switch to the page's default content. So it's better to use selectors like the ones below to ensure its presence and uniqueness:

'input[name=username]',
'button[name=login]',
'iframe[class=iframeone]'

Edit 1: When checking for the element 'body', verify if it's 'present or not' instead of 'visible or not'

Try 

waitForElementPresent('body', 5000, false)

instead of

waitForElementVisible('body', 5000, false)

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

Finding an element in Selenium with a div structure can be challenging at times. If you're encountering the error message "Unable to locate an element with

Check out the following code snippet : <div class="footer-bottom-left"> <div class="campaignUser">Campaign User</div> <div class="callLogLookUp">Call Log Look Up</div> </div> I attempted to use this code in sel ...

seleniumselenium-webdriverselenium-chromedriver

Framework7 disables the jQuery.appear plugin

I am utilizing Framework7 and aiming to incorporate jQuery.appear for executing a script once an element becomes visible to the user. The implementation is successful when using this code in a basic HTML setup: <!DOCTYPE html> <html> < ...

javascriptjqueryhtmlhtml-framework-7

Utilize Launchdarkly in React by incorporating it through a custom function instead of enclosing it within

Currently, I am adhering to the guidelines outlined by launchdarkly. Following the documentation, I utilized the following code snippet: import { asyncWithLDProvider } from 'launchdarkly-react-client-sdk'; (async () => { const LDProvider = a ...

javascriptreactjsfeaturetogglelaunchdarkly

Issue: An error occurred with response status code 13 while trying to call the waitForCondition function

Currently, I am in the process of crafting a browser test with selenium-webdriverjs. However, I am facing an issue when executing the code snippet below; it throws back an Error:Error response: 13. browser.waitForCondition('var element = document.que ...

javascriptselenium-webdriver

Wait to display the page until all AngularJS directives have finished loading their HTML content

I've encountered an issue in my AngularJS application where I created directives that load external HTML templates from another URL. The problem is that when I navigate to the page, the binding works fine but the directive's HTML doesn't loa ...

javascripthtmlangularjsangularjs-directive

Converting Node.js Date.toString() output into a time format in Go

My go service is currently receiving data from an external source. Here's how the data appears (in JSON format)- { "firstName": "XYZ", "lastName": "ABC", "createdAtTimestamp": "Mon Nov 21 2 ...

javascriptnode.jsgo

Utilize express compression in Node.js to compress JSON data from the REST API endpoint

I recently developed a small RESTful application using Node.js. I attempted to compress the JSON data returned by an API request using Express and compression, but unfortunately it did not work as expected. var express = require('express'); var ...

javascriptjsonnode.jsexpresscompression

Solving problems with asynchronous programming in Express.js

I'm struggling with the asynchronous nature of Node.js. In my code, I have a function like this: var sendData = function(req, res) { var requestId = req.params.id; var dataForSend = []; database.collection('songs').find({player_ ...

javascriptnode.jsexpress

What is the best way to apply the 'active' class to a selected navigation link using JavaScript?

How can I use JavaScript to change the active click of a Bootstrap navbar based on which nav link was clicked? The issue is that the changes made by JavaScript are lost when the browser navigates to the corresponding page. MY CODE: document.querySelect ...

javascripthtmlnode.jsbootstrap-4

Showing the image as a backdrop while scrolling through text

How can I create an effect that continuously displays the image while scrolling text in Internet Explorer without using position: sticky or position: fixed? var sticky = document.querySelector('.sticky-container'); var img = document.querySele ...

javascripthtmlcssanimation

Personalizing plot choices in highchart visuals

I am facing some styling issues with a highchart chart container in Angular that contains a marker, a line, and an area graph. I want to display labels on the graphs without using a tooltip option, but I am having trouble with label positioning. Click her ...

javascriptangularhighchartsbar-chartangular2-highcharts

The Facebook Customer Chat Plugin embedded within an iframe

Can the Customer Chat Plugin be used within an iframe? When adding content-security-policy: frame-ancestors IFRAME_DOMAIN, it displays the message Refused to frame 'https://www.facebook.com/' because an ancestor violates the following Content Se ...

javascriptfacebookiframecontent-security-policy

Is it advisable to clear the bootstrap tooltips array in order to conserve browser memory once I have finished rendering new tooltips?

My apologies if this question has been asked before, but I searched online first and couldn't find a helpful answer. Beautiful Views Recently, I was working on a project where I needed to display search results, each accompanied by a button that trig ...

javascripttwitter-bootstrapbootstrap-5

Sorting by alphabetical order using Vue.js and Axios

I am currently in need of assistance with filtering my data based on brand name and then further refining the results by alphabetical order using the "product.name" property. Provided below are the axios functions I am using for this task. export default { ...

javascriptvue.jsaxiosvuejs3

Client-side filtering for numerical columns using the Kendo UI Grid widget

In my Kendo UI grid widget, I have a model schema set up for a field like this: RS_LookBackDays: { type: "number", editable: true }, The columns configuration for the same field looks like this: { field: "RS_LookBackDays", title: "Rate Schedule – # Lo ...

javascriptangularjskendo-uikendo-grid

Ways to emphasize the current tab on the site's navigation bar?

Here's my question: I have a menu with different items, and I want to make sure that the active tab is highlighted when users switch to another page. I noticed that Stack Overflow uses the following CSS: .nav { float: left; font-size: 1 ...

javascripthtmlcsstemplatessmarty

How can I accurately determine the true dimensions of an image in Angular, including any resizing that may

Here is an image: @ViewChild('image') readonly photo: ElementRef; The HTML code for the image is: <img #photo class="pic" /> How can I find the original size (width, height) as well as the resized dimensions after applying CSS a ...

javascriptangular

Is it possible for Express in Node.js to handle multiple static folders at once?

Currently, I am working on a project that involves a user uploaded collection of styles, scripts, and images as well as my app's own collection of these resources. They are stored in separate directories on my server. I am wondering if there is a way ...

javascriptnode.jsstaticexpress

Error encountered during navigation: navigator has not been defined

I encountered an issue where the page gets redirected upon form submission without triggering the catch block. However, in the backend, I am facing an error stating that the API body is not being executed. Below is the code snippet of the page: "use cl ...

javascriptreactjsnext.jsnavigation

Having difficulty saving data in database using Ajax request from a Chrome extension

I am currently working on an extension that captures the page URL and saves it in a database once the user clicks the submit button. However, I have encountered a roadblock and believe there might be a missing piece in the extension setup that I cannot pi ...

javascriptphpajaxgoogle-chromegoogle-chrome-extension