Taiko: TypeScript support for button().exists() ?

[ghost]

NOTE: I'm a novice at Taiko, Javascript, Typescript. I hope I didn't get the details wrong.

Expected behavior

When using Taiko's TypeScript (TS) support according to the details in the 3rd section of this issue, it should be possible to use button().exists() incl. IntelliSense (e.g. intelliJ or vscode) -- just like for textBox().exists().

Actual behavior

When importing the taiko module via import * as t from 'taiko'; then the following error message is shown in the IDE/editor when trying to use t.button('whatever').exists(); :

TS2339: Property 'exists' does not exist on type 'SearchElement'.   Property 'exists' does not exist on type 'string'.

And, logically, after typing t.button('whatever').in the editor, the function exists() is not listed in the code completion popup (IntelliSense).

Currently, button().exists() can only be used if 'button' is imported into the test code via const { button } = require('taiko') in which case IntelliSense is not available.

Steps to reproduce

1. Create/edit your tsconfig.json according to the Taiko documentation:
   ```javascript {
   "compilerOptions": {
   // gauge-ts default configuration here
   // add experimental taiko TypeScript Type Definition folder to the project
   "typeRoots": ["node_modules/@types", "node_modules/taiko/types"],
   // use taiko types in the project
   "types": ["node", "taiko"]
   }
   }

2. In your test code import the taiko module via `import * as t from 'taiko';`.
3. In your IDE/code editor (e.g. intelliJ, vscode) type

- `t.textBox('whatever').` --> after typing the dot you should see a popup with possible methods, among them "exists".
- `t.button('whatever').` --> after typing the dot you should see a popup with possible methods but "exists" does not figure among them.
- `t.button('whatever').exists();` --> exists() should be highlighted as erroneous, hovering over it should display the above mentioned error message TS2339.

It works with textBox because it is typed as ElementWrapper which has exists() in its type definition.
It doesn't work with button because it is typed as SearchElement which has no exists() in its type definition.

### Versions

node: 14.7.0
taiko: 1.0.20
```

[NivedhaSenthil]

Yes this has to be fixed in the typings, Thanks for reporting. Will be great to have a PR raised.

[fmpanelli]

It looks like it is working correctly in ver 1.0.23

Please confirm.

[klhex]

@fmpanelli Yes, button.exists() is now available and works as expected when writing tests in Typescript, grazie! 😃 This issue can be closed therefore. 👍

However, I've noticed that when typing "button." now you also get at least three functions offered (IntelliSense) that are probably not meant to be used in connection with the button element: button.check(), button.uncheck(), button.isChecked(). (If you try to use them with "button" you immediately get an error "... is not a function".) As far as I can tell, the reason for this is that "button" is typed as "ElementWrapper" and ElementWrapper exports those functions.

Would it maybe make sense to define the class "ButtonWrapper" in types/taiko/index.d.ts and in its definition define/expose only those functions that are relevant for a button element (for example only those that are used in test/unit-tests/button.test.js) and then type button as ButtonWrapper instead of ElementWrapper?

[fmpanelli]

@klhex
You are correct. Thanks for telling me.
Actually it looks like the ElementWrapper interface defined in index.d.ts is wrong as it does not correctly represent the ElementWrapper class as defined in ./lib/elementWrapper/elementWrapper.js.
I am fixing that right away.

To be more precise, the problem also affects other methods such as select/deselect/isSelected

[fmpanelli]

@klhex

PR #1507 should fix the remaining problems ElementWrappers.

[NivedhaSenthil]

Closing as the issue is fixed