# waitForClickable

Wait for an element for the provided amount of milliseconds to be clickable or not clickable.

info

As opposed to other element commands WebdriverIO will not wait for the element to exist to execute this command.

This command is only available for desktop and mobile browsers, not for native mobile apps.

## Usage[​](#usage "Direct link to Usage")

```
await $(selector).waitForClickable({ timeout, reverse, timeoutMsg, interval })
```

## Parameters[​](#parameters "Direct link to Parameters")

| Name                                 | Type             | Details                                                                                                  |
| ------------------------------------ | ---------------- | -------------------------------------------------------------------------------------------------------- |
| `options`<br />*optional*            | `WaitForOptions` | waitForEnabled options (optional)                                                                        |
| `options.timeout`<br />*optional*    | `Number`         | time in ms (default set based on [`waitforTimeout`](/docs/configuration.md#waitfortimeout) config value) |
| `options.reverse`<br />*optional*    | `Boolean`        | if true it waits for the opposite (default: false)                                                       |
| `options.timeoutMsg`<br />*optional* | `String`         | if exists it overrides the default error message                                                         |
| `options.interval`<br />*optional*   | `Number`         | interval between checks (default: `waitforInterval`)                                                     |

## Example[​](#example "Direct link to Example")

waitForClickable.js

```
it('should detect when element is clickable', async () => {
    const elem = await $('#elem')
    await elem.waitForClickable({ timeout: 3000 });
});
it('should detect when element is no longer clickable', async () => {
    const elem = await $('#elem')
    await elem.waitForClickable({ reverse: true });
});
```

## Returns[​](#returns "Direct link to Returns")

* **\<Boolean>** **`return`:** `true` if element is clickable (or doesn't if flag is set)