Element Not Found Error: Element could not be located - Script using JavaScript with Seleniumwebdriver

Question

Element Not Found Error: Element could not be located - Script using JavaScript with Seleniumwebdriver

After extensive research, I have identified the issue at hand. The challenge lies in the fact that others do not follow the same coding structure as me and are unclear about where or what to insert into my code. I am aware that a try/catch statement or the wait.until statement is required. Despite trying both approaches without success, I would greatly appreciate any assistance. Thank you in advance!

require('chromedriver');
const selenium = require("selenium-webdriver");
const By = selenium.By;
const until = selenium.until;

const driver = new selenium.Builder().forBrowser("chrome").build();

driver.get("https://qa.chaplinq.org/LinQ/Account/SignIn");

const locators = {
    loginForm: By.id("login-form"),
    loginField: By.css("input#UserName"),
    loginPass: By.css("#login-form input[name='Password']"),
    signIn: By.css("form#login-form > footer > button"),
    createAcc: By.css("a#createAccountBtn"),
    applyfirstName: By.css("input#FirstName"),
    applylastName: By.css("input#LastName"),

function createAcc() {
    driver.findElement(locators.createAcc).click();
};

function firstName(text) {
    driver.findElement(locators.applyfirstName).sendKeys(text);
};

createAcc();
firstName("kevin");

[ERROR] node : (node:1896) UnhandledPromiseRejectionWarning: 
NoSuchElementError: no such element: Unable to 
[ERROR] locate element: {"method":"css 
selector","selector":"input#FirstName"}
[ERROR] At line:1 char:1
[ERROR] + node index.js
[ERROR] + ~~~~~~~~~~~~~
[ERROR]     + CategoryInfo          : NotSpecified: ((node:1896) 
Unh...put#FirstName"}:String) [], RemoteExcepti 
[ERROR]    on
[ERROR]     + FullyQualifiedErrorId : NativeCommandError
[ERROR]  
[ERROR]   (Session info: chrome=69.0.3497.100)
[ERROR]   (Driver info: chromedriver=2.42.591088 
(7b2b2dca23cca0862f674758c9a3933e685c27d5),platform=Windows NT 
[ERROR] 10.0.17763 x86_64)
[ERROR]     at Object.checkLegacyResponse 
(C:\users\kevin.yu\node_modules\selenium-webdriver\lib\error.js:585:15)
[ERROR]     at parseHttpResponse (C:\users\kevin.yu\node_modules\selenium- 
webdriver\lib\http.js:533:13)
[ERROR]     at Executor.execute (C:\users\kevin.yu\node_modules\selenium- 
webdriver\lib\http.js:468:26)
[ERROR]     at process._tickCallback (internal/process/next_tick.js:68:7)
[ERROR] 
[ERROR] (node:1896) UnhandledPromiseRejectionWarning: Unhandled promise 
rejection. This error originated either 
[ERROR] by throwing inside of an async function without a catch block, or by 
rejecting a promise which was not 
[ERROR] handled with .catch(). (rejection id: 1)
[ERROR] 
[ERROR] (node:1896) [DEP0018] DeprecationWarning: Unhandled promise 
rejections are deprecated. In the future, 
[ERROR] promise rejections that are not handled will terminate the Node.js 
process with a non-zero exit code.
[ERROR]

javascript selenium webdriver

Answer 1

Answer №1

The error message "NoSuchElementError" indicates that the specified element is not currently present in the HTML document. This could happen when elements are loaded or removed dynamically on the page. If your Selenium automation scripts are executing faster than the element can be displayed, this error may occur.

Could it be possible that the element input#FirstName only appears after it has been interacted with (e.g., clicked)?

If that's the case, you might want to consider inserting a pause or wait function between the createAcc() and firstName() actions.

Answer 2

The error message "NoSuchElementError" indicates that the specified element is not currently present in the HTML document. This could happen when elements are loaded or removed dynamically on the page. If your Selenium automation scripts are executing faster than the element can be displayed, this error may occur.

Could it be possible that the element input#FirstName only appears after it has been interacted with (e.g., clicked)?

If that's the case, you might want to consider inserting a pause or wait function between the createAcc() and firstName() actions.

Answer 3

Answer №2

Remember to always include a closing brace to end your "locators" object in order to avoid any syntax errors.

Answer 4

Remember to always include a closing brace to end your "locators" object in order to avoid any syntax errors.

Answer 5

Answer №3

Dealing with Web Components and Shadow DOM Elements

An issue arises when attempting to locate elements within shadow DOMs, even if they are present on the page.

The use of the /deep/ and ::shadow css selectors has been phased out and no longer available as a solution.

For those seeking an alternative approach, there is a helpful workaround detailed in this article (not authored by me) which involves utilizing the executeScript function in Java.

Here is a sample javascript code snippet:

For instance, if you have a host/web component tag with id "hostId" on the page, and you need to access an element inside it with id "targetElementId":

async function getComponentElement(hostId,targetElementId){
    let host = await driver.findElement(By.id(hostId));
    let targetElement = await driver.executeScript(() => {            
            return arguments[0].shadowRoot.getElementById(arguments[1]);
        }
        ,host,targetElementId
    );    
    return targetElement ;
}

let element = await getComponentElement('hostId','targetElementId');

Answer 6

Dealing with Web Components and Shadow DOM Elements

An issue arises when attempting to locate elements within shadow DOMs, even if they are present on the page.

The use of the /deep/ and ::shadow css selectors has been phased out and no longer available as a solution.

For those seeking an alternative approach, there is a helpful workaround detailed in this article (not authored by me) which involves utilizing the executeScript function in Java.

Here is a sample javascript code snippet:

For instance, if you have a host/web component tag with id "hostId" on the page, and you need to access an element inside it with id "targetElementId":

async function getComponentElement(hostId,targetElementId){
    let host = await driver.findElement(By.id(hostId));
    let targetElement = await driver.executeScript(() => {            
            return arguments[0].shadowRoot.getElementById(arguments[1]);
        }
        ,host,targetElementId
    );    
    return targetElement ;
}

let element = await getComponentElement('hostId','targetElementId');

Element Not Found Error: Element could not be located - Script using JavaScript with Seleniumwebdriver

Answer №1

Answer №2

Answer №3

Similar questions

Securing your Node.js connect-rest REST API with OAuth: A comprehensive guide

What methods can be used to crack this number concealment system?

Adding a backslash in Angular: Tips and Tricks

Using forEach in React to simultaneously set multiple properties and return destructured output within the setState function

If a website undergoes changes to its user interface, can the selenium web automation still function effectively?

Can you share the outcomes of executing a Node.js program in real-time?

Fetching JSON data using Promise.all results in an empty response

Using Python with Selenium to choose an option from a dropdown selection

Using Regular Expressions in JavaScript to verify if an element from an array is contained within a string

Using script tags incorrectly (JavaScript platform game)

Tips on sending a string as an argument in an onclick function

Click on the text within a paragraph element

Customizing the language parameter for the apply button script on LinkedIn

When you press the submit button, the screen automatically scrolls down but no action is taken

Is there still a need to preload dynamic images in the background?

The default export of Nuxt, referred to as 'mod', could not be located

Froala Editor: Innovative external toolbar that pops up when the button is clicked

Ways to resolve the following C# problem: No match found for the specified testcase filter `FullyQualifiedName =`

Utilizing Jquery for event handling in dynamically created table rows in a datatable

Retrieve particular key from document in MongoDB based on provided value