Protractor patiently anticipates the presence of several elements

Question

Protractor patiently anticipates the presence of several elements

After loading the following elements into the DOM using AJAX:

<div class="elm_class"></div>
<div class="elm_class"></div>
<div class="elm_class"></div>

I need to wait for a specific number of elements to be present in my Protractor test. Here is what I've tried so far:

function checkElements(css, i) {
    var elements = element.all(by.css(css));
    var EC = protractor.ExpectedConditions;

    if (elements.length > i) {
        return EC.presenceOf($$(".heading-description.uplevel").get(i));
    } else {
        return setTimeout(checkElements(css, length), 1000);
    }
}

browser.driver.wait(checkElements(".elm_class", 3), 10000);

However, this approach is not working as expected and it throws an error:

maximum call stack size exceeded.

I would appreciate it if someone could provide guidance on how to incorporate a "promise" object back into the wait function.

javascript angularjs selenium selenium-webdriver protractor

Answer 1

Answer №1

Create a custom Expected Condition for waiting until a specified number of elements matching a selector are present:

function waitForElements(elements, n) {
    return function () {
        return elements.count(function (count) {
            return count >= n;
        });
    };
}

browser.wait(waitForElements($$(".element_selector"), 3), 10000);

An important point to highlight is that the waitForElements function returns a function that browser.wait() will continue to run until it resolves to true or a timeout occurs.

Answer 2

Create a custom Expected Condition for waiting until a specified number of elements matching a selector are present:

function waitForElements(elements, n) {
    return function () {
        return elements.count(function (count) {
            return count >= n;
        });
    };
}

browser.wait(waitForElements($$(".element_selector"), 3), 10000);

An important point to highlight is that the waitForElements function returns a function that browser.wait() will continue to run until it resolves to true or a timeout occurs.

Answer 3

Answer №2

browser.wait will continuously loop until it returns true within the specified number of milliseconds, so avoid using a setTimeout function inside it. Additionally, make sure to utilize .count() instead of .length when counting the elements found by .all

function checkIfTrue(css, expectedCount){
  var elements = element.all(by.css(css));

  // Count the number of elements found
  return elements.count().then(function(elementCount) {
    // Return false if there are not enough elements, causing browser.wait to continue looping
    return elementCount >= expectedCount;
  });
};

browser.driver.wait(checkIfTrue(".elm_class", 3), 10000);

// After waiting for the elements, perform additional checks
// I am not familiar with EC usage, so I cannot guarantee the functionality of this part of the code
var EC = protractor.ExpectedConditions;
expect(EC.presenceOf($$(".heading-description.uplevel").get(m1I))).toBe(true);

Answer 4

browser.wait will continuously loop until it returns true within the specified number of milliseconds, so avoid using a setTimeout function inside it. Additionally, make sure to utilize .count() instead of .length when counting the elements found by .all

function checkIfTrue(css, expectedCount){
  var elements = element.all(by.css(css));

  // Count the number of elements found
  return elements.count().then(function(elementCount) {
    // Return false if there are not enough elements, causing browser.wait to continue looping
    return elementCount >= expectedCount;
  });
};

browser.driver.wait(checkIfTrue(".elm_class", 3), 10000);

// After waiting for the elements, perform additional checks
// I am not familiar with EC usage, so I cannot guarantee the functionality of this part of the code
var EC = protractor.ExpectedConditions;
expect(EC.presenceOf($$(".heading-description.uplevel").get(m1I))).toBe(true);

Protractor patiently anticipates the presence of several elements

Answer №1

Answer №2

Similar questions

Transform the date and time into a timestamp with milliseconds while adding one month

An automated feature that smoothly transitions a large image onto the screen

Implementing a function trigger on button click using jQuery

How to synchronize $scope variables between controllers in AngularJS

Can you provide tips on how to center the title on the page?

What is the method for selecting an li element within a ul list using Selenium in Python?

Guide on including the sequential images within the previous and next button of a carousel

Having difficulty retrieving the data from an excel spreadsheet

Is it possible to load asynchronous JS and then execute functions?

Using Google Apps Script to input data into the next available row

Harvesting Angular information using Selenium

Mapping a list with sections can easily be achieved by breaking down the elements

Literal Route Waypoints Guidance Service

The most effective way to ensure precise results is to implement explicit waits

Toggle the functionality of the login button in foundation

Extracting data from websites using Node.js

Avoid the occurrence of the parent's event on the child node

Implement an event listener on an element dynamically inserted into the DOM through an AJAX request

Monitor when a button in a grapesjs modal is clicked

Learn how to remove data from a React JS application without causing a page refresh by utilizing the useLoaderData() function in conjunction with React Router