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?
I've been considering implementing a data provider that could store a duplicate of the backend data locally for quick access. I believe this concept is referred to as mirroring or something similar. Nevertheless, it must be synchronized and updated r ...
While exploring the Angular Material Button code, I came across something interesting in the @Component section - a declared inputs property. The description indicates that this is a list of class property names to data-bind as component inputs. It seems ...
I have a query regarding the choice of service layer to use. // 1 export class SomeService{ async create(dto:CreateSomeDto) {} } or // 2 export class SomeService{ async create(title: string, content: string) {} } It appears that most individuals opt ...
I'm working on customizing the tooltip in eChart v5.0.2 using Typescript, but I'm encountering an error related to the formatter that I can't seem to resolve. The error message regarding the function keyword is as follows: Type '(param ...
I'm currently working on a demo project using TypeScript and Express, but I've hit a roadblock that I can't seem to figure out. For this project, I've been following a tutorial series from this blog. However, after completing two parts ...
I have recently started diving into TypeScript with React and encountered a new concept called a .d.ts file. I am wondering if there is an established best practice for writing this file or if it's more of a developer preference. Can someone verify if ...
I'm currently developing an application and I'm facing a challenge in implementing Redux effectively in this particular scenario. Unfortunately, due to restrictions at my workplace, normalizing data is not an option. Let's consider the foll ...
My goal is to incorporate particles.js into the home screen component of my project. I have successfully installed "npm install ng-particles" and "npm install tsparticles." However, even after serving and restarting the application, I am unable to resolve ...
Greetings! I currently have a database with the following collections: db={ "category": [ { "_id": 1, "item": "Cat A", }, { "_id": 2, "item": "Cat B" ...
Here is a JavaScript array that I need help with: [{ Year:2000, Jan:1, Feb: }, {Year:2001, Jan:-1, Feb:0.34 }] I want to calculate the total of Jan and Feb for each entry in the existing array and add it as a new property. For example: [{ Year:2000, Ja ...
I'm currently working on an Angular 2 application where I am retrieving data from an API and receiving JSON in the following format. { "makes": null, "models": null, "trims": null, "years": null, "assetTypes": { "2": "Auto ...
Having trouble with Javascript code inside typescript. $.fn.select2.amd.require([ 'select2/data/array', 'select2/utils' ], function (ArrayData, Utils) { /* tslint:disable */ function CustomData ($element, opti ...
I attempted to integrate a d3 slider into my d3 chart in Angular 2. I installed the d3slider package using the command: npm install --save @types/d3.slider. However, when trying to access the method "d3.slider()", an error occurred stating that "property ...
Recently, I discovered how to create extensions in TypeScript: interface Array<T> { lastIndex(): number } Array.prototype.lastIndex = function (): number { return this.length - 1 } Now, I want to figure out how to make a getter from it. For exam ...
I'm currently working on a SAML SP implementation using the @node-saml/node-saml library. Despite creating the necessary source code, I am facing an issue with the SAML authentication not functioning as expected. Can anyone provide guidance on how to ...
I am currently working on simulating a mongoose model to facilitate unit testing for an express controller. To keep things simple, I've removed all unnecessary code and provided below the specific scenario I'm dealing with. Here's the snippe ...
I have a function below that needs to be passed into another component with the correct type definition for updateChannelInfo, but I am encountering an issue with the type showing incorrectly: const updateChannelInfo = (event: React.FormEvent<HTMLFormEl ...
Below is the middleware function that needs testing: export default function validateReqBodyMiddleware(req: Request, res: Response, next: NextFunction) { const { name, email }: RequestBody = req.body; let errors: iError[] = []; if (!validator.isEmai ...
I'm working on a feedback form that includes multiple questions with the same set of multiple choice answers. Here's how I've set it up: options: string[] = ['Excellent', 'Fair', 'Good', 'Poor']; q ...
i'm having trouble with a project in React JS that I received from another team. I'm not very confident in my skills with React JS, and I'm facing an issue where a certain part of the page is supposed to change to red when hovered over. Howe ...