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

AngularJS: displaying or concealing elements while updating the user interface

As I work on troubleshooting a problem with my angular app, I am facing an issue where the UI does not update smoothly. The $http.get method is used to initialize the model and it takes a few seconds to fetch data from the server. To provide a seamless use ...

angularjs

Utilizing ngRepeat to build intricate rows within a table

I have a unique collection that appears as follows: { "10": {}, "12": { "20": { "value": 1, "id": 1, }, "100": { "value": 12, "id": 1, } }, "14": { "10 ...

javascriptangularjs

Exploring a Discord.js collection: tips for accessing and manipulating objects within an array in the collection

I have a discord.js Collection that contains information about dispatcher and queue objects. Here is the structure: Collection(1) [Map] { '403547647215927306' => { dispatcher: StreamDispatcher { _writableState: [WritableState], ...

javascriptarraysnode.jsdiscord.js

Tips for Modifying the currentUrl identifier in Angular 2

I am trying to change the ID property of my currentUrl object within my component. My goal is for the ID to update and then fetch the corresponding data based on that ID. However, I keep encountering this error message: "Cannot assign to read only propert ...

javascriptangulartypescript

Error: req.body or req.params.id is not defined in the current context (PUT and PATCH requests)

I'm experiencing an issue where both req.body and req.params.id are returning undefined even though I am using express.json() before the app.patch. I have tried changing the route to /:id, but that did not resolve the problem. Interestingly, it works ...

javascriptnode.jsexpress

Issue with event delegation when using if-else conditions is not being resolved

I have set up an event listener on an HTML container, and when the user clicks on the play again button, the code inside the 'if' statement should be executed. However, nothing happens when clicking on the play again button and no logs are output ...

javascript

Enzyme fails to locate text within a div even though it is present

In my current test scenario, I have a set of data displayed in Material-UI Cards. The data is provided through a JSON array consisting of objects with fields like projectName, crc, dateCreated, createdBy, and lastModified. { projectName: 'P ...

javascriptreactjsjestjsmaterial-uienzyme

What is the process for integrating a third-party JavaScript Node.js library into a Cordova plugin?

I'm in the process of creating a Cordova plugin for an internal project and I am considering integrating a third-party open source Javascript library called bluebird promise. My initial thought was to simply copy and paste the bluebird JS files into m ...

javascriptnode.jscordovabluebird

Problem with Jquery Ajax, failing to recognize option values

Hello everyone, please review the code snippet below... $.fn.myajax = function (options) { var defaults = { my_event: "", my_url: "", my_data: "", } var o = {}; var mydata = options.my_data; $.extend(o, default ...

javascriptphpjqueryhtmlajax

Implementing Google Calendar access token in JavaScript: A practical guide

I have a question about Google Calendar and I'm hoping you can assist me. I currently have an access_token from Google Calendar that has been stored in the localStorage. const googleAccessToken = e.vc.access_token; localStorage.s ...

javascriptgoogle-calendar-api

NPM: There are no valid TypeScript file rules specified

Currently working on a small project using React.JS. Whenever I execute : npm run start, the following message gets logged: Starting type checking and linting service... Using 1 worker with 2048MB memory limit Watching: /Users/John/Projects/myProject/src ...

javascriptjsonreactjstypescriptnpm

The code is slicing data, but the changes are not reflecting in the user interface

Initially, there are three drop down menus displayed. Upon selecting an option from the first drop down menu, the values in the second drop down menu load. After selecting an option from the second drop down menu, a new set of drop downs appears. However, ...

javascripthtmlreactjsreduxmaterial-ui

Enhance the aesthetic appeal of the imported React component with added style

I need assistance with applying different styles to an imported 'notification' component within my header component. The notification component has its own CSS style, but I want to display it in the header component with unique styling. How can I ...

javascriptreactjstypescriptreact-nativereact-component

featherlight.js - Execute code when modal is triggered

Situation with HTML <div id="form-lightbox"> <div class="form"> <div id="ajaxreplace"> <script type="text/javascript"> jQuery(function() { jQuery.ajaxReplace({ //parame ...

javascriptajaxfeatherlight.js

Capture input before onChange and ideally only accept numerical values

Preparing for inexperienced users, I have a table of input fields. My goal is to enhance user experience and make the form as user-friendly as possible. I have developed code that highlights the table row immediately after an input field has changed. Howe ...

javascriptjqueryhtmlforms

Is there a way to achieve a XNOR-like response with necessary input?

I'm currently working with a form that looks like this: <form> <input type="text" name="input1"> <input type="text" name="input2"> <button type="submit"> ...

javascripthtmlformsbootstrap-5

How to use plain JavaScript to extract the value from a textarea in GWT

Situation: I am currently developing a tampermonkey script to enhance certain GWT pages within a third-party application. Unfortunately, I do not have access to the source code or servers. Challenge: My task is to retrieve the value of a textarea element ...

javascripthtmlgwttampermonkey

Animate an svg icon to follow a designated path as the user scrolls

I am currently working on a project that involves animating a bee svg icon as the user scrolls through the website. The bee starts at the top and fills in a grey color line with pink as the user moves forward, and moves backward as the user scrolls back. Y ...

javascripthtmljquerycss

Unable to add ngRoute dependency in Angular

I'm facing an issue while trying to set up a basic Angular route in my current project, encountering the error: Uncaught Error: [$injector:modulerr] I have ensured that I have injected ngRoute as a dependency in my module and included the angular-rou ...

javascriptangularjsangular-routing

Tips for implementing a tile vendor in AngularJs Leaflet?

I'm looking to remove the roads from an OSM map displayed using Leaflet in my AngularJs application. A recent forum post mentions that removing roads directly isn't feasible, but suggests using a layer provider with background images devoid of r ...

angularjsleaflet