Supercharged scroll before a click event
It is a good practice to check whether an element is on screen before performing a click. This method returns true if the element is in the viewport:
export async function isElementInViewport(element: WebdriverIO.Element): Promise<boolean> {
let isInViewport = await element.isDisplayedInViewport();
return isInViewport;
} Using this method, we can optimize our code to scroll an element only if it is off-screen before performing the click event. However, there is a caveat: if an element is moving while WebdriverIO is attempting to click it, it may click the wrong element! So, we need another function to tell us when the element stops moving:
export async function waitForElementToStopMoving(element: WebdriverIO.Element, timeout: number = 1500): Promise<boolean> {
let rect = await element.getRect();
pause (100);
let isMoving = (rect !== await element.getRect())
...