@BorisOsipov although you are right, I feel like we can already ship it as it is as it seems like a bit of an edgecase to use this on a inactive tab. What do you think?

@erwinheitzman Sure we can. But! It seems easy to add code like this

if(document.visibilityState === 'hidden') {
	throw Error("Hey man, you are using isStable for inactive tab, don't do it dude!")
}

and forget the case forever. Instead of waiting to see when someone will come to Discord and ask about it in the next few years.

I thought so but it's actually not that easy as the error doesn't seem to bubble up correctly.

Trying some workarounds for it.

@erwinheitzman I have also played with this in another tool I am a committer of. My version was

browser.execute(script, arguments)

function fn (element) {
  if (document.visibilityState === 'hidden') {
    throw Error("Blablabla")
  }

  return new Promise((resolve) => {
    window.requestAnimationFrame(() => {
      const rect1 = element.getBoundingClientRect();
      window.requestAnimationFrame(() => {
        const rect2 = element.getBoundingClientRect();
        if (rect1.x === rect2.x &&
          rect1.y === rect2.y &&
          rect1.width === rect2.width &&
          rect1.height === rect2.height) {
          resolve(false);
        } else {
          resolve(true);
        }
      });
    });
  });
}

It also doesn't use modern JS features like for (const prop in previousPosition), and probably work in old browsers either.
You may find it useful.

@erwinheitzman I have also played with this in another tool I am a committer of. My version was

browser.execute(script, arguments)

function fn (element) {
  if (document.visibilityState === 'hidden') {
    throw Error("Blablabla")
  }

  return new Promise((resolve) => {
    window.requestAnimationFrame(() => {
      const rect1 = element.getBoundingClientRect();
      window.requestAnimationFrame(() => {
        const rect2 = element.getBoundingClientRect();
        if (rect1.x === rect2.x &&
          rect1.y === rect2.y &&
          rect1.width === rect2.width &&
          rect1.height === rect2.height) {
          resolve(false);
        } else {
          resolve(true);
        }
      });
    });
  });
}

It also doesn't use modern JS features like for (const prop in previousPosition), and probably work in old browsers either. You may find it useful.

Thanks, I know I know but the problem is that it works but the the waitForStable command does not fail when the isStable command throws so I am looking into why it's not catching the error as I expect it would

Ahh get it.

Now I understand why you want to "ship it as is". It seems to make sense.

@BorisOsipov needed to early return to immediately stop the command after the first attempt and managed to get it to work after some fiddling 👍

What about waitFor('displayed')?

What about waitFor('displayed')?

Let me raise a separate issue for this where we can discuss all the details.

@christian-bromann there seems to be a difference in CI and my machine in how the quotes are handled but the snapshot is identical to that of similar commands, do you see anything I missed/did wrong?

Finally a green build lol

Do I understand correctly, if an element is stable for 5 frames in a row and then starts to change, this method (wait for stable) will not work?

@viktor-silakov detecting the "stability" of an element is almost impossible to get right all the times. This command is a first approach but there are plenty of use case where this might not work. If you have an example where this command fails, please provide a reproducible example and we are happy to take a look.