The action of clicking on the div element designated with the role of 'button' is not functioning as expected

Question

The action of clicking on the div element designated with the role of 'button' is not functioning as expected

The issue arises when attempting to click on the icon within a div element with role='button'. Despite trying to click on the icon, it does not function as expected.

Here is the corresponding HTML:

<div class="list">
  <div class="item">
    <div role="button" tabindex="-1">
      <strong>ItemName2</strong>
    </div>
    <div class="d">
      <div class="item-icon" role="button" tabindex="-1"  style="display: none">
        <i aria-label="icon: edit" class="edit"></i>
      </div>
    </div>
  </div>
  <div class="item"> ... </div>
  <div class="item"> ... </div>
  <div class="item"> ... </div>
</div>

And here is the JavaScript code snippet:

try {
    await driver.get("http://127.0.0.1");

    let findButtons = await driver.findElements(By.tagName('strong'));

    let buttons = findButtons.map(elem => elem.getText());
    const allButtons = await Promise.all(buttons);
    console.log(allButtons);             // It displays all button values, such as ItemName1
    let tButton;
    for (let i = 0; i < findButtons.length; i++) {
      if (allButtons[i] == 'ItemName2') {
        tButton = await findButtons[i];
        tButton.click();                // Trying to click on the button with value = ItemName2
        console.log(allButtons[i]);     // Displays button value 'ItemName2'    
      }
}}}

Console error message:

(node:12254) UnhandledPromiseRejectionWarning: StaleElementReferenceError: stale element reference: element is not attached to the page document

javascript selenium selenium-webdriver

Answer 1

Answer №1

Encountering a stale element exception is likely due to attempting to access an element with outdated references. Each time the element is clicked within the loop, its reference gets updated making allButtons[i] ineffective. To resolve this issue, you need to obtain the most recent references of the buttons. Consider implementing the following solution:

JavaScript snippet:

const { By, Key, until } = require("selenium-webdriver");
const webdriver = require("selenium-webdriver");
require("chromedriver");
async () => {
  let driver = await new webdriver.Builder().forBrowser("chrome").build();
  try {
    await driver.get("http://10.203.201.77:8000/login");

    let findButtons = await driver.findElements(By.tagName('strong'));

    let buttons = findButtons.map(elem => elem.getText());
    const allButtons = await Promise.all(buttons);
    console.log(allButtons);             // Displaying all button values, for example, ItemName1
    let tButton;
    for (let i = 0; i < findButtons.length; i++) {
      buttons = findButtons.map(elem => elem.getText()); # updating the button to refresh element reference
      if (allButtons[i] == 'ItemName2') {
        tButton = await findButtons[i];
        tButton.click();                // Attempting to click on the button with value = ItemName2
        console.log(allButtons[i]);     //  Now showing button value as 'ItemName2'

      }
    }
      console.log("DONE");
    } catch (e) {
      console.log(e);
    } finally {
      await driver.quit();
    }
  }
}

Answer 2

Encountering a stale element exception is likely due to attempting to access an element with outdated references. Each time the element is clicked within the loop, its reference gets updated making allButtons[i] ineffective. To resolve this issue, you need to obtain the most recent references of the buttons. Consider implementing the following solution:

JavaScript snippet:

const { By, Key, until } = require("selenium-webdriver");
const webdriver = require("selenium-webdriver");
require("chromedriver");
async () => {
  let driver = await new webdriver.Builder().forBrowser("chrome").build();
  try {
    await driver.get("http://10.203.201.77:8000/login");

    let findButtons = await driver.findElements(By.tagName('strong'));

    let buttons = findButtons.map(elem => elem.getText());
    const allButtons = await Promise.all(buttons);
    console.log(allButtons);             // Displaying all button values, for example, ItemName1
    let tButton;
    for (let i = 0; i < findButtons.length; i++) {
      buttons = findButtons.map(elem => elem.getText()); # updating the button to refresh element reference
      if (allButtons[i] == 'ItemName2') {
        tButton = await findButtons[i];
        tButton.click();                // Attempting to click on the button with value = ItemName2
        console.log(allButtons[i]);     //  Now showing button value as 'ItemName2'

      }
    }
      console.log("DONE");
    } catch (e) {
      console.log(e);
    } finally {
      await driver.quit();
    }
  }
}

Answer 3

Answer №2

Success! I have discovered the solution:

 const findButtons = await driver.findElements(By.tagName('strong'));

 const buttons = findButtons.map(async element => await element.getText()); // Enhanced with async & await
 const allButtons = await Promise.all(buttons);
 console.log(allButtons);   // This contains all item names

Answer 4

Success! I have discovered the solution:

 const findButtons = await driver.findElements(By.tagName('strong'));

 const buttons = findButtons.map(async element => await element.getText()); // Enhanced with async & await
 const allButtons = await Promise.all(buttons);
 console.log(allButtons);   // This contains all item names

The action of clicking on the div element designated with the role of 'button' is not functioning as expected

Answer №1

Answer №2

Similar questions

Clicking on an element with ng-click does not impact the children of its parent

How can I exclude specific rows when using the get_where function in Codeigniter?

Loading Excel spreadsheet with points of interest and iterating through them

Decode: What steps are needed to obtain complete administrative access through coding?

What are the implications of not providing Content-Disposition in web security?

Authentication using images

Deciphering the intricacies of VUEX-STORE modules

Is there a way to use the sort() function to further categorize objects that have been moved to the bottom of an array during sorting?

Tips for loading a webpage when a button is clicked with the help of jQuery AJAX and PHP:

Ways to identify if one object is positioned above another

Filtering JSON Objects in JavaScript: A Comprehensive Guide

Passing a query variable to an input field through a PHP function

How can I properly type my object using generics if the Typescript code `let result: { [key: T[K]]: T } = {};` is not functioning as expected?

typescriptWhat is the syntax in TypeScript for creating a prototype of a multidimensional

When the MATERIAL UI MENU ITEM is clicked, an action is triggered automatically upon loading the

Can you explain the functions of Angular, Node.js, AJAX, and JQuery to me?

Error: Unable to use map function on users .. cannot perform mapping on functions

Sending a JavaScript object to a JSP page via jQuery

What are the best circumstances to utilize jQuery-UI autocomplete feature?

What steps should I take to retrieve the value from the daterange picker?