Retrieve an array containing various values of a single element with the help of Protractor

Question

Retrieve an array containing various values of a single element with the help of Protractor

Currently, I am in the process of testing an application that showcases graphs using rickshaw and d3. The tests are being run with protractor and jasmine. It's worth noting that this question is not specific to this particular scenario but rather more general in nature.

The test involves hovering the mouse over a graph and capturing the text displayed for each point (example here). This text array is then compared against a predefined array.

This pseudo code snippet should help illustrate the issue:

var graph = ... //
var promises = [];
var promise = graphElement.getSize().then(function(size){
    _.times(size, function(i) {
        moveMouse(i, 0); 
        promises.push(graph.element(by.css('.hover-text')).getText());
    });
    return promises;
});

promise.magicallyWaitForAllOfThem();

_.each(promises, function(textPromise){
    expect(textPromise).toBe('something');
});

The problem arises because I need the size to be resolved first, leaving me without a method to wait for all promises to resolve and return an array of text promises that can later be used with expect().

EDIT: I have explicitly mentioned protractor/jasmine.

javascript selenium-webdriver jasmine promise protractor

Answer 1

Answer №1

Is it possible to simplify this process by utilizing Selenium WebDriver's promise.all method?

var graph = ... //
var webdriver = require("selenium-webdriver");

graphElement.getSize().then(function(size){
    var promises = [];
    _.times(size, function(i) {
        moveMouse(i, 0); // move mouse to i-th pixel
        promises.push(graph.element(by.css('.hover-text')).getText());
    });
    return webdriver.promise.all(promises);
}).then(function(promiseResultArray){
    _.each(promiseResultArray, function(textPromise){
        expect(textPromise).toBe('something');
    });
});

A cleaner approach:

Firstly, declare the function:

collectHoverText: function(elem) {
  var strings = [];
  var promises = [];

  return elem.getSize().then(function(size) {
    _.times(0/*logic for number of steps*/, function(i) {
      var x = 0; // logic for step
      browser.actions().mouseMove(elem, {x: x, y: 0}).perform();
      promises.push(elem.element(by.css('.hover-text')).getText().then(function(text) {
        strings.push(text);
      }));
    });

    return protractor.promise.all(promises).then(function() {
      return _.uniq(strings);
    });
  });

Then, utilize the function like so:

var hoverTextPromise = collectHoverText(graph);
expect(hoverTextPromise).toContain('value'); // resolved array here

Answer 2

Is it possible to simplify this process by utilizing Selenium WebDriver's promise.all method?

var graph = ... //
var webdriver = require("selenium-webdriver");

graphElement.getSize().then(function(size){
    var promises = [];
    _.times(size, function(i) {
        moveMouse(i, 0); // move mouse to i-th pixel
        promises.push(graph.element(by.css('.hover-text')).getText());
    });
    return webdriver.promise.all(promises);
}).then(function(promiseResultArray){
    _.each(promiseResultArray, function(textPromise){
        expect(textPromise).toBe('something');
    });
});

A cleaner approach:

Firstly, declare the function:

collectHoverText: function(elem) {
  var strings = [];
  var promises = [];

  return elem.getSize().then(function(size) {
    _.times(0/*logic for number of steps*/, function(i) {
      var x = 0; // logic for step
      browser.actions().mouseMove(elem, {x: x, y: 0}).perform();
      promises.push(elem.element(by.css('.hover-text')).getText().then(function(text) {
        strings.push(text);
      }));
    });

    return protractor.promise.all(promises).then(function() {
      return _.uniq(strings);
    });
  });

Then, utilize the function like so:

var hoverTextPromise = collectHoverText(graph);
expect(hoverTextPromise).toContain('value'); // resolved array here

Retrieve an array containing various values of a single element with the help of Protractor

Answer №1

Similar questions

Tips for enabling the OnLoad Event for a React Widget

gathering information from a group of items and organizing them into a fresh set of items

Is there a way I can replicate this expandable div?

Strategies for avoiding unused style tags in React components

Set a unique class for several elements depending on a given condition

Error message "Unable to access property 'rotation' of an object that does not exist - Three.js"

Avoid triggering jQuery "change" event manually in order to prevent unintentional execution when done programm

Tips for triggering onclick before changing to a new page?

Guide to adding customized CSS and JavaScript to a specific CMS page on Magento

Bootstrap Table encountering issues when displaying JSON data from Ajax response

Hidden text within a webpage that remains concealed until a specific link is activated

Is it possible for me to test events in protractorjs/cucumberjs?

Uncertainty about the integration of a JavaScript file into a PHP file

Is there a way to automatically redirect the server URL when a file is modified?

I'm having trouble resolving Selenium setup problems. There seems to be an exception occurring in the main thread, saying "Failed to connect to localhost

Why is it that this specific ASP.NET + jQuery + JavaScript custom MVC setup isn't displaying any content?

Update the HTML page when switching between tabs

Optimal approach to displaying views with Express.js and EJS

List component in Angular not refreshing after sorting the array in the service

disableDefault not functioning properly post-fadeout, subsequent loading, and fade-in of new content with a different URL into