When using the addCommand function to add a new command, I encountered an error message that states:
[ts] Property 'WaitForElementsAmount' does not exist on type 'Client<void>'.
Here is an example of the code snippet I used:
browser.addCommand("test" , () => {console.log("test"); })
browser.test();
The last line produces the error mentioned above.
Despite the error message, the JavaScript code is correct and the test runs successfully. How can I resolve this issue?
I spent a good part of today grappling with this issue, but I finally figured it out.
If you are working with @types/webdriverio, the key is to extend the WebdriverIO.Client interface with your custom command declaration. It's best practice to define your custom command in a .ts file. Here's an example of how to do it:
declare global {
namespace WebdriverIO {
interface Client<T> {
doCustomThing: typeof doCustomThing;
}
}
}
function doCustomThing() {
console.log("test");
}
//now you can use both of these
browser.addCommand('doCustomThing' , doCustomThing)
browser.doCustomThing();
If incorporating custom commands into typescript proves challenging, you can declare them separately in a .d.ts file like so:
declare namespace WebdriverIO {
interface Client<T> {
doCustomThing(): void;
}
}
However, by going this route, you'll need to manage separate declaration and implementation files, ensuring they remain aligned. This approach should be reserved for cases where keeping the implementation in plain JS is unavoidable.
These steps were verified using Typescript 2.6.1, webdriverio 4.9.10, and @types/webdriverio 4.8.6.
Note: In the first set of instructions, explicit mention is made that you are altering the definition of the WebdriverIO namespace in the global context. Conversely, in the second set, you're implicitly operating within the global scope. The distinction arises from the first being enclosed in a module, while the second isn't categorized as such due to its lack of import or export statements. For more details, refer to https://www.typescriptlang.org/docs/handbook/modules.html.
Initially, there seems to be a minor error in your code - you forgot to close the browser.addCommand(). It should look something like this:
browser.addCommand("test", () => {console.log("test"); });
browser.test();
Furthermore, I believe the mistake might have been a simple typo while typing out the code. The correct solution would be to refer to this helpful link for more information on declaring and implementing custom commands in WebdriverIO: Where do I add custom commands in WebdriverIO with wdio testrunner?
Objective The task may seem lengthy, but it's straightforward! Currently, I am utilizing Angular Universal for Server-Side Rendering (SSR) by following a tutorial. The Universal/express-engine has been installed, main.js is generated in the dist/pro ...
Currently using Angular2+ and in need of passing a content component to a generic modal component. Which Component Should Pass the Content Component? openModal() { // open the modal component const modalRef = this.modalService.open(NgbdModalCompo ...
I’m encountering a problem when utilizing getStaticPaths and getStaticProps to create an on-demand SSG for a sharing page. My setup involves Next v12.1.0 and React 17.0.2. After building a specific /[id] page, I can retrieve the data but the HTML output ...
I'm attempting to pass the prop of todos just like in this codesandbox, but encountering an error: Type '{ todos: string[]; }' is not assignable to type 'IntrinsicAttributes & string[]'. Property 'todos' does not ex ...
Recently, I've found myself stuck in a puzzling predicament. For the last couple of weeks, I've been trying to troubleshoot why the types are getting lost within my projects housed in a monorepo. Even though my backend exposes the necessary types ...
I am searching for a method to assign a name string within a class and utilize it in the abstract class at the constructor level, without the need for a function. Opening up the constructor is not an option due to using typedi. You can access the playgrou ...
Is there a correct way to insert a new line for content in a modal? I have this simple string: 'Please check the Apple and/or \nOrange Folder checkbox to start program.' I placed the '\n' newline character before "Orange," e ...
I am currently facing an issue with the BehaviorSubject where it emits a value for every subscription. This means that if I have, for example, 2 subscriptions to this.projectService.projectState$ streams using methods like async or tap, the projectState$ e ...
https://i.sstatic.net/0YcS9.png What steps should I take to resolve this particular type of error issue? My attempt at passing a custom type did not yield successful results. ...
Currently, I am working on understanding the new workflow for "_references.ts" and I feel like there is something missing when it comes to using multiple files without external modules in order to produce correctly ordered ".js" code. To start with, I took ...
I encountered an error while working on my Angular project that incorporates both front-end and back-end development with Python Flask. Even though the page updates correctly, a database-related error is being displayed in the console. Below are the snippe ...
Currently, I'm working on implementing the React context API in my NextJS e-commerce application to manage a user's shopping cart. The challenge I'm facing is how to retrieve the cart contents from MongoDB to initiate the cart context. This ...
I recently came across an object that looks like this: const myObject = { 0: 'FIRST', 10: 'SECOND', 20: 'THIRD', } My goal is to define a type using the values from this object, similar to this: type AwesomeType = &apos ...
For some time now, I have been grappling with a CSS issue. I am working with a table that has 3 columns displaying departures, times, and situational text for scenarios like delays or cancellations. However, as evident from the images, the alignment of th ...
Currently, I am facing a challenge where I need to loop through an array of objects, check a specific property of each object, and if it meets certain criteria, make an HTTP request to fetch additional data for that object. The code snippet below represen ...
When working with JSDoc, achieving the equivalent of Typescript's computed property names can be a challenge. In Typescript, you'd simply define it like this: class Test { [key: string]: whatever } This syntax allows you to access these comput ...
export type ExtractType<T extends Array<{ name: Array<string>, type: keyof TypeMapping }>> = { [K in T[number]['name'][0]]: TypeMapping[Extract<T[number], { name: K }>['type']] } export class CommandLineParse ...
Attempting to customize the styling of my react-dates DayPickerRangeController in Typescript using react-with-styles and Aphrodite. I have implemented the following code, mirroring the code found at https://github.com/airbnb/react-dates#interfaces: const ...
I have a collection that stores languages and their boolean values. My goal is to automatically set buttons to be clicked (active) for each language with a true value in the collection. Whenever a different language is selected by clicking on its respect ...
I've been attempting to verify the GET status using this particular piece of code. Regrettably, I keep encountering an error message stating "apiRequestContext.get: connect ECONNREFUSED ::1:8080". If anyone has any insights or suggestions on how to re ...