Differences in outcomes have been observed between the elementLocated and findElements functions

Currently, I am in the process of developing Webdriver automation for a specific web application. As part of this process, I have created a test that seems to be functioning well most of the time but occasionally encounters an issue.

it('verifies presence of five items', async function(done) {
  try {
    await driver.wait(until.elementLocated(By.className('item-class')),5000);
    const items = await driver.findElements(By.className('item-class'));
    expect(items.length).toBe(5);
    done();
  }
  catch(err) {
    console.log(err)
  }
}

The problem arises when the test fails with the following message:

Expected 0 to be 5.

Situations where there are zero items present on the page at the time of expectation seem perplexing based on my understanding. I anticipated that by using the initial code line to ensure the existence of these items, encountering a scenario where no items were found should not be possible during the subsequent expect() call.

This situation raises several questions:

1) What crucial detail or concept might I be overlooking that makes such an outcome feasible?
2) Is there potentially a more effective strategy or technique that could be utilized to delay execution until the expected number of items are visible on the screen?

Answer №1

After examining the source code, I discovered that elementLocatedBy in fact utilizes findElements. You can view this at this link. As a result, when findElements returns an empty array after the timeout period, it is expected to yield a count of 0 (I learned something new today).

If you prefer not using findElements, consider crafting your own solution or leveraging existing methods from here.

driver.wait(async function() {
  const items = await driver.findElements(By.className('item-class'))
  return items.length > 0;
}, 5000);

Answer №2

One effective approach to resolving this issue is to:

try {
const items = await driver.wait(until.elementsLocated(By.className('item-class')));
return items.length > 0;
}
catch(err) {
    console.log(err)
}

This method ensures that all elements are located before proceeding, returning an array of items (note: without await, it returns an array of promises). There is no timeout set, so it will continue waiting until all elements are ready (or a limit can be imposed for troubleshooting purposes).

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

Incorporating TypeScript into a project originally developed in JavaScript

I'm considering using TypeScript to write code for a JavaScript project. I've come to appreciate the benefits of TypeScript and am especially interested in using it for our AngularJS 1.5 project, which we plan to migrate soon. As I'm new to ...

guide for interpreting a complex json structure

I'm attempting to extract data from a JSON file that has multiple layers, like the example below. - "petOwner": { "name":"John", "age":31, "pets":[ { "animal":"dog", "name":"Fido" }, ...

Simulating dynamic route parameters in the Next 13 application directory

I am currently working with Jest and testing library to conduct unit tests on my NextJS application. I am facing difficulties in rendering a page on a dynamic path. Here is the code for my page/component: export default async function MyPage({ params }: { ...

The conditional statement in the given code snippet is failing to execute properly

const checkCondition = (props) => { let conditionMet = false; console.log('-----****----',props); if(props && props.isAllowed) { conditionMet = true; } if(someOtherCondition) { return( <li><Link className=" ...

MUI-Datatable rows that can be expanded

I'm attempting to implement nested tables where each row in the main table expands to display a sub-table with specific data when clicked. I've been following the official documentation, but so far without success. Below is a code snippet that I& ...

Is there a way to bypass the "Error: Another application is currently displaying over Chrome" message using Javascript or Typescript?

Can the "Another app is displaying over chrome error" be bypassed using JavaScript or TypeScript? Error Message: https://i.stack.imgur.com/iSEuk.png ...

delivering axios response to display the page

I have a code snippet that requests data from an external API using axios and I want to incorporate the response into my rendered page. Here is my code: //Snippet from my controller required in main routes exports.recordBySlug = async (req, res, next) =&g ...

Adding a distinct key and its corresponding value to an array in Vue for a unique

I am attempting to add key-value pairs into an array while ensuring their uniqueness. Currently, I am trying the following approach: for (const [key, value] of Object.entries(check)) { console.log(`${key}: ${value}`); this.inputFields. ...

css based on the current time in the United States

I have a working code that currently reads the user's computer time, but I specifically need to get the hours from the USA regardless of the user's location. The CSS should be applied based on USA time. <script type="text/javascript"> dat ...

Is there a way to apply the active class without relying on an anchor element?

After creating a one-page website, I utilized JavaScript to prevent the hash from appearing in the URL. Here is the HTML code: <ul class="click crsl"> <li><a class="page1 dot active"></a></li> <li><a class=" ...

The knockout click event isn't functioning properly for a table generated by ko.computed

My goal is to connect a table to a drop-down menu. Here are the key points of what I'm trying to achieve: The drop-down should list MENUs. Each MENU can have multiple MODULES associated with it, which will be displayed in the table based on the ...

Getting Started with NPM Package Initialization in Vue

I'm attempting to incorporate the v-mask package into my Vue project using npm. Following the documentation, I executed npm install v-mask, but I am unsure where exactly to initialize the code. I tried placing it in the main.js file: import { createAp ...

The issue of using an import statement outside a module arises when executing Protractor

I am facing an issue while running Protractor with my two files. When I execute the command "protractor protractor.config.js", I encounter the following error: D:\work\staru-app>protractor protractor.config.js [16:57:17] I/launcher - Running ...

deactivating a form field using a function in Next.js

Here's the scenario: I have an input slider that needs to be disabled based on the role requirements of the logged-in user. For instance, if the input is only accessible to users with an accountant level role, then it should be disabled for those who ...

Issues with the directory for Chrome

Currently, I am utilizing jQuery and running an HTML file on my local machine without a server. Interestingly, the code works perfectly fine on Firefox but encounters issues on Chrome: $('#result').load('test.html'); It appears that t ...

How to send route parameters to a controller function in ExpressJS

I'm currently working on setting up user authentication for my application using passport JS. I am facing a challenge in passing the passport variable between app.js, routes.js, and controller.js. Despite trying various approaches, I have been unsucce ...

Executing a task within a Grunt operation

I have integrated Grunt (a task-based command line build tool for JavaScript projects) into my project. One of the tasks I've created is a custom tag, and I am curious if it is feasible to execute a command within this tag. Specifically, I am working ...

Save the contents of a file within an HTML table using jQuery

I needed to insert multiple files into the database by uploading and adding each file's content to a table. Once all files were added to the table, I included the table's values along with the file content in form data which was then passed to aj ...

What is the best way to display text from a file on a different html page using jQuery's json2html?

Here is the json data: var data = [ { "name": "wiredep", "version": "4.0.0", "link": "https://github.com/taptapship/wiredep", "lice ...

Removing elements in AngularJS using ngRepeat

Many have questioned how to implement item removal within the ngRepeat directive. Through my research, I discovered that it involves using ngClick to trigger a removal function with the item's $index. However, I haven't been able to find an exam ...