When should I schedule the execution of the .spec and .po.ts files in Protractor?

Curious about TypeScript and Protractor:

I have a couple of basic helper functions stored in a shared.po.ts file within my Protractor suite. These functions are triggered by the third it() in my .spec file - meaning they are not immediately called upon running Protractor tests:

formattedDate(){
  var MyDate = new Date();
  var mth = ('0' + (MyDate.getMonth()+1));
  var day = ('0' + MyDate.getDate());
  var yr = MyDate.getFullYear();   
  return mth.slice(-2) +'/' + day.slice(-2) +'/' + yr;}

formattedDateTime(){
  var MyDate = new Date();      
  var hrs = ('0' + MyDate.getHours()).slice(-2); 
  var mins =('0' + MyDate.getMinutes()).slice(-2); 
  var time = hrs +':'+mins;
  return this.formattedDate() + ' ' +  time;}

In my .spec file, I invoke the formattedDateTime() function like this:

  let formattedDateTime = shared.formattedDate();     
  console.log(formattedDateTime);

What's puzzling is that when I run my test scripts, I instantly see "03/15/2019 10:15" displayed in the console. Unlike headless tests, I can clearly observe a browser window executing my scripts, and it's evident that the part of the .spec file containing the call to formattedDateTime() hasn't been executed yet.

Is there an explanation for this unexpected behavior? Appreciate any insights! Thank you!

Answer №1

Protractor is specifically designed to handle asynchronous calls that return promises. These calls are added to an internal queue and executed as if they were synchronous. However, due to the nature of console.log, which is a synchronous call, it may appear to execute out of order in comparison. To ensure proper execution order, consider using the following method:

browser.call(() => { console.log(formattedDateTime); });

Understanding this concept is crucial when writing Protractor tests. I recommend delving into control flow in Protractor for more insight. Additionally, you may find useful information on a related SO question available here.

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

Delete the padding of a component with the power of angular

I'm looking to eliminate the margin applied to a particular element that is being created by Ionic. The specific element in question is located within the page-table-view, which is a subpage of page-board. https://i.stack.imgur.com/KPLDQ.png This is ...

Exploring the usage of array map parameters in rxjs 6 when combined with withLatestFrom

Prior to Rxjs 6, we were able to achieve the following: interface TypeA { payload: any; } source$.pipe( withLatestFrom(source2$, (source1: TypeA, source2: TypeB) => ({ payload: source1.payload, source2 }) ), ) In the resultSelector method ...

The Modal feature on cards consistently displays the initial object every time

When applying Bootstrap Modal to a list (Card-Columns) of Cards, the popup always loads the content of the 1st Card. Here is how my List Component looks like: <div class="card-columns" infiniteScroll [infiniteScrollDistance]="0.3" [in ...

Exploring Immediately Invoked Function Expressions in TypeScript

I came across an interesting article on self-invoking functions in JavaScript by Minko Gechev. This article teaches us how to create a JavaScript function that calls itself immediately after being initialized. I am curious about how we can achieve this in ...

A guide on managing Ngb Bootstrap carousel slide with a button in Angular

I encountered a situation like this: I need to implement a Ngb Bootstrap carousel with buttons for Previous and Next to control the slide images. Clicking on the Previous button should display the previous slide image, and clicking on the Next button shou ...

"Experience the power of angular-cesium by simultaneously opening four maps at once

Our current project is developed in Angular 7 with Angular Cesium serving as the map infrastructure. The application is currently operational on local PCs. A new requirement has come up which entails opening four different maps, each loaded with numerous ...

Troubles with Angular 2 directive interactions: input vs. output discrepancies

I'm having trouble binding variables for inputs and outputs. I'm not sure what I'm doing incorrectly. HTML <p [timeDelta]="'2016-09-20 00:00:00'">{{delta}}</p> Below is the code for my directive: import { Directive, ...

Incorrect Date Range Picker Alignment

I am having trouble with the positioning of a mat date-range-picker calendar inside a component. I have a menu component that calls another component called leave, which contains the mat date range picker calendar. The problem is that when I call the leav ...

Initial attempt with Angular2 router.navigate() fails to function properly

I have set up the routes as follows: export const routes: Routes = [ { path: '', component: HomeComponent, pathMatch: 'full', canActivate: [AuthGuardService] }, { path: 'sites', component: SiteIndexComponent, resolve: ...

What is the significance of having nodejs installed in order to run typescript?

What is the reason behind needing Node.js installed before installing TypeScript if we transpile typescript into JavaScript using tsc and run our code in the browser, not locally? ...

Show the MatCalendar by clicking on a link

Is there a way to trigger the opening of a Material Calendar component using an anchor element? I tried, but the calendar always pops up in the top left corner of the page: <li> <mat-calendar class="hidden"> <input matIn ...

JavaScript - Imported function yields varied outcome from module

I have a utility function in my codebase that helps parse URL query parameters, and it is located within my `utils` package. Here is the code snippet for the function: export function urlQueryParamParser(params: URLSearchParams) { const output:any = {}; ...

Learn the process of automatically including correlation headers in Angular HTTP requests for Application Insights

I am currently utilizing the npm package @microsoft/applicationinsights-web within my Angular project. In my http service, I have custom headers that seem to be overriding the correlation headers ('Request-Id' and 'Request-Context'). D ...

Guide for using two Async Pipe functions in Angular 7

Two different functions are in place to check a specific condition, and the requirement is for both of them to be true simultaneously. How can *ngIf be utilized to achieve this? Currently, setting just one of them works, but the aim is to have both. HTML ...

Error message displaying that the argument for the onChange state in a jhipster react form is not assignable as type '{ [x: number]: any; }'

Just diving into the world of React and encountering a bit of a struggle with jsx when it comes to setting state in a form that contains two fields and triggers an ajax call to store a json object (response data) in the state's field3. The code I curr ...

checkbox causing the button to appear empty

Due to the inability of a ngIf and ngFor to coexist, I added an ng-container to facilitate the loop. However, after making this change, nothing seems to be working as expected without any clear reason. Below is the code snippet that is causing trouble: Vi ...

"Encountering an error with _getHostElement in Angular Material's experimental mat-slider component. Looking for a solution

Recently, I made the switch to Angular 12 and decided to explore the new mat-slider in Angular Material Experimental. My goal was to have a range slider, but since it's not currently available in the regular Angular Material package, I wanted to stick ...

I require the ability to modify cellEditor parameters in real-time

How can a value be passed to cellEditorParams after the user double clicks on a grid row? The application triggers a service call on row click and the response needs to be sent to cellEditorParams. ...

Angular: Stop additional input from being processed in Child Component and disable Change Detection

Is there a way to limit the number of inputs a child input in Angular receives before stopping further changes? For example, I want the child input to accept only 3 updates from ngOnChanges and then ignore any subsequent ones. I am currently using an inpu ...

Scope variable is not visible to browser.executeScript

I am currently exploring Protractor testing for my AngularJS application and I have encountered a specific issue. My objective is to: browser.executeScript('$scope.$apply') I need to execute this in order to refresh the screen and see the upda ...