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

Testing
1

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.

2

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

1 Like
3

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.

4

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!

5

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