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

Is Fetch executed before or after setState is executed?

I've encountered an issue while trying to send data from the frontend (using React) to the backend (Express) via an HTML form, and subsequently clearing the fields after submission. The code snippet below illustrates what I'm facing. In this scen ...

Unable to retrieve push token for the device. Please verify the validity of your FCM configuration

Looking for a solution to the issue of obtaining a push token Error: Unable to retrieve push token for device. Ensure that your FCM configuration is correct I have integrated Expo permissions and notifications in my React Native app, but nothing seems to ...

Struggled to Find a Solution for Code Alignment

Is there a tool or software that can align different types of codes with just one click? I've tried using the Code alignment plugin in Notepad++, but it hasn't been effective. For example, when aligning HTML code using tags, I couldn't find ...

The JQuery datepicker fails to provide the date in the format mm/dd/yy

Recently, I attempted to transform a date into the dd/mm/yy format using JQuery datepicker. Unfortunately, my results displayed in the dd/mm/yyyy format instead. Here is the code snippet that I utilized: chkIn = $.datepicker.formatDate("dd/mm/yy", cinDate ...

HTML5 Drag and Drop: How to Stop Drag and Drop Actions from Occurring Between a Browser and Browser Windows

Is it possible to restrict HTML5 Drag & Drop functionality between different browsers or windows? I am currently working on an Angular2 app that utilizes native HTML5 Drag and Drop feature. Is there a way to prevent users from dragging items out of th ...

The process for changing the textContent to X when an image is clicked

How can I create a function that changes the text content to 'X' when an image is clicked? I already have a function that updates the title based on the image dataset, but combining the two functions has been unsuccessful. Can someone help me con ...

How can you automatically show the current time upon entering a page using React Native?

Is there a way to automatically display the current time when a user enters the page? I currently have code that only shows the current time when the TouchableOpacity is pressed, but I want it to update automatically as soon as the user arrives on the Ne ...

Is there a way to fetch and display property changes in Vue Material's md-dialog?

In the component hierarchy, there is a parent component containing a child, which further contains an md-dialog component. The dialog is opened from the parent component using the following code: ParentComponent.vue <template> <div> < ...

Starting a line series from the beginning of the y-axis on a bar chart using chart.js

We have a new request from the business regarding the implementation of chart.js. Take a look at the image below, which shows a combination of bar and line charts. The line chart contains only a few data points. Within the application, users can choose a ...

Exploring the functionality of CodePen's code editor in relation to developing a 2D shooting game

Recently, I created a straightforward 2D shooter game with all the code neatly organized in a single HTML file: (file_gist). When I tested the game in my chrome browser, everything worked flawlessly according to my intentions. However, upon transferring th ...

React powered interactive tables

I am in the process of creating a dynamic table using React, and here is the data structure I am working with: { numRows: 2, numCols: 3, cells: [ { id: 1, pos: { row: 1, col: 1 }, content: 'This is th ...

Unable to modify the properties of a stateless child component

I'm completely new to React and I decided to create a basic comments application. My main objective was to let users change their display pictures by clicking the 'Change Avatar' button. However, I encountered an issue where the 'Chang ...

Arrange my Firebase Angular users based on a specific value, encountering an error stating "sort is not a function

I'm working on an application using Firebase and Angular, and I have a database containing information about my users: My goal is to sort the users based on their "ptsTotal". In my users.service file, I have a function called getUsersByPoints. Howev ...

Out of Sync Promise Chain

I recently encountered an issue with promise chaining in JavaScript, specifically while working with Vue.js. Here is my code: I have an addItem function that inserts an item into the database. My goal is for this function to first insert the data into the ...

Reactjs, encountering a hitch in utilizing material UI: Incompatible hook call detected

As a newcomer to React, I decided to incorporate Material UI components into my project. After installing the components locally using npm install and importing them into my project, I encountered an error when trying to run start: Error: Invalid hook call ...

Transforming HTML with JavaScript

I am facing a challenge in my JavaScript application where I receive HTML code from an endpoint that contains radio buttons. Unfortunately, I cannot modify the HTML content coming from this endpoint. My goal is to convert these radio buttons into regular b ...

Strangely unusual issues with text input boxes

So I've set up two textareas with the intention of having whatever is typed in one appear simultaneously in the other. But despite my best efforts, it's not working as expected. Here's the code snippet: <script> function copyText () { ...

When using Selenium ChromeDriver, the explicit wait for the visibility of an element located may throw a TimeOut exception if the presence of the element located does not occur, especially when working

I'm struggling to understand why I keep encountering TimeOut exceptions with visibility_of_element_located, particularly when dealing with dropdown elements. Other types of elements and presence_of_element_located calls work fine. I even tried scrolli ...

How do I retype an interface from a dependency?

It's difficult to put into words, so I have created a repository for reference: https://github.com/galenyuan/how-to-retyping My goal is to achieve the following: import Vue from 'vue' declare module 'vuex/types/vue' { interfac ...

The maxBodySize feature is ineffective in restify

I am currently running a node app on version v0.10.33 with the Restify module ^2.8.3 installed. var app = restify.createServer(); app.use(restify.queryParser()); app.use(restify.bodyParser({ maxBodySize: 1, //Issue: The limit is not being enforced at th ...