Z-index and Stacking Contexts (was: I want to verify an element is on top of another element)

Archive
,
1

Hi everyone,

So I want to verify if an element is stacked on top of another element.
The z-index for these elements are different; however, the z-index is in the external CSS file. This CSS is not on the html webpage. Any solution ideas?

Thanks everyone for your help : )

2

I think I found a solution through the keyword “getCSSValue” :+1:t4:

3

Sorry to have to tell you this, but testing z-index “blindly” is not the solution.

At least, the way you have defined the problem it cannot be solved by interrogating computedStyle for the current z-index (which is what I hope Katalon/Selenium is doing in getCSSValue). What you probably want to do is find out if two elements overlap and determine which one of the two is on top.

z-index

To understand z-index you really need to understand stacking contexts. I couldn’t even get started to explain this concept here… it would take me way too long and I’d probably confuse you (and me!). Go to your favorite search engine (which I hope is not google) and enter “stacking context”. Make certain it’s a lengthy page. Anyone explaining stacking contexts (and therefore z-index) in 5 or 6 paragraphs is not doing the subject (or you) justice.

I’ll just say this: you need to understand the surrounding HTML and any Javascript that may be executing that could change or introduce a new stacking context. If the page you’re reading doesn’t explain that stuff, find another page.

Your solution will be in JavaScript. There is nothing in Selenium (and therefore Katalon) that can do this – not unless you want your code to be unnecessarily long and cumbersome.

If you have jQuery, that will work too.

And hey, if you find a gold solution out there, please post a link here!

Good luck.

UPDATE (2020/07/26)

Related : https://abandonedwig.info/blog/2020/07/03/css-painting-order.html

4

hmm, I see. I have a solution below. Please correct me if I am wrong in solution or terminology.

Assume the following webpage exist

Goal: Verify the element 1 is above element 2.

In the following case, we would need to compare the z-index of Div1 and Div2 assuming the both divs create a stacking context. We would do this instead of comparing the z-indexes of element1 and element2.

I did this by getting the z-index of Div1 and Div2 using getCSSValue keyword.

Then assert (Div1_z_index > Div2_z_index) == true

Is that the correct way to get the solution?

5

No. Or “yes, if you’re lucky”.

Now, pay attention, this is the key point…

Clear?

If they happen to share the same SC, then sure, you’re fine and good to go. But if that surrounding HTML changes and introduces a different SC, you’ll run into problems (the kind that are extremely hard to debug).

Reason I’m sharing this is: there’s a ton to know about SCs if you’re a developer, and if you’re a tester, you need to know what to steer clear of. z-index seems so simple, but believe me, you don’t want to trust it for robust testing (i.e. tests that stand the test of time). Your problem is:

1 - You’re just the tester and you can’t control the HTML
2 - Someone else controls the HTML. They can break you easily.

So there you have it. It’s only as robust as how much control you have over understanding and using z-index correctly. Take a look at this list of things to worry about and lose sleep over:

And again, if you find any GOOD resources (perhaps even with a focus on testing?) PLEASE post back!

Good luck. You’ll need it.

6

Mozilla’s/MDN’s take on the topic:

Using z-index appears extremely easy: a single property, assigned a single integer number, with an easy-to-understand behaviour. However, when z-index is applied to complex hierarchies of HTML elements, its behaviour can be hard to understand or predict. This is due to complex stacking rules. In fact a dedicated section has been reserved in the CSS specification CSS-2.1 Appendix E to explain these rules better.

Browsers support a hierarchy of stacking contexts, rather than a single global one. This means that z-index values are often used incorrectly, and arbitrarily high values get set.

7

Hi Russ,
Thanks for the information links.
Yes, what you said is clear.

For some reason, my webpage example did not appear the first time. It appears below. I replace <> with []. I tested it and this site gets confused if you put <> like HTML at times. Sometimes it is ok.
[body]
[Div]
[Div1]
[Element1]
[/Element1]
[/Div1]

 [Div2]
    [Element2]
    [/Element2]
[/Div2]

[/Div]
[/Body]

So in my particular example, Div1 and Div2 share a stacking context because they are descendants of Div. My statement is correct, right?

Div also has a “style” value equal to “position: relative;”. I believe this style value creates a stacking context as well?

8

I don’t know.

I don’t know.

I promise you, I am not messing with you, I honestly don’t know. You’re asking me to to go against what I already told you – this is stuff I steer clear of… for all the (good) reasons I mentioned.

Now. Here’s an idea. I’m not saying it’s a good idea, just it’s an idea. If you like it, try it and see…

WebDriver will throw an exception if you try to click an element that is obscured by another. Why not use that to your advantage?

try {
  // see if X is obscured by Y
  WebUI.Click(X)
} catch(Exception e) {
  // check e.message and do something
}

That’s as much as I’ll say. I really can’t advise you on z-index and SCs.

9

Hi Russ,
Thanks for your input. For my scenario I should be good to go because I verified my logic with the devs in my company. So it should be good. Thanks again for your advice!

1 Like