How to detected truncated strings by the front end libraries?

Question

Here's a site I've encountered. Note that the "Welcome" string is truncated. My screen isn't narrow at all: it's more than 1000px wide.

The Chrome browser's inspect tool says that the "Welcome" string isn't truncated at all. It's in a <span>:

<span>Welcome</span>

To test the potentially truncated strings like this, I cannot just query the DOM. What are the tools and libraries available in the software testing industry to catch such undesirable modifications by the front end library?

Answer 1

You can check that the text-overflow is not ellipsis with WebDriver/Selenium.

In Python:

assert element.value_of_css_property("text-overflow") != "ellipsis"

in Java:

element.getCssValue("text-overflow")

https://seleniumhq.github.io/selenium/docs/api/dotnet/html/M_OpenQA_Selenium_IWebElement_GetCssValue.htm