How to test for an element's position on the page in cucumber?

I’m writing cucumber examples that are testing the position of elements on the page (FYI, we’re using the PageObject gem - really nice and running on the iOs/Android simulators, all being driving through Selenium).

I have steps like the following which are testing the position of elements on the page relative to the viewport as well as the position relative to other elements… For example:

Then I should be scrolled up to the color header

Then I should see the 'please select a color' message displayed above the color header at the top of the visible screen area

I know how to identify the specific elements (e.g., ‘color header’) using xpath, but I don’t know how to reference the ‘top of visible screen area’ or how to verify that one element is ‘above’ another.

What’s a good way to handle this?

Edit. Think I found the answer… every element has a ‘location’ method which returns a “WebDriver::Point” object containing the x and y positions of that element (not documented, but I believe it’s relative to the top of the screen). so if it’s visible and the y position it’s at the top of the page. And the y position of two elements can be compared to which one is ‘above’ the other.

Is it important to test this to this level of detail? I think this way lies madness…

1 Like

I would strongly advise you against testing the views to this extent. Your tests will be dependent on style (which has a tendency to change a lot), and therefore be very brittle.

If this is JS behaviour you want to test, then maybe test that with a JS framework.

Yah; I know what you mean… but the product manager rules in this case. At least I learned how to do it :=)

thanks for the feedback!

Thanks to everyone; went back to the project manager and devs and we decided: no automation for any visual elements of the application. W00t!

1 Like