Error: Element not found - Selenium JavaScript was unable to locate the specified element

Having trouble clicking on an element using Selenium with JavaScript. Even after implementing explicit wait, still encountering errors. Any suggestions or solutions?

Here is the code in test.js:

const Browser = require("../Browser")
const MainPage = require("../pageobjects/MainPage")
const AlertPage = require("../pageobjects/AlertPage");
describe("Test 1", function(){
    it("test case",  async function(){
         await Browser.goToUrl("https://demoqa.com/")
         let mainPage = new MainPage();
         let isMainPageDisplayed = await mainPage.isMainPageDisplayed();
         expect(isMainPageDisplayed).to.be.true
         await mainPage.clickAlertFrameWindows()
         let alertPage = new AlertPage()
         let isAlertPageDisplayed = await alertPage.isAlertElDisplayed();
         expect(isAlertPageDisplayed).to.be.true
         await alertPage.clickAlertEl()
         await Browser.closeBrowser()
    })
})

Code for AlertPage.js:

class AlertPage{
    #name = "Alert Page";
    #locator = "//span[text()='Alerts']"
    #alertEl = new BaseElement(this.#locator, "Alert button")

    clickAlertEl(){
 BrowserFactory.getBrowser().wait(until.elementLocated(By.xpath("//span[text()='Alerts']/ancestor::li[contains(@class,'btn')]")))
        this.#alertEl.clickWithExecutor()
 
    }
    isAlertElDisplayed(){
        // BrowserFactory.getBrowser().wait(until.elementLocated(By.xpath("//span[text()='Alerts']/ancestor::li[contains(@class,'btn')]")))
        return this.#alertEl.isElementPresent()
    }
}
module.exports = AlertPage;

Snippet of HTML:

`

Answer №1

Typically, <span> elements tend to be more user-friendly for clicking purposes. Therefore, you may want to consider utilizing them within the clickAlertEl() function:

BrowserFactory.getBrowser().wait(until.elementLocated(By.xpath("//span[text()='Alerts']//ancestor::li[1]")))

Alternatively, you could use the following simplified approach:

BrowserFactory.getBrowser().wait(until.elementLocated(By.xpath("//span[text()='Alerts']")))

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

Using THREE.js to cast rays from a secondary camera onto the scene

I've been attempting to raycast the mouse from my camera in order to trigger hover and click events on meshes within my scene. The issue I'm facing is that my camera is currently a child object of another mesh (to facilitate easier camera moveme ...

Jquery refuses to conceal a particular element

I've encountered this issue before, but I'm facing a problem this time. I'm attempting to create a popup that is initially hidden. When clicked, the popup does appear, but I'm unable to close it. Additionally, when trying to change the ...

How can I create my own unique scrolling behavior in JavaScript?

Looking to create a similar effect as seen on this website: where the vertical scrollbar determines the movement of the browser "viewport" along a set path. I believe that using Javascript to track the scroll bar value and adjust background elements acco ...

Database entries displayed using a CSS grid

Struggling to organize elements in a grid layout using CSS from my database. Despite all efforts, the items keep aligning to the left instead of forming a proper grid https://i.sstatic.net/5SfJZ.jpg I've attempted various methods to grid the items, b ...

"Use jquerytools to create a dynamic play/pause button functionality for scrollable content

Greetings! I am currently working on creating a slide using Jquerytools. Here are some helpful links for reference: To view the gallery demonstration, please visit: For information on autoscroll functionality, check out: If you'd like to see my cod ...

Exploring time differences in Javascript

I am trying to save a JSON AJAX response from the server in the browser's localStorage for a duration of one minute, along with a timestamp generated using new Date().getMinutes(). Upon triggering $(document).ready, I aim to check the stored timestam ...

Python Selenium Webdriver: Infinite Looping Problem

Hi, I'm new to working with Selenium webdriver and I'm currently trying to extract Google reviews. I created a Python script in an attempt to load all the reviews related to a restaurant on Google. However, I've encountered a problem with th ...

Distinguishing Between URLs for Google Maps JavaScript API

Can you explain the discrepancy between two Google API URLs? One is https://maps.google.com/maps/api/js?key={api_key}, which is currently not functioning and returns an error when attempting to use it on a map to display coordinates. The other is https:/ ...

Can Cucumber Tests be run multiple times depending on tags?

Assuming I have a Feature File with two scenarios containing different tags as shown below: Feature: Home Feature Tests for the Home page @Desktop @Tablet @Mobile Scenario: Verify correct page title Given I go to the Home page Then the page title sh ...

Using Express middleware in a TypeScript Express application

I'm currently converting the backend of an ExpressJS application to Typescript. While working on the auth.routes.ts file, I encountered an issue with the middleware (authMiddleware). It seems like there might be a typing error, as the same code in the ...

Command not found: execute - firebase deploy

After deploying my Firebase function project, I encountered an error that said "missing script:build." I have tried to fix it on my own but have been unsuccessful. I would greatly appreciate any assistance Here is a screenshot of the error https:// ...

How to validate text from a <span> tag using Selenium WebDriver and JavaScript

Is there a way to retrieve the value from the span tag using this code snippet? var error = driver.findElement(webdriver.By.id('error-container-text')).getAttribute('innerHTML'); When I run the above code, I get a response that looks ...

Unable to locate webpack bundle in Express

I'm currently working with Node, Express.js, Webpack, and Handlebars for my app development. Despite searching extensively for a solution, I have not been able to find one that resolves my issue. Below is the structure of my files: Handlebars (main f ...

Utilize Angular's ngFor directive to loop through HTML elements and

<div (click)="switchImg($event)" class="containerImgSmall"> <img [ngStyle]="imgs.img1.zero.style" id="1" src="{{ imgs.img1.zero.src }}" alt="" ...

I am encountering issues with the text box summing as it is providing me with

Hey everyone, I hope you're all having a good morning. I'm facing an issue with 4 text boxes that should be summed up and the total displayed in 1 text box. However, instead of getting the correct total value, I seem to be getting something else ...

Bringing in data using .json files in a react native environment with Redux

I have developed a fitness app and I am utilizing Redux to store all the sets and workouts. Currently, I have manually entered all the exercises into Redux data for testing purposes. However, I now have all the exercises stored in a .json file and I want t ...

Automating the selection of multiple checkboxes in Selenium using Python has no straightforward solution

The Challenge: My task is to ensure that upon accessing a specific webpage, 10 checkboxes are clicked. My Script: def select_checkbox(self): checkboxes = self.find_elements(EventsLocators.CHECKBOX_SELECTOR) for box in checkboxes: box ...

Tips for displaying average progress using a progress bar

I'm in the process of creating a website and I would like to incorporate a progress bar that reflects the average of all the input numbers obtained from an HTML form. Although I have some experience with JavaScript, I am currently in need of the Java ...

Issue with JQuery slide toggle preventing screen from scrolling down

On my website, I have a div classed as .slidingDiv that is hidden until the anchor .show_hide is clicked, causing it to slide down. This feature works perfectly when the .slidingDiv is the only content on the page. However, if there is other content above ...

Optimize a feature by implementing it as a modal in Angular version 5

I am currently working on an Angular 5 project that features a side panel with a master/detail view. My goal is to allow users to maximize the detail component in a modal dialog by clicking a button within this component - similar to the behavior found in ...