Issue with clicking the login button in Protractor with TypeScript

I have set up Page objects for the home page and login page. As I proceed with my test cases, I am encountering an issue with the login button. During the execution of my test cases, the login button is not responding to clicks. Has anyone else faced similar challenges here?

let assertion = require("assert").use(require("chai-as-promised"));
import { defineSupportCode } from 'cucumber';
import {browser, element, by, ElementFinder, $, $$ , until } from 'protractor' ;
const expect = assertion.expect;
import { HomePage } from '../page-objects/pm360-home-page';
import { LoginPage } from '../page-objects/pm360-login-page';

   var pm360_homepage  = new HomePage();
   //var pm360_loginpage = new LoginPage();

  defineSupportCode(({Given,Then }) => {
  Given('I log in to pm360 page using valid credentials {string} and {string}',   
  async function givenauth(username: string, password: string): Promise<void>{
    pm360_homepage.OpenBrowser('https://pm360-qa.parkmobile.io/'); 
    await pm360_homepage.usernameField.sendKeys('.....');
    await pm360_homepage.passwordField.sendKeys('......');
    //browser.actions().sendKeys(protractor.Button.MIDDLE).click();
    pm360_homepage.ClickLogIn(); 
    //pm360_homepage.logInBtn.click().then(()=> {"looged In"});
    //browser.touchActions().tap(pm360_homepage.logInBtn).perform().then(()=> {"logged In"});
    browser.ignoreSynchronization = true;
});
   Given('I proceed to manage policies',
   async function givenmanaging():Promise<void>{
    browser.ignoreSynchronization = true;
    //browser.wait(until.elementsLocated(pm360_homepage.managePoliciesBtn));
    await pm360_homepage.managePoliciesBtn.click();
    //browser.waitForAngularEnabled(true);

Answer №1

Have you ensured that your OpenBrowser() and ClickLogIn() functions are returning promises? If they are, be sure to include await for those promises as well. The reason the button is not being clicked could be due to improper usage of await statements.

REMINDER: It is essential to await every promise encountered. If any promise is not awaited, it will execute synchronously leading to promise rejections. Failure to handle promises correctly may cause code execution issues and test case failures. Remember to set SELENIUM_PROMISE_MANAGER: false in your configuration file and ensure all promises are appropriately managed.

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

The declaration file for the datepicker module could not be located, even though the necessary types have been installed

I'm encountering an issue during production build on my Next.js project. The error message reads: Could not find a declaration file for module 'react-datepicker'. '../node_modules/react-datepicker/dist/index.js' implicitly has an ...

Is there a way to logout when the select event occurs using the key?

I am trying to figure out how to log out the key value when the select event is triggered. Specifically, I want to access the key={localState.id} within the <select></select> element in my HTML. This key value is crucial for a conditional stat ...

After executing "npm run dev" in Svelte and Vite, a common error message of "HTMLElement is not defined" might appear

Incorporating several web components into my Svelte project led to the appearance of an error message stating HTMLElement is not defined after running npm run dev (which actually translates to vite dev). The complete error message reads as follows: HTMLEl ...

How to define an array of objects in data using Vue.js and TypeScript

Encountering errors when attempting to declare an array of objects in Vue.js 3 + TypeScript. The code snippet includes a template, script, and style sections. <template> <ul > <li v-if="!items.length">...loading</li> ...

I searched through the interface folder in the component.ts file but couldn't locate my typescript property

My coding dilemma goes something like this:- Within the interface folder, I have created a book.ts file with properties. However, my book.component.ts is not recognizing the book.ts property. It seems to work fine when I import the interface (book.ts) dir ...

Tips for sending a variable to control a particular panel within an accordion in Angular 2

I have a collection of ngbpanels that are dynamically created using ngFor. I need to expand or collapse a specific panel based on certain conditions, but the ID I provide for the panel is stored in a variable. The code does not recognize the panel ID when ...

How to access class type arguments within a static method in Typescript: A clever solution

An issue has arisen due to the code below "Static members cannot reference class type parameters." This problem originates from the following snippet of code abstract class Resource<T> { /* static methods */ public static list: T[] = []; ...

In TypeScript, use a key index signature for any properties that are not explicitly defined

In various instances, I have encountered scenarios where it would have been beneficial to implement the following (in a highly abstracted manner): export interface FilterItem { [key: string]: string | undefined; stringArray?: string[]; } However, thi ...

Methods for bypassing a constructor in programming

I am working on a code where I need to define a class called programmer that inherits from the employee class. The employee class constructor should have 4 parameters, and the programmer class constructor needs to have 5 parameters - 4 from the employee c ...

Unusual class title following npm packaging

Currently, I am working on developing a Vue 3 library with TypeScript. We are using Rollup for bundling the library. Everything works as expected within the library itself. However, after packing and installing it in another application, we noticed that th ...

Clicking the button in Angular should trigger a series of functions to be

It seems like I'm struggling with a simple question due to my lack of experience in this area. Any guidance or help would be greatly appreciated. I have a button that should trigger multiple functions when clicked, all defined in the same ts file. Wh ...

Unable to utilize `request.on` event listeners for terminating stream requests in NextJS

Currently, I am in the process of developing an API endpoint that streams data in order to provide live updates to components based on database events. While I have made significant progress in getting everything to function correctly, I have encountered a ...

How can you add an error notification to a click on a protractor?

Is there a method to associate an error message with a protractor click function? I am envisioning something like the example line below: button.click('Button not clickable'); Currently, when an element cannot be located, I receive the non-spec ...

Ways to incorporate environment variable in import statement?

In my Angular v5 project, I have a situation where I need to adjust the import path based on the environment. For example, I have an OwnedSetContractABI file located in different folders for each environment - dev and production. In dev environment, the ...

Angular 2: Harnessing the power of Observables with multiple Events or Event Handlers

In the component template, I have grouped multiple Inputs and their events like this: <tr (input)="onSearchObjectChange($event)"> <th><input [(ngModel)]="searchObject.prop1"></th> <th><input [(ngModel)]="searchObje ...

Strategies for storing component data within an Angular service

Recently, I have implemented a dice game feature using Angular. The outcome of the dice rolls is stored in a TypeScript array and then displayed on the HTML page. However, I have been tasked with persisting these results even if I navigate to another pag ...

Does Typescript not provide typecasting for webviews?

Typescript in my project does not recognize webviews. An example is: const webview = <webview> document.getElementById("foo"); An error is thrown saying "cannot find name 'webview'". How can I fix this issue? It works fine with just javas ...

The file or directory npx-cli.js cannot be found in the specified location: ../npm/bin/

Problem Description After creating a new React project using the command below, npx create-react-app my-app --template typescript and utilizing node version v18.15.0, I attempted to set up Prettier for the project following the instructions in the Pretti ...

No declaration file was found for the module named 'vue2-timepicker'

Overview I integrated the vue2-timepicker plugin into my Typescript/Nuxt.js application. However, I encountered an issue with importing vue2-timepicker. import timepicker from 'vue2-timepicker' Could not find a declaration file for module &apos ...

Transferring a variable from an Angular 2 constructor into the template via the then statement

I'm struggling with implementing a secure login system. My goal is to first check the device's native storage for an item named 'user', then verify if the user exists in our database, and finally retrieve the unique id associated with t ...