Selenium Webdriver - Java - Verify partial text display with three dots at the end

Question

The following text is displayed in a webpage.

The HTML code is as follows -

<tr>
  <td valign="middle" align="left">
    <div 
      class="ellipsis" 
      style="max-width: 425px; display: inline-block;">
      HKCR\abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop
   </div>
 </td>

Using Selenium WebDriver with Java, I want to check that only partial text is displayed with 3 dots at the end. From the HTML code, I'm only able to see the full text

HKCR\abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnop

instead of partial text with 3 dots at the end. When I wrote the following code, it outputs the full text instead of partial text with 3 dots.

String text1 = webDriver.findElement(
  By.xpath(".../tr/td[1]")
).getText();

So, I'm confused as to how to verify that only partial text is actually displayed. Can someone please help?

Answer 1

The issue here is that Selenium detects "visibility" in a way that doesn't capture text overflow hidden by ellipsis. Visibility is looking the absence of a set of criteria, listed here in the webdriver specs, and the CSS property/value "text-overflow: ellipsis" is not one.

You can still test that the elements on your page are using this CSS property. Use Selenium to verify that the divs you want have the CSS text-overflow value you want them to have with .getCssValue(), for example,

String cssvalue = Login.driver.findElement(By.xpath(".//*[@id='ccleaner_options_exclude_div']/table/tbody/tr/td/div")).getCssValue("text-overflow");

and check that the value is "ellipsis". As long as that value is set, in theory, the browser should be truncating the text and adding an ellipsis before it overflows!