The Nightwatch template project seems to have an unresolved function called .waitForElementVisible

After following the steps outlined in , I incorporated the code snippet from into my test file.

module.exports = {
    'Demo test Google' : function (browser) {
    browser
        .url('http://www.google.com')
        .waitForElementVisible('body', 1000)
        .setValue('input[type=text]', 'nightwatch')
        .waitForElementVisible('button[name=btnG]', 1000)
        .click('button[name=btnG]')
        .pause(1000)
        .assert.containsText('#main', 'Night Watch')
        .end();
        }
};

This is how my package.json is structured:

{
  "name": "try_nw",
  "version": "1.0.0",
  "description": "try_nightwatch",
  "main": "nightwatch.js",
  "scripts": {
  "test": "node nightwatch -e chrome"
},
  "author": "",
  "license": "ISC",
"dependencies": {
  "bower": "^1.8.2",
  "chromedriver": "^2.34.0",
  "geckodriver": "^1.10.0",
  "nightwatch": "^0.9.19",
  "selenium-server-standalone-jar": "^3.8.1"
  }
}

Here's a glimpse at my nightwatch.json configuration:

{
  "src_folders" : ["tests"],
  "output_folder" : "reports",
  "custom_commands_path" : "",
  "custom_assertions_path" : "",
  "page_objects_path" : "",
  "globals_path" : "",

    "selenium" : {
  "start_process" : true,
"start_session" : true,
"server_path" : "bin/selenium-server-standalone-3.8.1.jar",
"log_path" : "",
"port" : 4444,
"cli_args" : {
  "webdriver.chrome.driver" : "bin/chromedriver.exe",
  "webdriver.gecko.driver" : "",
  "webdriver.edge.driver" : ""
 }
},

...

However, during the test execution, I encountered an issue where the Chrome tab remained blank with corresponding console output as seen below:

Starting selenium server... started - PID:  15024

[Googletests] Test Suite
============================

Running:  Demo test Google

× Timed out while waiting for element <body> to be present for 1000 
  milliseconds.  - expected "visible" but got: "not found"

...

FAILED:  1 assertions failed (5.972s)

 _________________________________________________

 TEST FAILURE:  1 assertions failed, 0 passed. (6.088s)

 × googletests

- Demo test Google (5.972s)
Timed out while waiting for element <body> to be present for 1000 milliseconds.  - expected "visible" but got: "not found"
   at Object.Demo test Google (E:\JS\Try_NW\tests\googletests.js:6:14)
   at process._tickCallback (internal/process/next_tick.js:150:11)


 Process finished with exit code 1

In conclusion, it appears that the .waitForElementVisible method is not defined. Any suggestions or solutions would be greatly appreciated!

Answer №1

The issue you're encountering is not related to the waitForElement function or any other part of your script specifically. The problem lies with how the setValue method behaves differently in chromeDriver compared to other browsers, causing a new tab to open and resulting in an error message about the inability to locate the body element.

Updating chromedriver should resolve this issue and allow your script to function properly.

Check out this link for more information.

Answer №2

It appears that there may be another factor contributing to the failure of your test. By making a minor adjustment, I was able to successfully execute your test using the same timeout of 1000 ms. You could consider prolonging the timeout value for waitForElementVisible(). In my case, the following test ran smoothly without any issues.

browser
  .url('http://www.google.com')
  .waitForElementVisible('body', 1000)
  .setValue('input[type=text]', ['nightwatch', browser.Keys.ENTER])
  .pause(1000)
  .assert.containsText('#main', 'Night Watch')
  .end();      
}

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

Rearrange the position of the package.json file to the parent directory within the react application

Recently, I began learning React and used npx create-react-app frontend to set up my React app. This gave me the following directory structure: -- demo -- frontend -- node_modules -- public -- src -- .gitignore - ...

Adjust the location.hash and then navigate using the Back button - Internet Explorer displays unique behavior compared to other web browsers

When updating `location.hash`, all browsers behave correctly by only changing the URL without refreshing the page. However, pressing the Back button in Internet Explorer and other browsers results in different behaviors. IE fails to update the history wit ...

What is the most effective method for parsing JSON data that constantly changes?

Consider a scenario where you have a method that takes in two string arguments: public int Method(string expression, string variables) { ... } The string "expression" should contain a math expression (e.g. "1 + 2") that needs to be eva ...

