[Question] How to check that only a part of the text is visible?

Hi team and community. Here is my use case: our component should truncate the header text if it’s too long.

I’m trying to check this and don’t understand how to do it exactly. What I tried: innerText, textContent, text selector, isVisible method.

Could you please suggest how to do this? For example, if I have <h2>the really long text</h2>, how to check that only “the really long” value is visible?

Thanks!

[rwoll]

I’ll double check with the team to see if I’m missing something or if there is another suggestion.

There’s no convenient/straight-forward built in API in any of the browsers, so I think a screenshot is your best approach for this case at the moment. 😢

If you’re down for some exploration, you might be able to hack something together with the Range API, but I haven’t thought through its limitations (nor complexity dealing with more than a very simple, minimal example):

(Notice that within a single example, if you compare the <p> width with the selection, it would not quite give a correct answer.)

<style>
  p {
    white-space: nowrap;
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

<p>this is example text</p>

<div id="debug"></div>

<script>
  // Easily show debug output
  const debug = document.getElementById("debug");
  const addLogLine = (text) => {
    const line = document.createElement('div');
    line.style.fontFamily = 'monospace';
    line.innerText = text;
    debug.appendChild(line);
  };

  const p = document.getElementsByTagName("p")[0];
  addLogLine(`${p.getBoundingClientRect().width}: width of <p>`);

  // Iterate over the p's text to see each range's width
  const range = document.createRange();
  const text = p.firstChild;
  range.setStart(text, 0);
  for (let i = text.textContent.length; i >= 0; i--) {
    range.setEnd(text, i);
    addLogLine(`${range.getBoundingClientRect().width}: width of: "${range.toString()}"`);
  }
</script>

[rwoll]

I wanted to check everything I can using the functional approach (to save the number of screenshots in Percy).

This is a good instinct! However, in this specific case, I think the screenshot might be best since I don’t believe the browser exposes an API that says which part of the text has/hasn’t been elided or clipped (assuming you’re using CSS to do the overflow handling).

I’ll double check with the team to see if I’m missing something or if there is another suggestion. (cc: @pavelfeldman: if this can’t be done nicely today, without using a screenshot, this could be an non-screenshot assertion capability for layout/VRT scenarios)