Protractor can be quite tricky as it tends to throw off errors in the first it block, causing

After writing a protractor test for an Angular application with a non-angular login page, I decided to include the login process in a separate file using

browser.waitForAngularEnabled(false);
.

I then created a describe block with a series of it blocks to test different aspects of the application. However, I encountered a problem where the first it block always failed. Even after deleting the body and running it again, I still received a misleading error message:

- NoSuchElementError: No element found using locator: By(css selector, *[id="Username"])
.

Interestingly, this error actually related to the login feature, which had passed successfully at that point. I was left wondering what could be causing this issue.

Here is the structure of my code:

 describe("Test Cases in first feature ", () => {
      //login via non angular application
      login.SignIn(settings.usercredentials.LocalUser.userName, settings.usercredentials.LocalUser.password);

      it("dummy tc", () => {

      });

     it("New Mission Creation", () => {
 main_dashboard_page.newItem("mission");
 });

Answer №1

When code is not enclosed in an it block, it may not be executed in the expected order and any errors produced by that code may not be handled as expected. Your login function code may run before other code on the page, leading to issues. It is advisable to enclose the login function within either beforeAll or beforeEach (or within its own it block).

I have a similar application with a non-angular login setup, and I handle it as follows using async/await syntax:

beforeAll(async function () {
    // Launch the URL and login before running any tests

    await browser.waitForAngularEnabled(false);
    await loginPO.loginToApplication(browser.params.login.username, browser.params.login.password, browser.params.loginSite.url);

    // Add extra logic to confirm successful login before re-enabling angular wait
    await browser.waitForAngularEnabled(true);
});

Non async/await approach:

beforeAll(function () {
    // Launch the URL and login before running any tests

    browser.waitForAngularEnabled(false);
    loginPO.loginToApplication(browser.params.login.username, browser.params.login.password, browser.params.loginSite.url);

    // Add extra logic to confirm successful login before re-enabling angular wait
    browser.waitForAngularEnabled(true);
});

Updated Answer:

it('login before tests execute', () => {
    browser.waitForAngularEnabled(false);
    loginPO.loginToApplication(browser.params.login.username, browser.params.login.password, browser.params.loginSite.url);

    // Add logic to ensure successful login
    browser.waitForAngularEnabled(true);
})

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

UI-Router is failing to transition states when $state.go() is called

I am currently troubleshooting a unit test for my user interface router routes, specifically focusing on the issue I encountered with the test not passing successfully. Within my test script, when checking the value of $state.current.name, it returns &apo ...

Tips for implementing collapsible functionality that activates only when a specific row is clicked

I need to update the functionality so that when I click on a row icon, only that specific row collapses and displays its data. Currently, when I click on any row in the table, it expands all rows to display their content. {data.map((dataRow ...

The Next.js app's API router has the ability to parse the incoming request body for post requests, however, it does not have the

In the process of developing an API using the next.js app router, I encountered an issue. Specifically, I was successful in parsing the data with const res = await request.json() when the HTTP request type was set to post. However, I am facing difficulties ...

Angular HttpInterceptor failing to trigger with nested Observables

Utilizing a HttpInterceptor is essential for adding my Bearer token to all calls made to my WebApi. The interceptor seamlessly functions with all basic service calls. However, there is one specific instance where I must invoke 2 methods and utilize the re ...

Sending data between components in Angular can be achieved by using various methods. One common approach is to utilize

I am encountering an issue with a component named customers.component Below is the code from the customers.component.ts file: @Component({ selector: 'app-customer', templateUrl: './customer.component.html', styleUrls: ['./cu ...

Inquiry regarding the TS2322 error encountered in a Svelte Component

I'm currently exploring Svelte using TypeScript. I encountered a TS23 error while working on this piece of code. <script lang="ts"> import ComponentA from './ComponentA.svelte'; import ComponentB from './Compone ...

Utilizing the Next.js "Link" Element as a Personalized React Component Using Typescript

When attempting to utilize the "Link" element as a custom react component that I modified with typescript to enhance its functionality, I encountered a recurring issue in my project. Each time I used it, I had to include a property named props which contai ...

Angular compodoc tool is not considering *.d.ts files

Is there a way to make compodoc include .d.ts files in the documentation generation process for my Angular project? Even though I've added all .d.ts files to tsconfig.compodoc.json as shown below: { "include": [ "src/**/*.d. ...

What is the best way to define a category in order to utilize a saved string as a variable for referencing it?

An object named CONFIG holds the following information: export const CONFIG = { buttonDestinations: { detailedStats: `detailedStats`, mealPlans: `mealPlans`, products: `products` }, buttonTexts: { detailedStats: ...

Obtain the outcome of HTML5 FileReader by utilizing promises within an asynchronous function

I am encountering a challenge in my Angular 4 application where I am working with an image. I am trying to pass the base64 string to another variable, but due to the asynchronous nature of this process, the image.src ends up being empty. As a result, the ...

Encountering a bug in Typescript where a Prisma relation list field fails when provided with an argument

While attempting to initiate a new project using Prisma Client, I encountered an error when passing it with args, even when using an empty array list such as []. Here is the Prisma model: generator client { provider = "prisma-client-js" } dat ...

Showcasing an input field once a specific button is pressed in an Angular application

When triggered, I am looking for a blank panel that will display a text box within the same panel. This functionality should be implemented using Angular. ...

Tips for accurately typing a "Type Mapping" function

In my code, I have a specific type designed for a function that takes one type I as input and returns another type O as output. Here is how it currently looks: export interface IFunctionalMapping<I, O, K extends keyof O> { [prop: Extract<O[K], ...

Error TS2488 in React TypeScript: The data type 'IStateTypes' is required to have a method called '[Symbol.iterator]()' that returns an iterator

At the moment, I am working on implementing a global state in React Hooks but have run into an issue. https://i.stack.imgur.com/DN83K.png The current problem I'm facing is with [Symbol.iterator](. I am uncertain about how to resolve this as I am in ...

No issues raised by Typescript/tslint regarding this in arrow function

After making some creative adjustments, this is what I came up with: const TopBar = () => ( <Button onPress={this.onPress} // No errors shown /> ) Although all my other rules in tslint.json are functioning properly. Is there a way to ma ...

I am encountering issues with running my tests using react-testing-library alongside TypeScript

Currently facing issues with react-testing-library in my TypeScript-based React project. Despite researching and following various tutorials, I am unable to resolve the problem. I have experimented with changing configurations in babel.config.js, tsconfig ...

What caused the failure of the ++ operator in production mode?

Encountering an issue with a reducer in my code. There is a button with an onClick function that triggers a NextBox action to alter the state of a React UseContext. The application was built using Vite, and while running npm run dev, everything functions a ...

The directive for angular digits only may still permit certain characters to be entered

During my exploration of implementing a digits-only directive, I came across a solution similar to my own on the internet: import { Directive, ElementRef, HostListener } from '@angular/core'; @Directive({ selector: '[appOnlyDigits]' ...

Displaying a random element from the state array in React Native

I'm attempting to display a random item from the state array, with the possibility of it changing each time the page reloads. Here's what I have tried so far, any suggestions or ideas are welcome! This is my current state: state = { randomIt ...

Showing error messages in Angular when a form is submitted and found to be invalid

My form currently displays an error message under each field if left empty or invalid. However, I want to customize the behavior of the submit button when the form is invalid. <form #projectForm="ngForm" (ngSubmit)="onSubmit()"> ...