SignalR fails to refresh ng-view upon page change

1.- Setting up ng-route is straightforward. I have 3 buttons that navigate to different paths. 2.- There is a parent controller and a child controller for ng-view. 3.- In the ng-view template, there are spans bound to properties like subCtrl.id and &apos ...

The module '../xcode' could not be located. This issue is occurring within React Native and Expo CLI, where the required stack cannot

Trying my hand at creating my first project using React Native in iOS with expo.io, I encountered an error when running the command "expo start": https://ibb.co/f2xsmpN https://i.sstatic.net/Uyxkk.png Despite attempts to reinstall and update Xcode, usin ...

Is it time to advance to the next input field when reaching the maxLength?

In my Vue form, I have designed a combined input field for entering a phone number for styling purposes. The issue I am facing is that the user needs to press the tab key to move to the next input field of the phone number. Is there a way to automaticall ...

What are some methods for utilizing the data received through this.props.history?

Whenever I need to navigate from one route to another using this.props.history.push("/"), I also want to pass along some extra data. For example: this.props.history.push('/postDetail', {data: item}). However, I am uncertain about where to define ...

Retrieving Outdated Information through the Express Framework

Whenever I make a fetch request to a node express server, it sometimes returns old data that was previously fetched from the same endpoint. This issue occurs sporadically but seems to happen more often than not. Even after disabling Cache-Control in the f ...

What is the best way to set the first option in a mat-select to be

My approach to date selection involves using 3 mat-select components for day, month, and year. You can view a demo of this setup here. In an attempt to improve the code, I decided to set the initial options as null by modifying the following lines: allDat ...

Combining Mouseover and Click Events in Vue JS

Having four pictures, I want to display a specific component when hovering over them. However, I also need to bind the click event so that clicking on the picture will reveal the component. The challenge is that I am unable to simultaneously bind two event ...

Transformation of JSON data from Array to Object

I have a JSON data structure that looks like this: { tag: 'new-tag', stream_subjects: [1, 2, 3] } My goal is to transform it into the following format: { tag: 'new-tag', stream_subjects: [ {subject_id: 1}, {subject_id ...

Eliminate JavaScript that blocks rendering:

Currently, I am working on optimizing my website's speed and aiming for a perfect 100/100 score on PageSpeed Insights. The website in question is www.chrispdesign.com. Despite my efforts to relocate the code and make necessary adjustments, I have bee ...

After changing the value of a <select> element in Vue, the fetched data is delayed by one step

I'm currently working on a feature that involves fetching data from a URL that changes every time a user chooses a new value from a <select> dropdown. The fetched data updates the songkickData array with the latest information. However, when I c ...

Retrieve a collection of items based on their data-id attribute

I need to create a list of label elements with data-id attributes. I will use the values from these labels to set images on the main container. The function changeimage is returning a nodelist with null elements, but I am not sure why this is happening. ...

Using Angular 5 to link date input to form field (reactive approach)

I'm encountering an issue with the input type date. I am trying to bind data from a component. Below is my field: <div class="col-md-6"> <label for="dateOfReport">Data zgłoszenia błędu:</label> <input type="date" formC ...

Pug does not have access to computed properties within the dynamic class attribute of a Vue component

After attempting to dynamically toggle the className based on computed property and encountering issues in Pug, I found that manually setting 'true' to a className was the solution. Even after trying to reassign the computed property to a Pug var ...

Unveil as you scroll - ScrollMagic

I am working on a skill chart that dynamically fills when the document loads. I am exploring the possibility of using ScrollMagic to animate the chart filling as the user scrolls down. After trying various combinations of classes and pseudo-classes in the ...

The <g> tag fails to properly render within the <svg> element in Firefox

When running an Angular 6 application with ES6-style D3js modules, there are some issues on Firefox (Chromium, Chrome, Safari, and IE Edge work fine). Below is a sample of pseudo code (full production code is available below): <svg width="500" height=" ...

Can you explain the meaning of "|| [];"?

Can you explain the significance of || [] in this code snippet and provide some insight into why it's included? getPair: function() { return this.props.pair || []; }, ...

How can I access a PHP variable from an external .php file within a JavaScript script?

I have recently implemented a JavaScript code called "upload.js" for uploading files to my server: function beginUpload(){ document.getElementById('upload_form').style.visibility = 'hidden'; return true; } function endUpload(s ...