Inspect element attribute state in Dev Tools?

Developer Tools
#1

We make use of Firefox developer and the dev tools when automating tests (using Browser in Robot Framework). Browser is based on Playwrite and actionability is based on elements and their state. https://playwright.dev/docs/actionability
Some of these states are quite self evident, however others like Stable are not readily apparent from inspection.
We’re looking for a method to inspect DOM elements (usual right click, inspect element, as we do to check our css or xpath selectors) and look at it’s state at the given moment of inspection.

image
image863×768 36.4 KB

Can this be achieved in Dev Tools currently?

#2

Hi there!

stable seems to be really specific to playwright. From what I could gather, Playwright is polling the bounds of elements to know if it moved between different animation frames. This sounds quite heavy, and it seems they only do that if users really want to check the stable state of the element.

We don’t have any feature similar to this in DevTools at the moment. I’m not quite sure how useful it would be in regular devtools, because you usually see whether the element is moving or not.

But it should be relatively easy to write a JS helper to check if a given element is “stable”. Something like

async function isElementStable(el) {
  const boundingClientRect = JSON.stringify(el.getBoundingClientRect());
	return new Promise(r => {
    requestAnimationFrame(() => {
  		r(boundingClientRect == JSON.stringify(el.getBoundingClientRect()))
  	})
  });
}

Should be relatively close to what Playwright is checking, but to be refined.

Is there any other state you have trouble computing?

#3

Thanks for getting back so quickly. It’s actually a bit worse than that for Stable itself because the documentation is an unhelpful infinite loop!

image
image878×539 29.1 KB

In terms of other states we wish to examine, that really could be any of them. Our waiting strategy in tests is predominately around stable, but in some cases, for some elements that isn’t appropriate. We can return the possible element states directly in Browser using Get Element States however that is only potential states. We do make use of this, currently, and work through each found state in turn to check suitability.

our need is specific in that if we’re manually walking through test steps to decide on a verification state, we really need to be able to examine the current state of any given element at that point in time, in order to create the wait on appropriate element attribute state.

I’ve looked around on Stack Overflow and have previously asked on the Robot Framework slack, but no-one seems to know of a means of direct interrogation like this.

I’m a bit surprised at that actually, because given the uptake of Browser / Playwright, I’d have thought it was a more commonly encountered issue.

#4

Indeed, this table seems confusing, but the definition of Stable at https://playwright.dev/docs/actionability#stable looks a bit more helpful. I think the snippet I posted above + a visibility check should be enough?

For the other states, they all seem relatively straightforward to test using JavaScript. Eg for attached/detached you can use https://developer.mozilla.org/en-US/docs/Web/API/Node/isConnected, visible/hidden use getBoundingClientRect + check the style of the element.

Maybe contributors from Playwright or Robot framework can provide helpers so that you can easily check those states against a test page? Or even provide a DevTools extension that helps to do that.