Tips for organizing Protractor promises

I am currently experimenting with determining if an element is positioned at the bottom of a page in Protractor/Webdriver using promises. However, I feel like my current approach is quite messy and there must be a cleaner way to achieve this.

describe('Element', function(){
    it('should be located at the bottom', function(){
        element(by.id('page').getSize().then(function(dimP){
            element(by.id('element').getLocation().then(function(locE){
                element(by.id('element').getSize().then(function(dimE){
                    expect(locE.y + dimE.height).toEqual(dimP.height);
                })
            });
        });
    })
});

Is there a more efficient way to accomplish this task? My Protractor version is 2.1.0.

I did attempt a different approach:

expect(element(by.id('page').getSize().height).toEqual(1000);

However, I received an error "Expected undefined to equal 1000." It seems like I cannot directly use return values as outlined here: https://github.com/angular/protractor/blob/master/docs/control-flow.md

(Please note that in my actual test, I utilize a page object which results in cleaner code compared to this example.)

Answer №1

When dealing with promises returned by functions like getSize() and getLocation(), it's important to resolve these promises to get the actual values you need. This can be done explicitly using then(), or implicitly through expect().

If you're wondering how to simplify a promise chain in Protractor, consider using promise.all() to handle multiple promises concurrently without nested callbacks:

var elm = element(by.id('element')),
    page = element(by.id('page'));

var promises = [elm.getSize(), elm.getLocation(), page.getSize()];

protractor.promise.all(promises).then(function (values) {
    expect(values[0].height + values[1].y).toEqual(values[2].height);
});

For further reading, check out:

  • Flattening Promise Chains
  • How do I reference a promise returned from a chained function?
  • How do I access previous promise results in a .then() chain?

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

What is the best way to link CSS files from libraries that are downloaded using npm?

For instance, let's say I installed a package: npm install --save package and it gets saved in ./node_modules/package/ Inside that folder, there might be a directory named styles and within that directory, you could find style.css. How can I link ...

Having difficulty selecting an element with Selenium in Java

I am encountering difficulties with retrieving and utilizing a Select element using @FindBy. Here is the markup: <td> <felt [control]="kontactTypeFC" [classes]="'hb-distNone'"> <label for="contactTypes" class="hb-label"& ...

constructing a nested container using XMLHttpRequest

I am working on creating a nested div-container structure using AJAX and adding the text "Hello World" to the inner container. The outer container serves as a holder for the inner container in this case. Below is the code I have written: index.html: ...

Using references to pass variables in TypeScript [Angular 8]

I have several variables within the html of this component that are assigned their values by the typescript file. The declaration in the html is as follows: <h1>{{myproperty1}}<\h1> <h1>{{myproperty2}}<\h1> <h1>{{myp ...

The method of implementing an index signature within TypeScript

I'm currently tackling the challenge of using reduce in Typescript to calculate the total count of incoming messages. My struggle lies in understanding how to incorporate an index signature into my code. The error message that keeps popping up states: ...

Having trouble getting the convert-multiple-files npm package to function properly on an Elastic Beanstalk environment running Amazon Linux

Following a successful deployment, I encountered an issue with my file conversion script when attempting to convert files as outlined in the documentation. The script works flawlessly on both a local Windows 10 machine and Ubuntu 20.04 LTS. const { conv ...

Creating a line graph using chart.js and JSON dataset

I'm working on plotting a line graph using a JSON response from my MongoDB, but I keep encountering an error that indicates something might be wrong with my code structure. Here's what I have attempted: myurl = "/api/humidity" $(function() { ...

Is it possible to modify only the text following the bold HTML tag?

Having trouble replacing both occurrences of "a Runner" with "a Team Captain" <form id="thisForm"> <table> <tr bgcolor="#eeeeee"> <td valign="top" colspan="4" style="vertical-align: top;"> &l ...

How to delete a specific element from the DOM using its ID in JavaScript

I am facing a challenge in removing an element from the page dynamically without refreshing using JavaScript. The script I have written successfully deletes the record from the database, but I need assistance in removing the container element based on it ...

JavaScript: Converting an Array to a String

Having trouble making the string method work with an array - it keeps showing up as empty. let url = "https://api.myjson.com/bins/be7fc" let data =[]; fetch(url) .then(response => response.json()) .then(result => data.push(r ...

Unable to retrieve innerHTML from a jQuery element

My current task involves implementing the Google Maps API. The code snippet below is what I have written so far: <div id="map"></div> To inspect the content of $("div#map"), I am utilizing the Google Chrome console. console.log($("div#map")) ...

Obtaining user roles from server without using JWT tokens

My main objective is to provide user roles from the backend. For instance, if a user wishes to access resources in my backend, they can log in using Google credentials. The Angular app retrieves the access token from the Google authorization server and s ...

Tips for preserving input field data in an AngularJS scope variable

I am having trouble storing textbox values in my 'Values' variable. When I enter values in the textboxes, it seems to be getting the hard-coded values instead. Can someone please help me with this AngularJS issue as I am new to it? Here is the co ...

How can I improve my skills in creating efficient Angular routers?

In my Ionic project, I am dealing with an AngularJS routes file that contains a large number of routes, approximately a hundred. The structure is similar to the one provided below. (function() { 'use strict'; angular.module('applicatio ...

The behavior of filling text boxes with Robot-Selenium in an AngularJs application is not meeting expectations

Does anybody have any advice on writing a robot-selenium test for an angularJs-based app? I seem to be facing some challenges with it: Open Browser To Login Page Open Browser ${login} ${browser} Maximize Browser Window Set Selenium Speed ${ ...

How to customize TextField error color in Material-UI using conditional logic in React

Currently, I am incorporating the React Material-UI library into my project and faced with a challenge of conditionally changing the error color of a TextField. My goal is to alter the color of the helper text, border, text, and required marker to yellow ...

Utilize a Google Chrome extension to interact with the DOM of the active tab

Alright, so I've got a good grasp on JavaScript/jQuery and can use them for various tasks. However, my current challenge involves manipulating the DOM of the open tab. I'm curious to know if it's feasible or if all the actions performed by a ...

Issue with Refreshing Header Row Filter Control in Bootstrap Table

Currently in the process of developing an application that utilizes Bootstrap Table and its extension, Filter Control. One feature I've incorporated is individual search fields for each column to enhance user experience. The challenge I'm facing ...

Conducting parallel TestNG selenium tests with dataprovider to analyze driver behavior in action

I am looking to run Selenium tests in TestNG in parallel using the @dataprovider feature. My goal is to have tests running in parallel by method (one test = one method) instead of simple suite parallelism by browser. I have come across information stating ...

Typescript loading icon directive

Seeking to create an AngularJS directive in TypeScript that wraps each $http get request with a boolean parameter "isShow" to monitor the request status and dynamically show/hide the HTML element depending on it (without utilizing $scope or $watch). Any ...