How can I retrieve the number of events remaining after removing one in Protractor's end-to-end automation?

I am in need of testing the removal of an event and confirming that it has been successfully removed. Since these events are not unique and can vary in number during testing, I believe using a count would be the most suitable approach.

This is all new to me, so I apologize for any vagueness.
The code snippet below illustrates what I am trying to achieve, but the expectation should be a number. I am currently comparing a start and end count. Can someone guide me in the right direction or provide alternative solutions?

<!-- Insert code here -->

it('should remove the events', async function () {
await browser.get('/');
var removeBtns = element.all(by.id('removeButton')).first();
var startcount = element.all(by.id('removeButton')).count();
console.log(startcount);
removeBtns.click();
element(by.className('...confirm removal of button')).click();
var endcount = element.all(by.id('removeButton')).count();
console.log(endcount);
expect(endcount).toBeLessThan(startcount);

<!-- Insert code here -->

The error message received: No overload matches this call. Overload 1 of 2, '(expected: number | Promise, expectationFailOutput?: any): Promise', gave the following error.
Argument of type 'Promise' is not assignable to parameter of type 'number | Promise'.
Type 'Promise' is missing the following properties from type 'Promise': [Symbol.toStringTag], finally Overload 2 of 2, '(expected: number, expectationFailOutput?: any): boolean', gave the following error.
Argument of type 'Promise' is not assignable to parameter of type 'number'.

Answer №1

When using element.all().count(), keep in mind that it returns a promise.

An interesting nuance is that expect() can accept a promise, but methods like .toBe() and .toEquals() do not. To work around this, you can structure your code like so:

var finalCount = await element.all(by.className('submitButton')).count();
expect(initialCount).not.toBe(finalCount);

It's important to note how I rearranged the variable names, but ultimately what matters is ensuring that the value being compared is properly awaited.

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

Leveraging CSS attribute selectors within JSX using TypeScript

With pure HTML/CSS, I can achieve the following: <div color="red"> red </div> <div color="yellow"> yellow </div> div[color="red"] { color: red; } div[color="yellow"] { color: yellow; ...

Jest's it.each method is throwing an error: "This expression is not callable. Type 'String' has no call signatures."

I've been attempting to utilize the describe.eachtable feature with TypeScript, but I keep running into an error message stating: "error TS2349: This expression is not callable. Type 'String' has no call signatures." Below is my code snippe ...

Getting the most out of TypeScript Enum in Angular 6

I have a situation where I am storing the numeric value of an enum in my database and then displaying it in another part of the UI. Now, I need to retrieve the string value linked with that numeric value from the enum in a separate Angular component. Here ...

Checking for duplicates in a TypeScript array of objects

I am facing a requirement where I must check for duplicates among object items. Within the following Array of objects, I need to specifically look for duplicates in either the "empno" or "extension" properties. If any duplicates are found, an error should ...

Angular compilation error - Invalid selector: %

Whenever I execute npm run build, which in turn runs ng build -c production, the build process completes successfully. However, throughout this process, the command prompt displays a warning message: Warning: 303 rules skipped due to selector errors: 0% ...

How to utilize TypeScript fetch in a TypeScript project running on node with Hardhat?

During a test in my hardhat project on VSCode, I encountered the need to retrieve the metadata object of my NFT from a specified URL. Initially, I assumed I would have to import fs to read the URL. However, while typing out the method, I impulsively opted ...

The issue with Angular2 Material select dropdown is that it remains open even after being toggled

Exploring the world of Node.js, I am delving into utilizing the dropdown feature from Angular Material. However, an issue arises once the dropdown is opened - it cannot be closed by simply clicking another region of the page. Additionally, the dropdown lis ...

Navigating with multiple parameters in Angular 7 routing

I am currently facing an issue where I need to navigate to the same component with different parameters. Although I can subscribe to the params through the ActivatedRoute, I'm encountering a problem when trying to call router.navigate within the subsc ...

The process of exporting a singleton instance

I have created a new class called AppViewModel with a setting property set to 1: class AppViewModel { setting: number = 1; } export = AppViewModel; Afterward, I imported the class and instantiated it within another class named OrderEntry: import AppV ...

Shared validation between two input fields in Angular 2+

I have a unique task at hand. I am working on creating an input field with shared validation. The goal is to ensure that both fields are technically required, but if a user fills in their email address, then both fields become valid. Similarly, if they ent ...

Error: Unable to locate module with associated type definitions when utilizing Typescript in Next.js

Currently, I am working on a next.js project that I'm attempting to integrate typescript into. The structure of my folders is organized as follows: api aggregation.ts interfaces index.ts components Component1 index.js index.module.css ...

What is the best way to import and export modules in Node.js when the module names and directories are given as strings?

Here is the structure of my folder: modules module-and index.js module-not index.js module-or index.js module-xor index.js moduleBundler.js The file I'm currently working on, moduleBundler.js, is re ...

There seems to be an issue with a potentially null object in an Angular project while trying to view a PDF file

IDENTIFY THE ERROR: printContents = document.getElementById('print').innerHTML.toString(); ON LINE 4: print(): void { let printContents!: string; let popupWin!: any; printContents = document.getElementById('print').innerHTM ...

Can [] be considered a valid type in Typescript language?

I've come across this function: function stringToArray(s: string|[]): [] { return typeof s === 'string' ? JSON.parse(s.replace(/'/g, '"')) : s; } This function is functioning as expected without any type warnings. Bu ...

Could you provide an explanation of the styled() function in TypeScript?

const Flex = styled(Stack, { shouldForwardProp: (prop) => calcShouldForwardProp(prop), })<LayoutProps>(({ center, autoWidth, autoFlex, theme }) => ({ })); This syntax is a bit confusing to me. I understand the functionality of the code, b ...

Interpolating strings with Angular does not result in binding

My goal is to populate the template using string interpolation. However, when I attempt to reference the variable in the template, I receive the following error: core.js:1350 ERROR TypeError: Cannot read property 'status' of undefined. HTML ...

Errors may occur when utilizing TypeScript with the Context Provider API in React

I am in the process of developing a theme changer feature and I want to save the color chosen by the user in the context. However, when I try to pass data to the value prop of the Context.Provider, I encounter an error message TS2739: Type 'Readonly&l ...

Obtaining a return value from a function in Angular

After just starting to work with Angular, I am attempting to extract a value from a button displayed in the HTML using a function. `<button class="btn" id="btn-gold" (click)="value(9)" name="mybutton" value="9">` 9 I have also inclu ...

What is the best way to merge multiple nested angular flattening operators together?

I am facing a challenge in utilizing the outcomes of Observables from various functions. Some of these functions must be executed sequentially, while others can run independently. Additionally, I need to pass the result of the initial function to some nest ...

Unable to import the Node.js array in the import() file

I have encountered an issue while building an array path for the Router.group function. The parameter passed to Router.group is added to the end of the this.groupPath array, but when I check the array data within an import(), it appears to be empty. What c ...