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?
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.
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.
If you have jQuery, that will work too.
And hey, if you find a gold solution out there, please post a link here!
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.
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!
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.
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.
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?