How to locate '::before' element?

[ARK Satyanarayana Raju]

Hi,

In the attached screen shot, how to find the element which is written using '::before'.
Using Selenium webdriver in Java.


Thanks,
Raju

[PeterJeffreyGale]

What have you tried and what issues have you had?

It is just a piece of text like any other so shouldn't be at all hard to identify. Though, it does look like a strange piece of text to display to a user and I can't see it on your screen. It also looks more like some sort of program code. Are you sure this is text that is supposed to be visible to the user and/or at least store in a tag?

Peter

[sunny sachdeva]

Even I am struggling to find this kind of HTML.

I googled about it and laned to http://stackoverflow.com/questions/24288358/unable-to-find-before-css-selector-element-in-selenium-webdriver

Thanks

Sunny

[Selenium Framework]

::before is a css selector and it is not some misplaced code. 

http://www.w3schools.com/cssref/sel_before.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/::before

cheers,

www.seleniumframework.com

On Thursday, February 19, 2015 at 2:40:57 PM UTC+5:30, PeterJeffreyGale wrote:

It's part fo the text in the element rather than part of the html itself, from what I can see. Though it may just be misplaced code that has got injected into the page. 

I think the OP needs to talk to the developers/designer about what this is for rather than just automating it.

Though I can't see why a simple XPath of something like: //*[.=''::before'] ...

... shouldn't work.

[PeterJeffreyGale]

It does look that it is intended to be some CSS styling.

But CSS content shouldn't appear INSIDE the HTML tags, as they seem to do here, should they?

[Selenium Framework]

"::after is a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML). While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this"

http://css-tricks.com/almanac/selectors/a/after-and-before/

cheers,

www.seleniumframework.com

[sunny sachdeva]

Since its a pseudo is that the reason why this kind of HTML is visible  in chrome but not in firefox?

On Friday, February 20, 2015 at 9:57:23 AM UTC+5:30, Selenium Framework wrote:

"::after is a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML). While the end result is not actually in the DOM, it appears on the page as if it is, and would essentiallly be like this"

[PeterJeffreyGale]

Still from that explanation page cited, the "::before" should only appear in the CSS definition, not the HTML DOM. It is the content that this CSS styling injects that we might expect to see in the DOM, not the pseudo element itself.you

But maybe the view supplied in Google is not a straight DOM/page view and we don't really know what we have been given to look at.

[sunny sachdeva]

So does that mean Selenium can not catch this type of DOM?

[PeterJeffreyGale]

If it is injecting normal html content the same as we do with javascript/ajax, for example, I don't see why Selenium won't recognise it through whatever locator strategy is appropriate.

But by my understanding, we shouldn't be expecting to have to search for and "<::before>" html tags as the OP here seems to be asking and the screenshot seems to show. We should only be seeing NORMAL html tags and content that should be rendered in the final DOM and I don't see why we shouldn't be able to search on that content.

It still seems to me that something is not quite right with the OP's page/screenshot OR the way that we are being asked to interpret it as a rendered DOM. We really need to see the html and/or content rendered by the pseudo CSS element before we can see that we can work with it or not.

[PeterJeffreyGale]

[Sampath S]

I have faced similar issue with pseudo css selectors (::before alike), I have overcome the issue using "Actions" class of selenium.

Actions action = new Actions(driver);

action.moveToElement(driver.findElement(By.cssSelector("button[id$='save-button']"))).build().perform();

Hope it helps.

Thanks,

Sampath

[mohamed abdul kadar]

hi sampath,
i have faced some problems .PFA for the problems.
There are two elements in the tag.i cant find the element in the:: before class.Did you already post the explanations using actions.
can you explains little briefly.

[Julian Lobert]

This may not be helpful to the original poster anymore.  But in case anyone else stumbles upon this looking for an answer...

So it doesn't appear to be possible to do this with any normal selenium methods so we have to use java script.  Fortunately we can execute java script in selenium using JavascriptExecutor.  The below script is Java syntax.

In my example "content" is the name of one of the styles located in my ::before pseudo element.  So just change that to whatever style object you are trying to obtain.

 

WebElement switchLabel = driver.findElement(By.xpath("'your xpath/id/Css/etc here"));
String pseudo = ((JavascriptExecutor)driver)
        .executeScript("return window.getComputedStyle(arguments[0], ':before').getPropertyValue('content');",switchLabel).toString();
System.out.println(pseudo);

[Arpit Srivastava]

Can anyone please help me to write the same in Protractor.?

I face this same issue in Protractor framework. How to fetch the text for below element - 
<html/>

::below

Modify Loan

::after

[Surender Dargan]

Hi Raju,

Have you found solution for this? I am having the same issue.

Please help.

Regards,

Surender

[Joe Ward]

Selecting by pseudo-classes isn't really supported by Selenium. As far as I know, your best best is to use the JavaScriptExecutor to inject something that will return the element you want and get it that way (for example if the page has JQuery injecting a JQuery selector and returning the element that way).

--
You received this message because you are subscribed to the Google Groups "Selenium Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to selenium-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/86a66d92-c5c7-49fe-b78a-6b747b0b7220%40googlegroups.com.

[Surender Dargan]

@That Guy: Can you please describe the answer by sharing the code in Java?

On Thursday, February 19, 2015 at 12:16:59 PM UTC+5:30, ARK Satyanarayana Raju wrote: