0

In my Java Selenium automation project I have to know about some web elements if they are containing pseudo elements or not.
I already saw this question and the answer there simply doesn't work.
This looks better, however in my situation I already have a web element and I need to get it's content while in that answer the JavaScript receives a locator.
I absolutely do not familiar with JavaScript that's why I'm asking:
So, given a Selenium WebElement element. How can I know does this element contain pseudo element or not?
On a screenshot there is an element with red dot - the ::after pseudo element while other elements doesn't have such red dot.
This is what I got from the dev tools as outerHTML for element containing the after pseudo element. i even can't see it there and it is just similar to other elements there who doesn't contain pseudo elements.

<div workspaceid="49426bdc-59fe-44ec-82ea-8f567407c04f" data-test-id="9B1qjz0kWcfO" class="list-item ListItem__ListItemComponent-bsdtqz-0 dgogUS RoleItem-sc-1n184cw-0 jyfJwu role-item"><p class="text-component Texts__GenericText-sc-1dju4ks-0 czkGYX name p">9B1qjz0kWcfO </p></div>
Prophet
  • 32,350
  • 22
  • 54
  • 79
  • Is it sufficient to check only for the pseudoelements `::before` and `::after`? Or do you need it to work for any text in a pseudo element? – C. Peck Jun 13 '21 at 16:03
  • Also could you please paste some sample HTML, maybe like what's in your screenshot, and/or the outerHTML of an element containing a pseudo element for me to test against? – C. Peck Jun 13 '21 at 16:11
  • All what I want is to check if some specific element contains `::after` in it or not. – Prophet Jun 13 '21 at 16:28
  • Why can't you just grab the outerHTML and check whether it contains `::after`? Why do you need JavaScript at all? – C. Peck Jun 13 '21 at 16:31
  • See the outerHTML I pasted here. it doesn't contain any pseudo elements. Or it's just me who can't see them or doesn't know how to get them? I indeed do not know JS at all... – Prophet Jun 13 '21 at 16:34
  • 1
    Oh that is interesting... I will think and experiment on this it's an interesting problem – C. Peck Jun 13 '21 at 16:38
  • The same is with innerHTML, it doesn't contain those pseudo elements – Prophet Jun 13 '21 at 16:42
  • What is the use case here ? Why do you wanna grab `::after` – cruisepandey Jun 13 '21 at 17:03
  • The left column contains "roles". In case some specific role is incomplete it presents a red dot indicator. In my tests I want to randomly select some role but sometimes this must be a complete role. I can get a random element from a list so it will return a random web element. Now I need to check if that web element contains `after` pseudo element - in this case I will try getting another random element from the list until I get one without `::after` (always there are complete roles there) or continue flow if the element doesn't contain the `::after` pseudo element. – Prophet Jun 13 '21 at 17:13

1 Answers1

1

You can use a WebElement as an argument instead of locator in the JavascriptExecutor. Using getComputedStyle you can get all css properties for the pseudo-element. Check CSS in devtools, find the red dot css property and then you can check it.

JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;

// JavaScript to get any css property include pseudo-element. 
// Arguments is an array of parameters passed to the executeScript method (standart Selenium functionality)
String js = "return window.getComputedStyle(arguments[0], arguments[1]).getPropertyValue(arguments[2]);";

// Use WebElement instead of locator. 
// Property "content" is an example of property, you should check css and get the red dot
String cssProperty = (String) jsExecutor.executeScript(js, element, ":after", "content");

// Check for the red dot css property
Sers
  • 12,047
  • 2
  • 12
  • 31