Tips on waiting for an event to be processed during a Protractor end-to-end test

I have a straightforward AngularJs 1.4.8 Front-End:

https://i.stack.imgur.com/2H3In.png

After filling out the form and clicking the OK button, a new person is added to the table.

The form resides in the addingPersonController, while the table is controlled by the allPersonsController; both are children of the main masterController.

Once a user is added (after clicking OK), the following sequence occurs:

  1. A POST request is sent to the server to add the new person.
  2. A personAddedEvent is emitted from the addingPersonController to the masterController using $emit.
  3. The masterController then broadcasts an updatePersonsEvent to the allPersonsController.
  4. Subsequently, the allPersonsController sends a GET request to the server to fetch all persons and update the table accordingly.

In order to test this scenario, I have created a protractor end-to-end test. However, I am encountering difficulty as the test fails before the process completes.

Despite successful manual tests of the UI, my attempts to wait for the process to finish in the protractor test using methods like:

  • browser.wait(function(){}, timeout);
  • browser.sleep(ms);
  • .click().then();

have not been fruitful.
Is there a way to ensure completion of the process before running assertions in the test?

javascriptangularjsprotractore2e-testing

Answer №1

Experiencing similar challenges with my end-to-end tests as well. There are several workarounds that can be implemented, depending on the specific situations, often caused by non-response timeouts (loss of synchronization between protractor/selenium and the browser). It's akin to a computer freezing due to insufficient resources (such as GPU/VRAM, RAM, or CPU), leading to the built-in "wait for Angular works to be done" functionality of protractor losing track and running the test prematurely.

Here are some suggestions I would recommend trying:

  1. Utilize the built-in wait for Angular: This is a quick solution that resolves the issue most of the time, although it does not address the lost synchronization between protractor/selenium and the browser.

browser.waitForAngular();

  1. Use ExpectedConditions with browser.wait(): This option is always the best as it guarantees effectiveness in all scenarios, even outside an angular environment. The downside is that it requires more typing.

browser.wait( ExpectedConditions.textToBePresentInElement( $('#someId'), "Person's Name"), 10000);

EDIT: Corrected typos and improved answer clarity.

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

Playing with Data in AG-Grid using Javascript

I am working on implementing data display using AG Grid with an AJAX call, but I am facing an issue where no data is being shown in the grid. Even though my AJAX call seems to be functioning correctly and returning the desired object List, the grid itsel ...

javascriptag-grid

Can JSON be used to perform mathematical operations and calculations?

Utilizing the amazing json-server as my application's backend has been incredibly beneficial for custom data retrieval. However, it would be even more valuable if it supported calculations and expressions to mimic backend behavior. Consider this data ...

javascriptjsonreactjsjson-server

Reviving jQuery Smooth Zoom Pan viewer following container resize

I am in the process of developing a responsive image viewer and have decided to incorporate the Smooth Zoom Pan plugin for enhanced pan/zoom functionality. Within my layout, I have two primary panels: the viewer container and a controls container that are ...

javascriptjqueryresponsive

Initializing ng-app with a specific name will prevent the initialization of variables

Here is the code snippet I am working with: <div ng-app="" ng-init="show_login=false;count=0"> <button> ng-click="show_login=!show_login;count=count+1">INSPIRE</button> <form ng-show="show_login"> Username <input type="t ...

javascriptangularjsangularjs-directiveangularjs-controller

A comprehensive guide on retrieving data from API across several pages

