# waitForStable

Wait for an element for the provided amount of milliseconds to be stable (not animating). Returns true if the selector matches at least one element that is stable in the DOM, otherwise throws an error. If the reverse flag is true, the command will instead return true if the selector does not match any stable elements.

**Note 1:** it's best to disable animations instead of using this command

**Note 2:** this command is only available for desktop and mobile browsers, not for native mobile apps.

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

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

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

| Name                                 | Type             | Details                                                                                                  |
| ------------------------------------ | ---------------- | -------------------------------------------------------------------------------------------------------- |
| `options`<br />*optional*            | `WaitForOptions` | waitForStable 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`)                                                     |

## Examples[​](#examples "Direct link to Examples")

index.html

```
<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
        }
        #has-animation {
            animation: 3s 0s alternate slidein;
        }
        @keyframes slidein {
            from {
                margin-left: 100%;
                width: 300%;
            }

            to {
                margin-left: 0%;
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div #has-animation></div>
    <div #has-no-animation></div>
</body>
```

waitForStable.js

```
it('should detect that element is instable and will wait for the element to become stable', async () => {
    const elem = await $('#has-animation')
    await elem.waitForStable({ timeout: 3000 });
});
it('should detect that element is stable and will not wait', async () => {
    const elem = await $('#has-no-animation')
    await elem.waitForStable();
});
```

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

* **\<Boolean>** **`return`:** true if element is stable
