Capybara and text-overflow: ellipsis

Question

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?

The html element still actually contains all of the text. It's only a styling option that the text gets cropped. You could also set the visibility to none and still get the text of that node. You will need to alter your test. — Nico O, Aug 01 '18 at 10:33
`text-overflow: ellipsis` only works as a mask. The text will still be there and it will be shown in other renders as JS, ruby or any other. — Jithin Raj P R, Aug 01 '18 at 10:34
@Nico O, what you say is not correct, if I set visibility: hidden, the text is no longer found. For example if I have
aaa
bbb
and class b has visibility: hidden, then the text of aaa is "aaa", not "aaabbb" — Jeni, Aug 01 '18 at 10:43
@Pete, it is not css question, it is Capybara+css question. My class does have overflow hidden and white-space nowrap, but it's not relevant to my question, so I missed it, I will edit my question. — Jeni, Aug 01 '18 at 10:44
@Jeni this depends on how capybara works. I was referring to the document source code, which will still contain the full and unmodified text. — Nico O, Aug 01 '18 at 10:46
@Nico O, of course it depends on Capybara, this is what my question is about. I am not interested in getting the text with JS. — Jeni, Aug 01 '18 at 10:48

score 1 · Accepted Answer · answered Aug 01 '18 at 16:11

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.

Capybara and text-overflow: ellipsis

1 Answers1