Angular end-to-end testing doesn't locate the tag until the timeout expires following a route change

Recently, I've been diving into the world of e2e testing. So far, everything has been going smoothly with my tests on the first page - checking the title, h1 tag text, and number of cards. The issue arises when I try to navigate to a second page using buttons on the cards. Even though I successfully rotate to the second page as intended, I encounter a timeout error when trying to test the h1 text on the second page. Can anyone spot where I may be going wrong? Here's a snippet of my code:

app-e2e-spec.ts;

    it('should go to measures page', ()=>{
        expect(page.goToMeasuresPage()).toEqual("Measures");
    });

app.po.ts;

    goToMeasuresPage() {
        this.clickShowMoreButton(); //a function to expand card for show buttons
        let button = element(by.buttonText("Measures"));
        button.click();
        let headline = element(by.css(".container .header h1")).getText();
        return headline;
     }

second page's html;

    <div class="container">
        <div class="header">
            <app-back-button></app-back-button>
            <h1>{{ 'MEASURES' | translate }}</h1> //this pipe returns "Measures" text
        </div>
    </div>

Answer №1

Protractor verifies the stability of a page by checking an angular property after each action on the UI to ensure that all changes and loading processes have been completed.

The reason for this issue is that Protractor has detected that the angular page has not stabilized after the rotation action. To address this, you can increase the default wait time in your configuration settings to allow more time for your app to load:

//Set timeout to 30 seconds
allScriptsTimeout: 30 * 1000

If the timeout issue persists, it could be due to some polling activity in your app that is preventing angular from recognizing the completion of loading. Refer to this thread for additional information.

Answer №2

Make sure to insert the line below immediately after setting the let headline variable in the goToMeasuresOage function:


browser.wait(ExpectedConditions.presenceOf(headline))

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

NextImage encountering issues in Internet Explorer 11

In my TypeScript setup, here is a snippet from my package.json file: "dependencies": { "@tailwindcss/typography": "^0.4.1", "@webcomponents/shadydom": "^1.7.4", "cookie": "^0.4.1", " ...

When an Angular application is built in Electron and a div is printed, a blank window is

After developing an Angular application, I decided to build it in Electron. Surprisingly, everything was working perfectly fine until I encountered an issue with printing a specific div. Whenever I click the print button, a blank window opens up in Elect ...

Transforming the Server-side model to the Client-side model within Angular 4

My Server-side C# model public class Instructor:Entity { public string Name { get; set; } public string PhoneNo { get; set; } } Client-side TypeScript model export class Instructor extends Entity { public name:string; public address ...

What is the correct way to assign a property to a function's scope?

Lately, I've been delving into Typescript Decorators to address a specific issue in my application. Using a JS bridge to communicate TS code between Android and iOS, we currently define functions as follows: index.js import foo from './bar' ...

typegrapql encounters an issue with experimentalDecorators

I'm currently delving into TypeGraphQL and working on building a basic resolver. My code snippet is as follows: @Resolver() class HelloReslover { @Query(() => String) async hello(){ return "hello wtold" } } However, ...

How to generate an array within a TypeScript extension function

As I was working on creating an extension method using typeScript, the main goal was to establish a static or normal variable within the method. The ServiceCollector method was invoked three times in order to send and store data or objects in an array. B ...

Incorporating CASL with the latest version of Angular, version

I'm currently working on implementing CASL into my Angular application, but I'm having trouble understanding how to integrate it. // Login Component ngOnInit() { var jsonBody = {}; jsonBody['email'] = 'peter@klaven'; ...

Guide to defining font style in vanilla-extract/CSS

I'm trying to import a fontFace using vanilla-extract/css but I'm having trouble figuring out how to do it. The code provided in the documentation is as follows: import { fontFace, style } from '@vanilla-extract/css'; const myFont = fo ...

Troubleshooting Problem: Incompatibility with Angular 1 and Angular 2 Hybrid Application causing Display Issue with Components

In my development work, I have created a unique hybrid application that combines Angular 1 and Angular 2 functionalities. This hybrid setup was achieved by following the guidelines provided in two helpful resources: Upgrading from AngularJS and Migrating A ...

Issues with MC-Cordova-Plugin on Ionic and Angular Setup

Recently, I integrated a plugin for Ionic from this repository: https://github.com/salesforce-marketingcloud/MC-Cordova-Plugin After successfully configuring it for iOS, I encountered difficulties on Android where the plugin seems to be non-existent. It ...

Keep the Angular Material tables refreshed with the latest data pulled from an API

In my Angular application, I have implemented a table using Angular Material and populated it with data retrieved from an API. The relevant code snippet is as follows: ngOnInit() { this.getChillerApiData(); } getChillerApiData() { this.api. ...

Mandatory classification eliminates understanding of function type

I'm currently trying to transform an optional argument from one type into a required one in my type definition. However, I am encountering some difficulties and can't seem to figure out what I'm doing wrong in the process. Would appreciate a ...

What exactly does bivarianceHack aim to achieve within TypeScript type systems?

As I went through the TypeScript types for React, I noticed a unique pattern involving a function declaration called bivarianceHack(): @types/react/index.d.ts type EventHandler<E extends SyntheticEvent<any>> = { bivarianceHack(event: E): void ...

Is React 18 compatible with both react-redux and react-router?

At present, my react application is running on the following versions: react 17.0.x react-dom 17.0.x react-redux 7.2.x react-router-dom 5.x.x react-scripts 4.0.x redux 4.x.x My initial step towards upgrading to react@18 involved updating react-scripts to ...

Creating a velocity gauge style graph in Angular 4: A step-by-step guide

Hello, I'm currently working on building a speedtest-inspired application. While everything else is going smoothly, I'm struggling to incorporate a speedometer-like chart in Angular 2/4. Despite searching extensively, I've only come across J ...

Typescript inheritance results in an undefined value being returned

I am trying to understand the code below, as I am confused about its functionality. In languages like C# or Java, using the base or super keyword usually returns values, whereas in TypeScript, I am receiving "undefined". However, when I switch from using " ...

Why are UI changes delayed when using Angular2 Google Maps events?

I am working on an Angular2 application that integrates the Google Maps JS API. When loading Google Maps, I include the script like this: <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script> To listen to events on ...

Angular2 had a delay in processing the 'mouse wheel' input event for x milliseconds because the main thread was occupied

Currently, I am working with Angular2 (r.2.0.0) along with typescript (v.1.8.10). I have encountered an issue where Chrome does not respond while scrolling and displays a warning message stating: "Handling of 'mouse wheel' input event was delayed ...

How to include extra data in Angular Firebase user creation using the createUserWithEmailAndPassword

Currently, I am working on implementing the Firebase createUserWithEmailAndPassword method. However, I would like to include an additional field named 'name' in Cloud Firestore. Below is a snippet of my code: auth.service.ts SignUp(email: string ...

Encountering issues with MatTable functionality in Angular version 10

Could it be that I’m starting this project from scratch using Angular Material 10, a framework I’m not familiar with yet, or am I simply missing something? My mat-table isn’t showing up on the page at all, which is completely new to me. Here’s the ...