When using Selenium WebDriver, the WebElement .findElement method can sometimes cause errors in JavaScript

Successfully locating the element, I am able to retrieve the text within the container. However, when attempting to fetch the titles of products by iterating through the array of WebElements inside the container, the .findElement() consistently throws an error:

Note that #product_container is dynamically generated

<div id="product_container">
  <div class="product"><div class="wrapper"><span class="product_title">Title 1</span></div></div>
  <div class="product"><div class="wrapper"><span class="product_title">Title 2</span></div></div>
  <div class="product"><div class="wrapper"><span class="product_title">Title 3</span></div></div>
  <div class="product"><div class="wrapper"><span class="product_title">Title 4</span></div></div>
</div>
const {Builder, By, Key, until} = require('selenium-webdriver');

(async function example() {
  let driver = await new Builder().forBrowser('chrome').build();
  let container = By.css('#product_container');
  try {
    await driver.get('https://example.com/search/?q=mySearchText');
    
    await driver.wait(until.elementLocated(container), 10000); // <-- Success
    
    const result = await (await driver.findElement(container)).getText() // <-- Success
    console.log(result) // <-- Success
    
    const items = await (await driver.findElement(container)).findElements(By.css('.product')) // <-- Success

    items.forEach(async (item, i)=>{
      // Find the title of each product 
      
        item
          .findElement(By.css('.product_title'))
          .then(()=>{
            console.log('success')
          })
          .catch(err=>{
            console.log('failed', err) // <-- Always rejected to here
          });
        
       
  
    })
  } finally {
    await driver.quit();
  }
})();

The error message encountered

failed Error: ECONNREFUSED connect ECONNREFUSED 127.0.0.1:56016 at ClientRequest. (/./node_modules/selenium-webdriver/http/index.js:262:15) at ClientRequest.emit (events.js:315:20) at Socket.socketErrorListener (_http_client.js:426:9) at Socket.emit (events.js:315:20) at emitErrorNT (internal/streams/destroy.js:92:8) at emitErrorAndCloseNT (internal/streams/destroy.js:60:3) at processTicksAndRejections (internal/process/task_queues.js:84:21)

Answer №1

After encountering a JavaScript promise and async issue, I discovered that the problem stemmed from items.forEach not waiting for promises to resolve within its async function. To overcome this obstacle, I successfully resolved it by utilizing Promise.all(). See below:

await Promise
      .all(items.map(async (item)=>{
        let title = await (await item.findElement(By.css('.product_title'))).getText()
        return Promise.resolve(title)
      }))
      .then(function(result) {
        console.log('Array of title:', result)
      });

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

Crafting artistic shapes using the Canny Edge Detection technique on Canvas

Can someone provide some guidance on using Canny Edge Detection to generate shapes in Canvas? ...

What is the significance of the appearance of the letters A and J in the console for Objects?

After running console.log() in JavaScript code, you may notice some random letters like A and j before or after the Object description in the Google Chrome browser console. What is the significance of these letters? ...

Ways to conceal the picture

Check out the JSfiddle link here for the full code. I'm having trouble with my slider as the last picture keeps collapsing underneath and is not hidden as it should be. I suspect this issue is causing the slider to malfunction. HTML <div class=" ...

What could be causing my code to produce duplicate data?

I need assistance with my web scraping project on Indeed search results. I am encountering an issue where the data from the first page is being duplicated when printed. The first page's data prints twice, while the rest of the pages' data are onl ...

Ensuring Selenium waits for combobox content modification

I am facing a situation where I need to wait for the contents of a combobox to change before retrieving its new contents. Using an implicit wait won't solve this issue as the element is already present on the page. My goal here is not to find a speci ...

Attempting to use geckodriver to call webdriver.Firefox but encountering the NS_BINDING_ABORTED error message

I am encountering difficulties with the geckodriver. When I run the following code, I receive the error message "SessionNotCreatedException: Message: Error: NS_BINDING_ABORTED". The issue seems to be arising from the line where I call "driver = webdriver.F ...

Sending a tailored query string through a form

Currently, when I submit a form, it directs me to the URL www.domain.com/search/?maxprice=10000000. However, I want it to redirect me to a custom URL such as www.domain.com/search/maxprice_10000000/ I came across some JavaScript code that was supposed to ...

Flipping the camera rotation matrix in three.js

I am struggling with a scenario involving objects and a camera being controlled by a trackball. Whenever I add a new object to the main object, I want it to maintain its original orientation regardless of how the camera has moved around. For instance, with ...

Learn how to securely transmit data using basic authentication in Node.js with the node-fetch module

Having trouble with this code. I am facing an issue where a "post" request with basic authentication returns a 200 status, but no response data is received. Surprisingly, when the same code is executed without auth credentials, it works perfectly fine. l ...

Display array elements without numerical indexes

Consider the code snippet below: for(i=0; i<3; i++){ a = {}; a['name' + i] = i; data.push(a); } This code will generate the following array: { 1:{name0:0}, 2:{name1:1}, 3:{name2:2} } How can I modify the code ...

It is advisable to keep extra information in req.params for better practice

As I work on developing a RESTful API for my web application, I have discovered a helpful practice. When creating various routes and implementing the logic for each one, I found it beneficial to store any additional data needed in the req object under the ...

What is the best way to display the complete text or wrap a menu item in an Angular Material menu?

Is it possible to display the full text of a menu item instead of automatically converting it to ellipses or breaking the word? I've tried various CSS methods without success. Any suggestions? https://i.stack.imgur.com/3l7gE.png #html code <mat-m ...

How can I apply styling to Angular 2 component selector tags?

As I explore various Angular 2 frameworks, particularly Angular Material 2 and Ionic 2, I've noticed a difference in their component stylings. Some components have CSS directly applied to the tags, while others use classes for styling. For instance, w ...

What could be causing my select value to stay unchanged? Issue with the "selected" attribute or property

var original_role = $('option:selected', '#user_role').val(); $('#role_cancel').click(function() { //console.log(original_role); $('option:selected', '#user_role').removeAttr('selected'); //des ...

What is the simplest method for fetching and parsing JSON data with jQuery and JavaScript?

I'm having trouble making this code snippet work. I can't seem to figure it out. The objective is to retrieve and parse a JSON object in the simplest and easiest way possible. Here's the code snippet. <!DOCTYPE html> <html> &l ...

Is there a way to retrieve the status codes of all requests using Requests-html (or an alternative with selenium)?

Here is the code snippet that I am currently working with: from requests_html import HTMLSession ses = HTMLSession() r = ses.get(MYURL) # initialize a headless chrome browser and load the specified URL r.render(keep_page=True) # This will render the HT ...

The response from getStaticProps in Next.js is not valid

While following the Next.js documentation, I attempted to retrieve data from a local server but encountered an error message: FetchError: invalid json response body at http://localhost:3000/agency/all reason: Unexpected token < in JSON at position 0 ...

Invoke the parent's function within the Local-Registration component of VueJs

I have a Vue object: var app = new Vue({ el: '#my-id', data() { return { example: 1 } }, methods: { exampleMethos(data) { console.log('data', data); } }, ...

Updating Vue 3 asynchronous data doesn't reflect changes when the local settings are modified

I have a dedicated external .js file designed to retrieve data from the backend depending on the website's locale. Check out the code snippet below: import { ref } from "vue"; export function fetchData(section, key) { // Making a GET requ ...

Which is better for managing checkbox state in React - react-bootstrap or material-ui?

Currently, I am working on a project that involves using checkboxes within a component to display products based on specific features selected by the user. I am seeking advice on how to effectively manage the checkboxes and their corresponding state inform ...