0

when the text attribute is set to

  text-overflow: ellipsis;

the overflowed text will be displayed as "XX..." (see screenshot for more ) how can I find the overflowed text/element in webdriver?

thanks in advance

Screenshot of Overflowed text

iamsankalp89
  • 4,607
  • 2
  • 15
  • 36
vChen
  • 86
  • 6
  • what you have tried? – Abhay Dixit Sep 13 '17 at 09:13
  • I use xpath "//span[string-length(text()) > 2]" to find the elements which text length > 2. however, I'm testing multi-language app and " > x" rule didn't always apply to other languages. so I'm wondering if there is any better way to find the overflowed elements – vChen Sep 13 '17 at 09:19

2 Answers2

0

Probably the easiest/best way to do this is to use the JS innerText property, e.g.

driver.findElement(lcoator).getAttribute("innerText");

If I remember correctly, some browsers use textContent instead.

driver.findElement(lcoator).getAttribute("textContent");

This should get you the full text inside that element.

You could also pull innerHTML and parse it (if needed) or remove the text-overflow style from the element but these are harder/more complicated.

JeffC
  • 22,180
  • 5
  • 32
  • 55
  • Thanks for your reply. Yeah, I'm able to get the innerText using getAttribute("innerText"), but the extracted text is full text, I still don't know if they are overflowed or not... I'm testing multi-language app, if I use "text() > x" to check if the text is overflowed then I need to use different x for different language... is there any way to know if the text is overflowed or not? – vChen Sep 14 '17 at 02:37
  • I don't guess I understand what you are testing. Can't you just check if the last character is an ellipsis and then check innerText and make sure the length is not the same as the overflowed text? It sounds like you are going to end up verifying that the CSS attribute is working. – JeffC Sep 14 '17 at 03:03
-1

In case you have jQuery available in your project, you can write your own selector:

$.expr[':'].truncated = function (e) {
  // you *might* want to check if css property "text-overflow"
  // is set to "ellipsis" as well, to filter other truncations:
  return e.offsetWidth < e.scrollWidth;
};

and go from there:

items = $('.your-selector:truncated');

(heavily based on the answers here)

crusy
  • 1,424
  • 2
  • 25
  • 54