Tips for utilizing a protractor ExpectedCondition by hand

Recently diving into Protractor, I'm aiming to set up an expect statement like so:

expect(elementIsVisible).toBe(true);

While exploring the EC (expected conditions) section in Protractor, specifically EC.visibilityOf, I find myself unsure about the return value of visibilityOf.

The documentation seems quite cryptic to me:

RETURNS
+-----------+-------------------------------------------------------------------------------------------+
|   Type    |                                        Description                                        |
+-----------+-------------------------------------------------------------------------------------------+
| !function | An expected condition that returns a promise representing whether the element is visible. |
+-----------+-------------------------------------------------------------------------------------------+

So what exactly does it return - a Promise or an expected condition?

Given that attempting to chain a .then results in a then is not a function error, indicating it might be returning an expected condition. But what does that mean?

In all the examples in Protractor's documentation, this return value is utilized with browser.wait functions.

However, my intention differs as I prefer having a straightforward true/false outcome in my expect statement.

Trying to gather further insights from Selenium's examples, I found that Protractor (a JavaScript implementation) redirects to Java documentation...

Answer №1

visibilityOf and other ExpectedConditions functions are return functions that provide a Promise<boolean>. These conditions act as predicates, meaning they return a promise resolved to a boolean value without any exceptions. To use this, you can do the following:

let shouldBeVisible = protractor.ExpectedConditions.visibilityOf
expect(
    shouldBeVisible($('div.button'))() // Note: () is used to manually call the function and get the boolean result
).toBeTruthy('Element div.button should be visible');

If you are using JasmineJS, you can utilize my library for asserting element visibility: https://github.com/Xotabu4/jasmine-protractor-matchers

This allows for checking element visibility along with automatic waiting for the element to become visible. Simply use:

expect($('div.button')).toAppear()

For more examples, refer to README.MD file.

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 method can I use in Javascript to extract the mealtype data from the Edamam nutritional API?

My goal is to extract the mealtype information from the API linked below. After reviewing the API, it seems that a POST request is required to retrieve mealType data. However, I am uncertain about the correct syntax for this request. For instance, if a u ...

Unable to access ng-model values within ng-repeat loop

I'm having trouble setting ng-model values within an ng-repeat statement. When I repeat this div with an array of JSON objects, I am able to print the 'ID' value of the object in any element. However, I can't use that as the ng-model v ...

Customize the color of the label and underline in a Reactjs material-ui TextField when the field input

https://i.stack.imgur.com/oJ2ah.png <TextField id="standard-full-width" label="Password" style={{ margin: 8 }} fullWidth margin="normal" placeholder="*******" /> Struggling to understand how to modify the color of the label ...

Exploring the Interplay of Classic ASP and AJAX Variables References

When the page loads, I check for an empty session variable. If it is empty, I trigger an AJAX function to include a hidden login form with ASP script that becomes visible through JavaScript. This part of the process works smoothly. Upon submitting the for ...

Press the second form submit button after the completion of another Observable

Below is the unique process we aim to accomplish using solely RXJS Observables: Press Login button (form with username & password). We bind Observable.fromEvent with our form. Upon submitting the form, call loginUser() to send an http request to serv ...

Delivering objects from controller in AngularJS

I'm currently working on a project where I need to retrieve objects from the controller. Here's a snippet of my code: score.component.js: angular.module('score').component('score',{ templateUrl : 'app/score/score.t ...

What is the best way to access the attribute of a Web Element within a list?

VIEW PHOTO I encountered an error while using the getAttribute() method which is showing a "can't resolve method" message. This method is usually used with WebElement objects, but for some reason it's not working in this case. Below is the code ...

Impossible to Interact with Element in Internet Explorer Using Robot Framework

I'm facing an issue in my test case with the following locator: Double Click Element //input[@value='user1'] This locator corresponds to the snippet below: <tr onselectstart="listview_onselectstart(this, event)" tabindex="1" class=" ...

Creating a scale effect similar to iCloud.com in Angular.JS: A step-by-step guide

Have you checked out the new icloud.com site? There's a cool effect on there that I want to try and recreate for a project I'm working on. When you go to and log in, you'll notice a loading gif followed by the calendar app scaling out to t ...

Implementing a sleek show/hide transition using slideToggle in jQuery

Trying to implement show/hide content with slideToggle and it's functioning, but the animation effect on the table is not smooth. Attempted two different codes, but none provided the desired animation effect: $('.more').slideToggle(' ...

Using Node.js to Insert Data into MySQL

I recently started experimenting with node.js and decided to use node-mysql for managing connections. Even though I am following the basic instructions from the github page, I am unable to establish a simple connection successfully. var mysql = require(& ...

Challenges when upgrading from Ext JS 3 to Ext JS 4

I am looking to upgrade my code from Ext JS 3 to Ext JS 4. I used the Ext.Updater class in Ext JS 3, but I cannot seem to locate a similar functionality in Ext JS 4. Can anyone provide assistance with this transition? ...

Utilizing JS setTimeout to iterate through AJAX requests in a loop, however the excessive frequency of setTimeout calls becomes an issue

I recently encountered an issue that was affecting my code functionality. After some investigation, I discovered that the function myEventMoveTrainManaul() was being called from multiple locations within the code, causing unexpected behavior. I want to exp ...

Vue Js: Creating an array of checkboxes

I have a collection of checkboxes sourced from the main system object where I store all system settings (referred to as getSystem{}). Within this form, I am retrieving information about a User, who possesses an array of roles []. How can I cross-reference ...

Attempting to rename the "like" button in Django Ajax, however encountering difficulties

My button is currently functioning, but it's embedded within a Django for loop. I want to move the JavaScript logic to a separate file, but before that, I need to rename it appropriately. Check out this excerpt from my code: {% for post in posts %} ...

Ways to verify if an item is enabled

To ensure a button in my angular application is enabled, I am using Protractor for testing. Here is the test script: it('submit should not be enabled',function() { var price = by.name('price'), oldCategory = by.name ...

Angularjs drop-down menu changes images with animation

<body ng-controller="myCtrl"> <input type="checkbox" ng-model="loaded"/> <select ng-model="list"> <option ng-repeat="option in data.availableOptions" value="{{option.name}}">{{option.id}}</option> </select> {{list}} &l ...

A guide to resizing images for uploading in Node.js using Jimp without the need for refreshing the page

My goal is to resize a file server-side using Jimp before uploading it to Cloudinary in a node.js environment. Here's the controller I'm using: exports.uploadImage = async (req, res) => { if (!req.files) { return res.status(400).json({ m ...

Utilize Selenium Webdriver in C# to interact with a jQuery dialog button through a click action

Currently utilizing the selenium web driver for internet explorer (IEDriverServer_x64_2.44.0) I'm attempting to click on a button within a jquery dialog using the following code: $("#dialog-text").html(dlg_message); $("#dialog-msg").dialog({ ...

Angular App Failing to Validate Session Cookie 'sessionId' in AuthGuard

Encountering a perplexing issue with my Angular application where the AuthGuard fails to recognize a session cookie named 'sessionId' correctly. I have successfully implemented user authentication, and the expected behavior is for users to be dir ...