Tips for waiting for an HTML element to load in a Selenium JavaScript testing script

I'm struggling to find a way to wait for an element to load in a javascript selenium test script. The closest thing I've come across is until.elementLocated, but it seems to throw an immediate exception.

Is there a method to delay throwing the "NoSuchElementError" exception until the timeout has expired?

"NoSuchElementError: no such element: Unable to locate element: {"method":"xpath","selector":"//button[text()='NEXT']"}"

Or is there any way to avoid this exception altogether when waiting for an element in Selenium?

  await driver.wait(function () {
        let text = "//button[text()='" + "NEXT" + "']";
        let button = By.xpath(text);
        return until.elementLocated(button);
    }, 40000).then(() => {console.log("element is located")})
javascriptselenium-webdriver

Answer №1

My primary focus is on utilizing Selenium with Java or Python, while I also delve into JS using Puppeteer or Playwright. As a result, I have not yet tested the initial solution (although I am confident it would be effective).

Based on the documentation, driver.wait requires a function and waits for its condition to become true. Therefore, you can utilize findElements which does not generate exceptions and wait for the length of the returned collection to exceed 0.

const getElements = (locator) => driver.findElements(locator).then(els => els.length);
await driver.wait(() => getElements(By.xpath("//button[text()='NEXT']")), 10000);

If needed, you can create your own custom waiter that will wait for a condition to be true and return an element. While this approach may not be as clean, it is adaptable across different frameworks.

const waitFor = async (action, timeoutMs, pollIntervalMs) => {
  let isTimeout = false;
  const timeoutId = setTimeout(() => {
    isTimeout = true;
  }, timeoutMs);
  let result;
  while (!isTimeout && !result) {
    result = await action();
    await new Promise(resolve => setTimeout(resolve, pollIntervalMs));
  }

  clearTimeout(timeoutId);
  if (isTimeout) {
    throw new Error('Timeout exceeded!');
  } else {
    return result;
  }
};

const getElementOrNull = (locator) => driver.findElements(locator).then(els => els.length ? els[0] : null);

const element = await waitFor(() => getElementOrNull(By.xpath("//button[text()='NEXT']")), 10000, 500);

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

Implementing a NestJs application on a microcomputer like a Raspberry Pi or equivalent device

I'm facing a challenge in trying to find a solution for what seems like a simple task. I am aware that using the Nest CLI, I can utilize the command "nest build" to generate a dist folder containing the production files of my project. However, when I ...

javascriptnode.jstypescriptnestjs

Error connecting to Firebase Cloud Functions - connection issue

Whenever I call my cloud function, I see the following message in the logs: Function execution took 5910 ms, finished with status: 'connection error'. It seems to be related to promises and returning or !d.exists, but I haven't been able to ...

javascriptnode.jsfirebasegoogle-cloud-firestoregoogle-cloud-functions

Is it possible to execute TypeScript class methods in asynchronous mode without causing the main thread to be blocked?

Creating an app that retrieves attachments from specific messages in my Outlook mail and stores the data in MongoDB. The challenge lies in the time-consuming process of receiving these attachments. To address this, I aim to execute the task in a separate t ...

javascriptnode.jsmongodbtypescriptoutlook

accessing the php script within a node environment

Hey there! I'm currently working on creating a chat system using socket.io, express.io, and node.js. So far, everything has been going smoothly as I've been following the documentation provided by these tools. However, when I attempt to integrat ...

javascriptphpnode.js

Checking if the upload process has been completed using XMLHttpRequest Level 2

Currently, I am utilizing ajax for uploading files. Once the file has been uploaded, PHP needs to conduct a thorough check on it (including mime type, size, virus scan using clamscan, and more). This process can take a few seconds, especially for larger fi ...

javascriptajaxuploadxmlhttprequest

What is the purpose of passing the Vuex store instance to the Vue constructor parameters?

index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: {}, getters: {}, mutations: {}, actions: {} }) app.js import Vue from 'vue' import store from &apos ...

javascriptvue.jsvue-componentvuexvue-router

Learn how to retrieve the TextBox value from a button click within a Nested Gridview

