RSpec and Capybara: How to get the horizontal and vertical position of an element

Question

I have added visually hidden jump links to my website, that appear when they are focused (similar to e.g. GitHub, just press Tab once on the home page).

I want to test this behaviour with Capybara. I can't check for e.g. 'visibility: true/false', because the links are not really hidden (otherwise screenreaders would't see them), but only moved out from the viewport by absolute positioning. When they are focused, they are placed at their original position in the viewport.

So I guess I have to check the X and Y coordinate, but Capybara doesn't seem to offer a native method for getting them? Is this true? And if so, how would I get them for e.g. an element '#jump_to_content'? By executing some JavaScript?

Update

I found some inspiration here: https://content.pivotal.io/blog/testing-accessibility-with-rspec-and-capybara

But this doesn't seem to work for my configration:

link.native.location
NoMethodError: undefined method `location' for #<Capybara::Poltergeist::Node tag="a">

Answer 1

You are correct, Capybara does not offer a native method for getting an element's position in the page, but if you have access to jQuery you can use Capybara's page.evaluate_script method to easily determine an element's position. It would look something like this:

page.evaluate_script("$('.menu > div:nth-child(1)').offset().top")

The .offset() method allows us to retrieve the current position of an element relative to the document. Contrast this with .position(), which retrieves the current position relative to the offset parent

Just note that

While it is possible to get the coordinates of elements with visibility:hidden set, display:none is excluded from the rendering tree and thus has a position that is undefined.

Answer 2

Using capybara's page.evaluate_script will allow you to execute some JavaScript and create an assertion off the return value:

expect(page.evaluate_script("document.querySelectorAll('a#jump-to-content')[0].style.top;")).to eq('-8000px')