Challenges with loading elements in Protractor

I'm feeling a bit confused about Protractor at the moment.

It seems like sometimes my elements load in time for the next action to happen, while other times they do not. I'm assuming this has something to do with its asynchronous nature.

For example, sometimes this code passes and sometimes it doesn't:

it('should create an audience using an existing audience and should be able to filter and search for that audience', function () {
        page.audienceTab.click();
        $('.panel-list .row .panel-list-header .btn').click();
        $('.panel-list div .btn').click();
        $('.edit-audience .row .col-md-3 accordion .panel-group .name-filter .panel-collapse .panel-body section input').sendKeys('test-audience');
        $('.expose-offset button').click();
        $('.col-xs-4 input').sendKeys('test-audience');
        expect($('.panel-list .panel h3').getText()).toEqual('test-audience');
    });

Is there any way to ensure that elements are loaded before the next action is triggered?

Answer №1

If you encounter an issue, consider explicitly resolving the click promise:

page.audienceTab.click().then(function () {
    $('.panel-list .row .panel-list-header .btn').click();
    $('.panel-list div .btn').click();
    $('.edit-audience .row .col-md-3 accordion .panel-group .name-filter .panel-collapse .panel-body section input').sendKeys('test-audience');
    $('.expose-offset button').click();
    $('.col-xs-4 input').sendKeys('test-audience');
    expect($('.panel-list .panel h3').getText()).toEqual('test-audience');
});

Alternatively, consider waiting for the presence of a specific element before initiating a click action:

var EC = protractor.ExpectedConditions,
    button = $('.panel-list .row .panel-list-header .btn');
browser.wait(EC.presenceOf(button), 5000);
button.click();
// continue with the test

Answer №2

One useful trick is to enclose the last expectation inside a .then() method. Here's an example:

$('.col-xs-4 input').sendKeys('test-audience').then(function() {
  expect($('.panel-list .panel h3').getText()).toEqual('test-audience');
});

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

Having trouble getting Vue to properly focus on an input field

I am attempting to use this.$refs.cInput.focus() (cInput being a ref) but it seems to not be functioning as expected. I expect that when I press the 'g' key, the input field should appear and the cursor should immediately focus on it, allowing me ...

How can I conceal the element that came before in JavaScript?

<div onclick="toggleContent(this)" class="iptv"><div class="triangle"></div><b>LUZ HD</b> - 98 channels (including 32 HD channels) <div class="iptv_price"><b><img src="img/rj45.png" class="icon_ofert ...

Is there a method to enclose a Grafana row with a border?

I recently created a Grafana dashboard using JavaScript and I realized that adding a border around each row would enhance readability. Here is how the current view looks like: https://i.stack.imgur.com/itKYR.png However, it can be difficult to differenti ...

Access a specific JSON value using AngularJS

When using AngularJS to read a specific JSON value, I encountered the following issue: $http({method: 'GET', url: urlVersion}). success(function(data, status, headers, config) { console.log("success data " + status); $scope.ext = data.ve ...

Creating JavaScript objects through function calls

let getBoxWidth = function() { this.width=2; }; alert(getBoxWidth.width); Hello there! Can you explain why the output is undefined in this scenario? ...

PHP implementation for a static header layout

I am interested in learning how to update content without refreshing the header. I have created a simple example below. Header.php <html> <head> </head> <body> <ul> <li><a href="index.php" ...

What sets declaring variables apart in Vue?

Can you clarify the distinctions among various methods of declaring variables? When should I employ each of these declaration methods? <script> const someVariable = 12345 export default { name: 'App', } </script> <script> e ...

Issue with mouse movement in Selenium and Protractor not functioning as expected

Greetings! I am currently facing an issue in my Angular application with Openlayers3 map integration. There is a layer representing a building on the map, and when I try to click on a building during testing, it should trigger a side panel displaying image ...

The "Read more" feature is not functional on mobile devices

I am encountering issues with my Wordpress blog on mobile screens. The "read more" button is not functioning, and the screen size does not fit properly on mobile devices. Visit abood250.com for more information. CSS Styling: /* =Global ----------------- ...

Deciding between Bull queue and Database Triggers

My current project requires creating records in the database for users on a recurring basis, such as every Monday weekly or biweekly. I have identified two potential solutions to achieve this goal. One option is to utilize Database Triggers to generate ...

Express receiving undefined data in Ajax POST request

I'm currently facing an issue with sending data to be parsed. The client-side script I have is as follows: function addURL(link) { console.log("Adding url..."); $.ajax({ type: "POST", url: location.protocol + "/ ...

What is causing the color to be replaced by the latest selection?

I'm having trouble drawing three lines with different colors. They all end up being the same color, which is the last color specified in my code snippet below: function initObject() { var lineLength = 10; geometry = new THREE.Geometry ...

The submission of the form is prevented upon updating the inner HTML

I am in the process of creating a website that will incorporate search, add, update, and delete functionalities all on a single webpage without any modals. The main focus of this webpage is facility maintenance. Adding facilities works smoothly; however, i ...

Cover the entire screen with numerous DIV elements

Situation: I am currently tackling a web design project that involves filling the entire screen with 60px x 60px DIVs. These DIVs act as tiles on a virtual wall, each changing color randomly when hovered over. Issue: The challenge arises when the monitor ...

Utilizing Angular JS and Web.API to create an Innovative File Management System

Within my setup, I have two projects. The first is a WebAPI project where I handle classes: FileClass for managing files, DirectoryClass for managing directories, and ClassContext that holds lists of both files and directories. In the HomeController, I&apo ...

Showing nested JSON data in ng-repeat

Currently, I'm struggling to understand how to access nested JSON and show it on a page using Angular. For instance, consider the JSON structure below where I want to display connectivity products under portfolio using ng-repeat... { "addons": [ ...

Creating a div that functions as a scrollbar controller

I am in search of a unique way to customize the scrolling functionality on my application, resembling more of a navbar that scrolls. However, I have not been able to find any existing plugins that meet my specific requirements. My inquiry includes: Whic ...

Struggling to send the correct cookies to the API server using Next.js

I have set up an API express server on api.mydomain.com and a Next.js website on mydomain.com. My Next.js application uses getServerSideProps to request data from the API for displaying on the page. However, I am facing an issue where I can set cookies for ...

Show items in the sequence of clicking

Is there a way to display elements in the order they're clicked, rather than their order in the HTML using jQuery? For example: CSS code: .sq{ display:none; } HTML Code: <a href="#" id="1">A</a> <a href="#" id="2">B</a> ...

Storing row details in Vue.js based on selected options from a dropdown menu

Displayed below is my code that generates a dynamic table. I am looking to save specific rows based on the selection made from a dropdown menu and then clicking on an update button. <b-field> <b-select name="contacted" id="" ...