isStable
Overview
Check whether the element’s bounding rectangle stays unchanged across two animation frames. Use the result to detect geometric movement, not arbitrary page activity.
Usage
element.isStable()
Parameters
This command has no parameters.
Result
Promise<boolean>: true when the compared bounding-rectangle properties are equal; otherwise false.
Limitations
Use an existing element in the active tab. A hidden document causes an error because animation frames do not run normally there. Opacity, colors and network activity can change without affecting geometry. A true result is a measurement at this moment, not a guarantee that all animations have finished.
Example
Set baseUrl to a local HTTP test site where / serves an HTML page. Run the example in a Testplane test file.
const assert = require("node:assert/strict");
it("isStable: check whether element geometry changes", async ({ browser }) => {
await browser.url("/");
await browser.execute(() => {
document.body.innerHTML = '<div id="box" style="width:40px;height:40px">Box</div>';
});
const box = await browser.$("#box");
await box.waitForExist();
assert.equal(await box.isStable(), true);
await box.execute(node => {
node.animate([{ transform: "translateX(0)" }, { transform: "translateX(200px)" }], {
duration: 500,
iterations: Infinity,
direction: "alternate",
});
});
try {
assert.equal(await box.isStable(), false);
} finally {
await box.execute(node => node.getAnimations().forEach(animation => animation.cancel()));
}
assert.equal(await box.isStable(), true);
});