Tests with Protractor are guaranteed to pass as long as the specification is within a loop

ISSUE :

  • While using the code provided in the EXAMPLE section, the expect block inside the forEach loop always passes, which is not the expected behavior.

  • For instance, here is a scenario along with a screenshot of the test report:

    expect('bt bt-primary').toContain('btn');

https://i.sstatic.net/Oky53.png

WHAT I NEED :

  • I am looking to extract a list of all buttons present on a page in order to conduct E2E test cases for custom CSS functionalities.
  • The test code should be easily reusable across multiple test files for different pages.
  • To achieve this, I have disabled the selenium promise manager and implemented the async/await method.
  • However, I am facing a challenge while trying to accomplish this task.

SAMPLE CODE :

describe('Login form', () => {
    it('should navigate to page with login form', async () => {
      await expect(browser.getCurrentUrl()).toEqual(
        'http://localhost:4200/#/login'
      );
    });

    it('should check for buttons with bootstrap classes', async () => {
      const buttons = await page.getAllButtons();
      buttons.forEach(async (button) => {
        const classAttribute = await button.getAttribute('class');
        expect(classAttribute).toContain('btn');
      });
    });
  });

QUERY :

Can anyone assist me in resolving this issue? I aim to retrieve a list of elements and perform tests on them in a loop, page by page.

Answer №1

Instead of firing off each command separately without waiting for their resolution, the better approach is to use a for loop.

it('should contain buttons with bootstrap classes', async () => {
      const buttons = page.getAllButtons();
      for (let i = 0; i<buttons.length; i++) {
        const classAttribute = await buttons.get(i).getAttribute('class');
        expect(classAttribute).toContain('btn');
      } 
    });

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

Caution: The `id` property did not match. Server: "fc-dom-171" Client: "fc-dom-2" while utilizing FullCalendar in a Next.js environment

Issue Background In my current project, I am utilizing FullCalendar v5.11.0, NextJS v12.0.7, React v17.0.2, and Typescript v4.3.5. To set up a basic calendar based on the FullCalendar documentation, I created a component called Calendar. Inside this comp ...

How can I establish a connection to a Unix socket path using a connection string with Slonik?

Hey there! I encountered an issue while attempting to connect to a Google Cloud database using slonik: const pool = createPool( `socket:userName:password@/cloudsql/teest-123986:europe-west3:test?db=dbName` ) The error message I received was: error: throw ...

What is the correct way to install @angular-devkit/build-angular in Angular version 13?

In my Angular 13 project, I am facing a dilemma with conflicting dev dependencies: "devDependencies": { "@angular-devkit/build-angular": "~13.2.5", "@angular/cli": "~13.2.5", "@angular/co ...

The clash of dependencies in Transloco

Currently, I am in the process of integrating the Transloco package into my Angular Ionic project that I compile using VSCode. My Angular version is 13.3.0. Upon executing the installation command: ng add @ngneat/transloco I encounter a series of terminal ...

encountering difficulties with implementing the custom pagination feature in Angular 2

After creating a custom pagination component using Angular2, I encountered an error when trying to use it in another component: Can't bind to 'offset' since it isn't a known property of 'app-pagination'. Update Made in app. ...

The art of Angular localization: harvesting language elements from ts documents

Is it true that $localize is only available for translation in ts files, but the extraction of strings is currently only implemented for templates? I came across information stating that the extraction of strings from ts files should be possible in Angular ...

Implement dynamic routerLink binding with Angular 11

Having a value containing routerLink and queryParams, I am attempting to bind it in the HTML. anchorValue : string = `<a [routerLink]="['../category/new ']" [queryParams]="{ query: 'category' }" routerLinkActive = ...

Combining Angular 1.3.4 and Angular 2 - A comprehensive guide

Currently, I have an application built on Angular 1.3.4 and my goal is to gradually transition it to Angular 2, module by module. For instance, if there are 5 modules on my webpage, I want to move one module to Angular 2 while keeping the other modules ru ...

Can someone help me understand why these checkboxes are not properly binding with the two-way binding, even though the opt.checked property is set to true?

<div style="display: table-caption" [id]="question.key" *ngSwitchCase="'checkbox'"> <div *ngFor="let opt of question.options; let i = index" style="display: flex; flex-directi ...

Encountering an issue upon launching the application: "Error: Token is required in order to proceed!"

I encountered the following error. Can someone please point out what's causing it? How can I resolve this issue? Could there be something missing in main.ts? Error: (index):39 Error: Error: Token must be defined! at new BaseException (https:/ ...

Is it possible to secure an API endpoint from unauthorized access by external authenticated users not originating from the requesting application?

Currently, I am developing an Angular application where users can log in, track their progress, and earn levels/experience points. The app uses a Node.js/Express API for backend functionality, and I need to implement a way for the app to award experience ...

Redirecting based on conditions in Angular 2+ with wildcard paths

I have a variety of paths, each corresponding to a specific stage in a wizard. const routes: Routes = [ { path: ':id', component: ParentComponent, children: [ {path: 'step1', component: Step1Component}, {path: ...

The behavior of Angular 4 CSS and JS changes upon refreshing the page

Every time I try to load a page with this particular script: this.router.navigateByUrl('/report-result/'+report.id); It appears that not all the CSS and JS files are being loaded properly. The bootstrap popovers don't show up, and some ele ...

Error: Unable to locate the variable 'content' in the TypeScript code

Having an issue with my navigateToApp function. In the else condition, I am calling another function called openModalDialog(content). Unfortunately, I am encountering an error stating Cannot find name content. Can someone help me identify what is wrong h ...

When trying to run ionic serve, I encountered the following error: "[ERROR] ng has unexpectedly closed with an exit code of 127."

My attempt to launch an ionic app on my Mac has hit a roadblock. While running npm install for the dependencies, everything goes smoothly without any issues. However, when I try to run 'ionic serve' or 'ionic s', an error crops up: [ng] ...

The HTMLInputElement type does not contain a property named 'name'

function handleChange(e) { console.log(e.target.name); } <input name="bb" onChange={handleChange} /> Have you ever wondered why the HTMLInputElement element does not have a name attribute in React? ...

Beginner - managing tasks with React and TypeScript

Can someone assist me with a minor issue? I have experience programming in React using pure JavaScript, but I'm struggling with transitioning to TypeScript. I don't quite understand all the hype around it and am finding it difficult to work with. ...

Suggestions for autofilling in Angular 8 on the password field

Despite multiple discussions on stackoverflow, a solution to disabling browser AUTO-FILL suggestions on fields still eludes me. Does anyone know of a reliable method to prevent these pop-ups from appearing? <mat-form-field> <input ...

Is the code executed within a specific zone, and if it is, what are the reasons and methods for

Recently, I came across the code for the angular material google map library, and most of it made sense to me. However, there is one section in particular that still puzzles me (found in map-event-manager.ts). /** This method returns an observable that ad ...

In Typescript 12, the process of creating a Bootstrap popup that waits for the user to click on a value entered in

Greetings! I am currently working with Angular TypeScript 12 and I am attempting to trigger a Bootstrap modal popup when I enter a code in the input field and press enter. However, the issue is that the popup is always displayed even without typing anythin ...