Search code examples
csscapybaraellipsis

Capybara and text-overflow: ellipsis

For an element I have "text-overflow:ellipsis" css property set. And I'd like to test that it works :) using Capybara. E.g. I'd like to check that the end of my long text is hidden. Example html:

<div class="elli">Some long long long long long long text, and end.</div>

Example css:

.elli{
  text-overflow: ellipsis
  white-space: nowrap;
  overflow: hidden;

}

My capybara test (ruby):

visit my_url
problematic_text = find(:css, ".elli").text
assert_not_match /end/, problematic_text

I get error:

Minitest::Assertion:Expected /end/ to not match "Some long long long long long long text, and end.".

The ellipsis does work, and the text is cropped correctly (I can see that in the UI, in the browser, while test is running), so the problem is that when I get the text of the element, I get all of it, and not what is shown to the user. This sounds to me conflicting with the principle of element.text being only the displayed text. I would expect the text to be something like: 

 "Some long long long l..."

Anyone with similar problem? Is there a way I can test this?

Solution

  • Capybara depends on the text being returned by the drivers. The drivers are trying to meet the WebDriver spec definition for what text to return, which is currently defined at https://w3c.github.io/webdriver/#get-element-text . That spec states that it is intended to return the text "as rendered", however the bot.dom.getVisibleText given as the standard doesn't currently take text-overflow into account. This means that as of now there's not much Capybara can do about it, and there really isn't a way to directly test it.