Passer au contenu principal

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
NameTypeDetails
options
optional
WaitForOptionswaitForStable options (optional)
options.timeout
optional
Numbertime in ms (default set based on waitforTimeout config value)
options.reverse
optional
Booleanif true it waits for the opposite (default: false)
options.timeoutMsg
optional
Stringif exists it overrides the default error message
options.interval
optional
Numberinterval 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();
});

Welcome! How can I help?

WebdriverIO AI Copilot