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

React Typescript: exploring the power of dynamic types

Can dynamic typing be implemented? The JSON structure I am working with looks like this: { "fieldName": "Some text", "type": String, "inputType": "text" }, { "fieldName": "Some bool&q ...

Even when it appears to be chaotic, the TypeScript array of numbers always manages to find its way back to being sorted

I recently developed a function that aims to verify if an array of numbers is sorted: const checkIfSorted = (numbers: number[]) => { return numbers === numbers.sort((a, b) => a - b); }; checkIfSorted([4, 2, 8, 7, 3, 10, 1, 5, 9, 6]); // This cur ...

Is there a way to run an observable only once?

Within our project, we have implemented a specific approach: instead of retrieving the value from the observable, we directly add the value to the store. See the code snippet below for an example: loadReport() { return this.http.get(url, { params: ht ...

I am unable to generate an Angular file

PS D:\AngularCalismalar> ng new intro Node.js version v17.1.0 was detected. It is recommended not to use odd numbered Node.js versions for production as they will not enter LTS status. For more information, visit https://nodejs.org/en/about/relea ...

Executing the cucumberjs + playwright tests after starting the angular app using the ng serve command

Our testing process involves using cucumberjs and playwright. Is it possible to initiate Angular with ng serve (using test configuration) before running our tests, and then close the application once the tests are complete? Similar to configuring a web s ...

Property of object (TS) cannot be accessed

My question relates to a piece of TypeScript code Here is the code snippet: export function load_form_actions() { $('#step_2_form').on('ajax:before', function(data) { $('#step_2_submit_btn').hide(); $(&ap ...

Displaying the grid ID outside of a card in Angular while using Bootstrap 4

Utilizing the core ui template in my Angular project with Bootstrap 4. Check out the page <div class="animated fadeIn"> <div class="row"> <div class="col-sm-12"> <div class="ca ...

Node installation failed due to npm encountering an ETIMEDOUT error

Recently, I've been encountering some obstacles while attempting to install npm on our office's laptop within a specific directory. An error message keeps popping up: npm ERR! code ETIMEDOUT npm ERR! syscall connect npm ERR! errno ETIMEDOUT np ...

I'm encountering an issue with one of my routes not loading correctly in Angular 4 Universal

I have been working on implementing Universal and I believe I've made significant progress. My project is built on this seed. However, when I run "npm start", only the /about and /contact pages render successfully. The /home page does not render at al ...

Having trouble creating a unit test for exporting to CSV in Angular

Attempting to create a unit test case for the export-to-csv library within an Angular project. Encountering an error where generateCsv is not being called. Despite seeing the code executed in the coverage report, the function is not triggered. Below is the ...

The functionality of the class in Angular Bootstrap 4.3 is currently experiencing a

I recently upgraded from Bootstrap version 3.7 to 4.3 in my Angular 7 project, but I encountered some issues with the following code after the update. <div class="container"> <div class="row"> <app-select> ...

How to open a print preview in a new tab using Angular 4

Currently, I am attempting to implement print functionality in Angular 4. My goal is to have the print preview automatically open in a new tab along with the print popup window. I'm struggling to find a way to pass data from the parent window to the c ...

Angular/NestJS user roles and authentication through JWT tokens

I am encountering difficulties in retrieving the user's role from the JWT token. It seems to be functioning properly for the ID but not for the role. Here is my guard: if (this.jwtService.isTokenExpired() || !this.authService.isAuthenticated()) { ...

"Troubleshooting: The unique key prop is not functioning as expected with a

I am continuously receiving the warning message: Each child in a list should have a unique "key" prop. Even though I have assigned a key with an index number to my element, it does not appear in the HTML when inspecting via dev tools. The key values are a ...

Tips for showcasing images and videos in a full-screen mode resembling the TIKTOK APP through the use of Angular, Ionic 4, and Capacitor

Currently, I am diving into the world of Angular Ionic 4 with Capacitor. My goal is to create a feature that allows images and videos to be displayed in full screen, similar to how it works in the TikTok app. If anyone has experience with this functional ...

Can I perform headless testing using Protractor on a Windows operating system?

I'm currently using Protractor for testing purposes. I'm looking for a way to switch from using Chrome to doing headless testing. Most of the articles I've come across on this topic assume that I'm using a Linux operating system, but I& ...

Creating an ngFor loop with an ngIf condition for true and false bot conditions

I am attempting to troubleshoot an issue where if my condition is true, return true. If my condition is false, return false. However, currently, if only one condition is true, all conditions are being applied as true. Please help me resolve this problem. ...

Employing ngModel in an option dropdown

I am having trouble passing an attribute from an API call to a submit function. I suspect it might have something to do with either the option select or how the input is being formatted. Encountering the error Error: No value accessor for form control wit ...

Tips for adding a border to a table cell without disrupting the overall structure of the table

Looking for a way to dynamically apply borders to cells in my ng table without messing up the alignment. I've tried adjusting cell width, but what I really want is to keep the cells' sizes intact while adding an inner border. Here's the sim ...

Is it possible to get intellisense for Javascript in Visual Studio Code even without using typings?

Is it possible to have intellisense support in Visual Studio Code for a 3rd party library installed via npm, even if there is no typings file available? I have noticed this feature working in IntelliJ/Webstorm, so I believe it might be feasible. However, ...