Struggling with pulling data from an API using React and facing the challenge of retrieving more than one page of data. "info": { "count": 493, "pages": 25, "next": "https://rickandmortyapi.com/api/character/?pa ...

javascriptreactjsjsonfetch-api

showcase every value upon submission in the form with options to edit and delete

Is it possible to display all values submitted in a form with edit and delete buttons? Currently, only one value is being displayed at a time. Whenever a new value is displayed, it replaces the old one. How can this be fixed? You can fin ...

javascriptjquerycsshtml

Is there a way to iterate through indexed variables in javascript?

After receiving an array of data from a JQuery .ajax function, I noticed that the fields in the array are named and numbered like part1, part2, part3, etc. I attempted to loop through this data using the code below, but unfortunately, it resulted in NaN: ...

javascriptjqueryhtmlajax

Is it possible to include a base url for imports in React JS?

Conventional method for adding imports: import Sample from ‘../../../components/signup’ I want to simplify imports by removing the front dots and slashes: import Component from ‘components/signup’ Is there a way to set a base URL for imports to ...

javascriptreactjsangularjsvue.js

Get detailed coverage reports using Istanbul JS, Vue JS, Vue CLI, Cypress end-to-end tests, and Typescript, focusing on specific files for analysis

I have a VueJS app written in Typescript that I am testing with Cypress e2e tests. I wanted to set up coverage reports using Istanbul JS to track how much of my code is covered by the tests. The integration process seemed straightforward based on the docum ...

javascripttypescriptvue.jscypressistanbul

Retrieving HTML file from server directory within extjs HTML editor

Can anyone help me figure out how to successfully load an HTML file into the code editor? I have attempted using the code below, but it doesn't seem to be working: loader : {url : 'uploads/temp.html', autoload : true} ...

javascriptextjs

Strategies for Dealing with 'No Search Results' in Your Search Functionality

I am currently facing an issue with displaying "No Results Found" when a user utilizes my search feature. The current problem is that "No Results Found" appears immediately on the screen and then disappears while a search query is being processed, only to ...

javascriptangulartypescript

What is the best way to target the nth-child() of a slotted element within a web component that utilizes multiple uniquely named slots?

I am struggling to select the second slotted item in a specific slot using slot[name=foo]::slotted(:nth-child(2)){, but it's not behaving as I anticipated. Even though the first foo slot is styled with green, the second one doesn't follow suit. ...

javascriptcssweb-component

Utilizing Next.js with formidable for efficient parsing of multipart/form-data

I've been working on developing a next.js application that is supposed to handle multipart/form-data and then process it to extract the name, address, and file data from an endpoint. Although I attempted to use Formidable library for parsing the form ...

javascriptnext.jsmultipartform-data

Customizing Axios actions in Vue JS using a variable

I have a form in my Vue component that sends a reservation object to my API for storage. I am exploring the possibility of setting the axios action dynamically based on a variable's value, without duplicating the entire axios function (as both the pos ...

javascriptvue.jsmethodsaxios

Node.js application with decoupled Redis client

In my node.js app, I am utilizing Redis for user caching. Once a user logs in, their information is cached and accessed on subsequent requests to determine their access level. This allows the client to receive personalized information and views based on th ...

javascriptnode.jsexpressredis

Tips for formatting angular text sections

Within the scope of a controller, I have a status variable. After a successful rest PUT request, I add a message to this JavaScript variable. This message is displayed in my template using the {{status}} Is there a way to customize the styling of this mes ...

javascripthtmlcssangularjs

How to break down JSON into individual elements using JavaScript

{ "name": "Sophia", "age": "Unknown", "heroes": ["Batman", "Superman", "Wonder Woman"], "sidekicks": [ { "name": "Robin" }, { "name": "Flash Gordon" }, { "name": "Bucky Barnes" } ...

javascriptjson

What is the best approach in VueJS to implement a skeleton loader and an empty page condition for my orders page simultaneously?

I have implemented a skeleton loader to display while the data is loading. However, I want to also show an empty order page if there is no data or orders coming in. I am trying to figure out the conditions for both scenarios - displaying the loader and t ...

javascriptvue.jswebvuejs2

"Enhance your Vue 3 experience with a stylish Instagram Feed featuring

Struggling to retrieve the most recent Instagram posts from a feed using Vue 3 and Axios due to Instagram's strict-origin-when-cross-origin policy causing constant blocks. All access tokens are properly configured. The Instagram Basic Display API gui ...

javascriptvue.jsaxioscors

There seems to be an issue with the Google reCAPTCHA login, as it is displaying an error with the code 'invalid-input-secret'

Customer Interface: grecaptcha.ready(function() { grecaptcha.execute('6Le4oroZABBXXIQCQkAYCXYSekNQnWExTeNUBZ-B', {action: 'submit'}).then(function(token) { $scope.userData['repatcha_token'] = token $ht ...

javascriptnode.jsrecaptcha