0

I need to know whether we can find the existence of a pseudo element like ::after and ::before

My aim is just to return true or false if it is present.

However it cannot be done using:

browser.driver.findElements(by.id('id')).size != 0

or

return !driver.findElements(by).isEmpty();

becasue they are psuedo elements and cannot be located through any CS or XPATH locators

Here is my HTML having ::after

<div class="parent-class">
        <span class="child-class">Archive
        ::after
        </span>
        ::after
      </div>

Here is my HTML without having ::after

<div class="parent-class">
        <span class="child-class">Archive
         ::after
        </span>
      </div>

Note: I need to verify only the ::after in DIV tag but not in SPAN tag

YouKnowWho
  • 15
  • 2
  • 9

1 Answers1

0

Yes, the pseudo-elements cannot be located by paths or CSS locators. However, as an alternative, you can extract the inner HTML of the parent element and validate if it contains the "::after" text.

There are two ways of doing this. For the above scenario, 

WebElement element = browser.driver.findElement(By.className('parent-class'))
String innerHTMLText = element.getAttribute('innerHTML');
if (innerHTMLText.contains("::after")){
   // Bingo !!
}

Or else

WebElement element = browser.driver.findElement(By.className('parent-class'))
JavascriptExecutor js = (JavascriptExecutor)driver;
String innerHTMLText = js.executeScript("return arguments[0].innerHTML;", element);
if (innerHTMLText.contains("::after")){
   // Bingo !!
}

EDIT 1

If you need to verify if only the div tag is having the pseudo-element you can get the span tag's HTML, get parent tag's HTML, remove span tag inner HTML from parent tag's HTML. Verify. 

String divHTMLText = browser.driver.findElement(By.className('parent-class')).getAttribute('innerHTML');
String spanHTMLText = browser.driver.findElement(By.className('child-class')).getAttribute('innerHTML');
// replace all the whitespaces first for good measure
divHTMLText = divHTMLText.replaceAll("\\s+","")
spanHTMLText = spanHTMLText.replaceAll("\\s+","")
// replace the child html from parent's html with empty. which leaves us with the parent html code.
String divOnlyHTML = divHTMLText.replace(spanHTMLText, "");

if (divOnlyHTML.contains("::after")){
   // Bingo !!
}
debugger89
  • 2,108
  • 2
  • 14
  • 16
  • What if the HTML looks like this
    "Archive" ::after ::after
    Now, I need to check ::after only for div but not span     – YouKnowWho Apr 29 '20 at 09:29
  • are you sure that String divHTMLText = browser.driver.findElement(By.className('parent-class')).getAttribute('innerHTML'); gets the whole inner HTMl along ::after. I guess no because, when I tried to print it on console it printed without the pseudo elements. There is no ::after in the console when I printed – YouKnowWho May 04 '20 at 08:59
  • I provided 2 methods to get the HTML code. did you try the 2nd option? Using JavascriptExecutor? – debugger89 May 05 '20 at 11:12
  • This doesn't work! `element.getAttribute('innerHTML')` returned string doesn't contain before or after. `js.executeScript("return arguments[0].innerHTML;", element);` returns Object, not a String! – Prophet Jun 13 '21 at 14:57