Typescript function incorrectly returns Protractor's "element.all" output as Promise<string> instead of Promise<string[]>

Kindly review the code snippet provided below. The function getAllGroupIds() is designed to return an array of IDs belonging to "group" elements. The goal is to retrieve all the group-ids both before and after a test action, in order to compare them.

However, the code mentioned encounters a compilation error due to the line "groupIdsAfter.filter":

Error: Property 'filter' does not exist on type 'string'.ts(2339)

The issue arises from TypeScript assuming that getAllGroupIds function returns a Promise(string), overlooking the fact that "getAttribute" used with "element.all" actually yields an array of strings instead of a single string.

An attempt was made to set the function output to Promise(string[]), but this resulted in a different compilation error:

Error: Type 'Promise' is missing essential properties required by type 'Promise': [Symbol.toStringTag], finallyts(2739)

    testCreateEmptyActivity2 = () => 
{
    this.page.navigateTo().then(() =>
    {
        this.getAllGroupIds().then((groupIdsBefore) =>
        {
            console.log(groupIdsBefore);

            // perform test action here

            this.getAllGroupIds().then((groupIdsAfter) =>
            {
                console.log(groupIdsAfter);

                let diff = groupIdsAfter.filter(e => !groupIdsBefore.includes(e));
                console.log(diff);
            });
        });

        browser.sleep(2000);
    });
}

private getAllGroupIds = () =>
{
    return element.all(by.css("rect.group")).getAttribute("id"); 
}

Answer №1

This particular situation has been identified as a known issue.

To resolve this, you will need to loop through the array using the following method:

  private getIds(): promise.Promise<string[]> { // The 'promise' is being utilized from protractor library
    return element.all(by.css("rect.group")).map(elem => {
      if (elem) {
        return elem.getAttribute('id');
      }
    });
  }

The outcome will be an array containing all the ids.

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

Display a separate component within a primary component upon clicking a button

Looking to display data from a placeholder module upon component click. As a beginner with React, my attempts have been unsuccessful so far. I have a component that lists some information for each element in the module as a list, and I would like to be ab ...

Is OnPush Change Detection failing to detect state changes?

Curious about the issue with the OnPush change detection strategy not functioning properly in this demonstration. My understanding is that OnPush change detection should activate when a property reference changes. To ensure this, a new array must be set e ...

Mastering the art of Interpolation and Binding in Ionic 3/Angular 4: A step-by-step

My goal is to retrieve data from my Parse Server where MongoDB is installed. Although I have successfully displayed the data in the console, I am facing issues interpolating them in the HTML template. Here is my search.ts file: import { localData } from ...

The Redux Toolkit slice and TypeScript were not in agreement: it was expecting 0 arguments, but received

Recently, I encountered an issue with my slice code: const investment = createSlice({ name: 'investments', initialState, reducers: { getInvestmentsRequest(state) { state.investments.status = RequestStatuses.loading; }, } }) ...

I am attempting to update the URL of an iframe dynamically, but I am encountering an issue: the Error message stating that an Unsafe value is being

Currently, I am attempting to dynamically alter the src of an iframe using Angular 2. Here is what I have tried: HTML <iframe class="controls" width="580" height="780" src="{{controllerSrc}}" frameborder="0" allowfullscreen></iframe> COMPONE ...

The console is showing messages before the task is completed

When using console.log to write detailed messages about the current task expected to be performed by Protractor, I noticed that these messages are appearing on the console before the actual task is executed in the browser. An example of this is: it(' ...

Extension for VSCode: Retrieve previous and current versions of a file

My current project involves creating a VSCode extension that needs to access the current open file and the same file from the previous git revision/commit. This is essentially what happens when you click the open changes button in vscode. https://i.stack. ...

Error encountered in Jest when trying to use next/font/local: TypeError - (0, _local.default) is not a function

Currently, I am in the process of developing a UI library utilizing MUI, React, and TypeScript within Nx as the build system. To ensure smooth functionality, Jest is being used for testing purposes. However, I recently encountered an issue while attempting ...

fakeAsync failing to synchronize with async task completion

Scenario In my testing process, I am evaluating a component that utilizes an observable-based service to retrieve and display data for internationalization purposes. The i18n service is custom-made to cater to specific requirements. While the component ...

Need help restarting a timer I've built in Angular with just a click?

I am in the process of developing a compact application that will help me keep track of my activities within a specific time frame. Once I input an activity into a field and click "OK," it should be added to a list. My current challenge lies in resetting ...

Encountering TS2344 error when referring to the Component Ref in Vue.js during typing operations

I received a component reference on my FormCheckbox component from a patternlib. When I tried to incorporate the component into my own TestComp component, I encountered this TypeScript error that left me puzzled: TS2344: Type '{ name: string; mixins: ...

Ways to pass functions as properties to a React custom modal?

I'm currently working on a React login page setup. The login functionality is embedded in a Modal using the React-Modal library. When a user presses the login button, data is supposed to be sent to a Custom Modal as props to display a notification win ...

Operating on Javascript Objects with Randomized Keys

Once I retrieve my data from firebase, the result is an object containing multiple child objects. myObj = { "J251525" : { "email" : "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c3823212 ...

What causes Gun.js to generate duplicate messages within a ReactJs environment?

I need assistance with my React application where gun.js is implemented. The issue I am facing is that messages are being duplicated on every render and update. Can someone please review my code and help me figure out what's wrong? Here is the code s ...

Error with declaring TypeScript class due to private variable

When defining a TypeScript class like this: export class myClass { constructor(public aVariable: number) {} private aPrivateVariable: number; } and trying to initialize it with the following code: let someVar: myClass[] = [{ aVariable: 3 }, { aV ...

Having Trouble with Ionic 2's Loading Controller

In my attempt to utilize the recently added LoadingController in this scenario: let loading=this.load.create({ content: "Connexion au serveur Migal en cours..." }); loading.present(); this.http.get(this.urlCheckerForm.value.migalUrl+'/action/Mobi ...

Explaining the process of defining an object type in TypeScript and the conversion from JavaScript

Currently, I am attempting to enhance the background of a React website developed in typescript (.tsx) by incorporating particles. My approach involves utilizing the particle-bg component available at: https://github.com/lindelof/particles-bg However, whe ...

Google Maps on Angular fails to load

I'm currently working on integrating AGM into my Ionic 2 project. app.module.ts ... import { AgmCoreModule } from '@agm/core'; import { DirectionsMapDirective } from '../components/directions-map'; @NgModule({ declarations: [ ...

"Trouble with Typescript's 'keyof' not recognizing 'any' as a constraint

These are the current definitions I have on hand: interface Action<T extends string, P> { type: T; payload: P; } type ActionDefinitions = { setNumber: number; setString: string; } type ActionCreator<A extends keyof ActionDefinitions> ...

Ways to verify if the current date exists within a TypeScript date array

I am trying to find a way in typescript to check if the current date is included in a given array of dates. However, even after using the code below, it still returns false even when the current date should be present within the array. Can anyone please pr ...