Tips for displaying the string value of an elementFinder when encountering an error in protractor

I have the following code snippet:

    export async function waitTillClickable(e: ElementFinder): Promise<ElementFinder> {
        const conditions = EC.visibilityOf(e);
        await browser.wait(conditions, DEFAULT_TIMEOUT, `Element did not return within ${DEFAULT_TIMEOUT / 1000} seconds: ${e}`);
        return e;
    }

The issue I am facing is that when it times out or cannot find the element, it displays the message:

Element did not return within 10 seconds: [Object][Object]

Instead of showing [Object][Object], I would like to see which locator it failed for, such as by.xpath('//...'). I attempted using JSON.stringify on {e}, but that did not provide the desired outcome.

Answer №1

If you need to retrieve the locator of a webelement, you can do so by using the code element.locator().toString().

 export async function waitUntilClickable(e: ElementFinder): Promise<ElementFinder> {
        const conditions = EC.visibilityOf(e);
        await browser.wait(conditions, DEFAULT_TIMEOUT, `The element did not become clickable within ${DEFAULT_TIMEOUT / 1000} seconds: ${e.locator()}`);
        return e;
    }

I hope this information proves useful to you.

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

Optimizing Angular 2+ performance with a custom minification of the

I've taken note of the cautions regarding avoiding pipes for ordering/sorting. While I understand the concerns with impure pipes, I'm not entirely clear on the issue with minification. The documentation and various posts highlight the potential ...

Modify the attributes of a CSS class according to the chosen theme (selected within the user interface) in Angular 8

I have a custom-built application with Angular 8 where users can switch between two unique themes in the user interface. I have a specific div class that I want to change the background-color for each theme, but unfortunately I am having difficulty achievi ...

Unfortunately, my capabilities do not allow me to execute the command 'ng build --configuration production

This is the issue that I am facing and need assistance: Error: src/app/app.component.html:1:1 - error NG8001: 'fuse-progress-bar' is not recognized as a valid element: If 'fuse-progress-bar' is an Angular component, please ensure that ...

Is it possible to duplicate a response before making changes to its contents?

Imagine we are developing a response interceptor for an Angular 4 application using the HttpClient: export class MyInterceptor implements HttpInterceptor { public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<an ...

Communicate between sibling components in Angular by passing the selector of one component to another

Within my project, I have two sibling components located in the SecondComponent folder. The SecondComponent consists of both the main component and its child component. Now, in the FirstComponent, I need to access the child component of the SecondComponent ...

Enforcing strict property validation on variables passed into TypeScript functions

Is there a method to enforce excess-property checking, not only for an inline object literal but also one derived from a variable? For instance, let's say I have an interface and a function interface Animal { speciesName: string legCount: nu ...

Enhance the appearance of a custom checkbox component in Angular

I developed a customized toggle switch for my application and integrated it into various sections. Recently, I decided to rework it as a component. However, I am encountering an issue where the toggle switch button does not update in the view (it remains t ...

Why do selected items in Ionic 3 ion-option not get deselected even after reloading or reinitializing the array

HTML File: <ion-item class="inputpsection" *ngIf="showDeptsec"> <ion-label floating class="fontsize12">Department</ion-label> <ion-select (ionChange)="showDepartmentChosen($event)" multiple="true" formControlName=" ...

Error in JSON format detected by Cloudinary in the live environment

For my upcoming project in Next.js, I have integrated a Cloudinary function to handle file uploads. Here is the code snippet: import { v2 as cloudinary, UploadApiResponse } from 'cloudinary' import dotenv from 'dotenv' dotenv.config() ...

How can I incorporate a feature in my Angular application that allows users to switch between different view types, such as days, using JavaScript

Greetings, community! I am currently utilizing version 5 of the fullcalendar library from https://fullcalendar.io/ in my Angular 9 application. I have noticed that the calendar offers various options to change the view type as shown below: https://i.stac ...

TS2345: Cannot assign type '(item: cType) => cType' to type '(value: Object, index: number, array: Object[]) => cType' within the parameter

I am currently working on a project using Angular 13 and Typescript 4.5.2. In addition, I am incorporating the Syncfusion library in my development process, specifically utilizing the datagrid component for managing table data. For reference, you can che ...

The module 'AppModule' is throwing an error due to the unexpected value 'Validators' being imported. Make sure to include a @NgModule annotation to resolve this issue

Currently, I have integrated Angular reactive forms into my application. Here is an excerpt from my app.module.ts file: import { HttpModule } from '@angular/http'; import { environment } from './../environments/environment'; import { ...

Navigating TS errors when dealing with child components in Vue and Typescript

Recently, I encountered an issue where I created a custom class-based Vue component and wanted to access its methods and computed properties from a parent component. I found an example in the Vue Docs that seemed to address my problem (https://v2.vuejs.org ...

Determining the typing of a function based on a specific type condition

I have created a unique type structure as shown below: type Criteria = 'Criterion A' | 'Criterion B'; type NoCriteria = 'NO CRITERIA'; type Props = { label?: string; required?: boolean; disabled?: boolean; } & ( | ...

Pass the identical event to multiple functions in Angular 2

On my homepage, there is a search form with an input box and select dropdown for users to search for other users by location or using html5 geolocation. When a user visits the page for the first time, they are prompted to allow the app to access their loca ...

Issue found in React Js test - TypeError: source.on does not exist as a function

I'm encountering an issue with my post request using multipart/form-data. Everything runs smoothly, except for the tests which are failing. When running the tests, I encounter an error message: TypeError: source.on is not a function. This is the code ...

What are the best methods for repairing a malfunctioning Drawer?

My template can be found here: SANDBOX When transitioning to a nested route, I am experiencing a double rendering issue which causes the DRAWER to reopen. How can this be fixed? You can observe this effect in the "NESTED" tab. It is important that the fi ...

Is there a way for me to define the type of a prop based on the type of another prop?

I'm not entirely certain how to phrase this inquiry, or which terminology to employ, so I'll do my best in presenting it. My intention is to develop a component that functions on an array of elements and triggers a render function for each eleme ...

Setting a maximum limit for selections in MUI Autocomplete

Code updated to display the complete script logic. I want to restrict the number of selections based on a value retrieved from the database, but in this example, I have set it to 3 manually. The error message I'm encountering is "Cannot read properti ...

Spring OAuth2 preflight responds with a 302 status code

I have implemented OAuth2 in my Spring application with a resource server and authentication server. I am attempting to send a GET request to the resource server from Angular2, but I am receiving a 302 response for the OPTIONS request. Unfortunately, I do ...