I am trying to extract the value of a textbox inside a Nested Gridview using jQuery in ASP.NET. When a Button within the Nested Gridview is clicked, I want to display the textbox value in an alert box. Here is an example setup: <asp:GridView ID="Grid ...

javascriptjqueryasp.netgridview

Insert a new row into the table using jQuery right above the button

I am working on a table where I need to dynamically add rows in the same rowId upon clicking a specific button. For instance, when the "Add Row 1" button is clicked, a new row should be added under "Some content 1", and so on for other rows. <table i ...

javascriptjqueryhtml

Tips on retrieving the text content of an HTML element using its tag

Is there a way to retrieve the selected text along with its HTML tags using window.getSelection()? When using window.getSelection(), it only returns plain text such as HELLO. However, I need the text with the HTML tag included, like this <b>Hello< ...

javascripthtmljquery

Find all strings in the array that do not begin with a letter from the alphabet

When a specific button is clicked, I need to filter the example array provided in the snippet below. The expected output should only include elements that do not start with an alphabet. I attempted: const example = ["test", 'xyz', '1 test& ...

javascriptarraysreactjsstringfilter

Comparing two Objects in JavaScript results in automatic updates for the second Object when changes are made to the first

Can someone please assist me with a hash map issue I'm encountering in my for loop? When resetting the second object, it unintentionally alters the Map values of the previous Key in the Hash Map. Any guidance on how to prevent this behavior would be g ...

javascript

How can a method be called from a sibling component in Angular when it is bound through the <router-outlet>?

In my current project, I have implemented an application that utilizes HTTP calls to retrieve data from an API endpoint and then displays it on the screen. This app serves as a basic ToDo list where users can add items, view all items, delete items, and pe ...

javascriptangularapiangular-changedetection

Ways to transfer a jQuery variable value to a PHP variable

I am trying to transfer a jQuery variable value to a PHP variable on the same page using AJAX in my JavaScript code. I have attempted to print the PHP variable but encountered an error. Any assistance would be greatly appreciated. <script type="text/ ...

javascriptphpjqueryajax

Error: This Service Worker is restricted to secure origins only due to a DOMException

Having trouble implementing this on my website; it keeps showing the following error. Help, please! Service Worker Error DOMException: Only secure origins are allowed. if ('serviceWorker' in navigator && 'PushManager' in wind ...

javascriptpush-notificationservice-worker

What is the process for editing a JSON file and preserving the modifications?

I have a JSON file with a key (food_image) and I am looking to dynamically assign the index value in a loop to it, such as food_image0, food_image1 ... food_image{loop index}. After that, I aim to save this modified JSON file under a new name. All values ...

javascriptpythonjson

ensure that only one option can be selected with the checkbox

Can someone help me with applying this code on VueJS? I tried replacing onclick with @click but it's not working for me. I'm new to VueJS, so any guidance would be appreciated! function onlyOne(checkbox) { var checkboxes = document.getElement ...

javascriptvue.jsvuejs2

Tips for retrieving input values when they are not available in HTML documents

In this code snippet, I am creating an input element with the file type without adding it to the DOM. My goal is to retrieve the value of this input once the user selects a file. Even though the input is not part of the HTML template, I still want to acces ...

javascriptangulartypescript

Switching Next.js JavaScript code to Typescript

I am currently in the process of transforming my existing JavaScript code to TypeScript for a web application that I'm developing using Next.Js Here is the converted code: 'use client' import React, { useState, ChangeEvent, FormEvent } fro ...

javascripttypescriptnext.js

How can I achieve the same functionality as C# LINQ's GroupBy in Typescript?

Currently, I am working with Angular using Typescript. My situation involves having an array of objects with multiple properties which have been grouped in the server-side code and a duplicate property has been set. The challenge arises when the user updat ...

javascriptarraysangulartypescript

What is the process for storing an array in AdonisJs migrations?

Having trouble saving an array into a PostgreSQL database! 'use strict' const Schema = use('Schema'); class UsersSchema extends Schema { up () { this.create('users', (table) => { table.increments(); t ...

javascriptnode.jsknex.jsadonis.js