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: it's best to disable animations instead of using this command
Usage
$(selector).waitForStable({ timeout, reverse, timeoutMsg, interval })
Parameters
| Name | Type | Details |
|---|---|---|
optionsoptional | WaitForOptions | waitForStable options (optional) |
options.timeoutoptional | Number | time in ms (default set based on waitforTimeout config value) |
options.reverseoptional | Boolean | if true it waits for the opposite (default: false) |
options.timeoutMsgoptional | String | if exists it overrides the default error message |
options.intervaloptional | Number | interval between checks (default: waitforInterval) |
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();
});
