Can you help me write CSS locator for ::after

[Robins Mathew]

Hi,

This is how my HTML is,

<div class="Marker_Button">

<span class="Market_Button_Text">Text content</span>

::after

</div>

In this ::after is one locator where I am supposed to click. Can anybody write a CSS locator for locator ::after?

I am able to write CSS locator for the Market button Text (div[class='Marker_Button'] span[class='Market_Button_Text']) but not for ::after.

[Kaleem Uddin Mohammed Abdul]

Can you share the complete HTML?
if it is after span tag and it is other than span tag you can use div[class='Marker_Button']>TagName.

[Sonia saini]

Try to use below CSS and execute in developer tool in chrome. It will give you all elements which have span class.

$(".Marker_Button span[class]"); 

If you want to click on specific element us below along with above

:nth-child(4)

Please put Source code.

--
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 post to this group, send email to seleniu...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/952440ea-76c3-4c12-bb81-509e1f1dd2dd%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

--

Sonia saini

[Robins Mathew]

Thank you so much for you reply Kaleem,

I can write a css locator for span, but the problem here is ::after is not a tag

you can find more information here.

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

[Robins Mathew]

Thanks Sonia,

The nth-child() wont work for this.

please refer more on this in https://drafts.csswg.org/selectors-3/#gen-content

There is no much information about writing a Css Locator for pseudo-elements

[Robins Mathew]

I will explain a scenario which someone can look at,

1. Go to google.com

2. Search for testing

3. Check the locator I marked in red

You can see the locator for that as

Can anybody write a css locator for the one I marked in Red?

[makale...@gmail.com]

You should be able to click marker_button div! Give a try!

Sent from my iPad

[Sonia saini]

In application I had ::after and had to click on.

so that css worked fine for me. your dev team would have used other different strategy. attached screen shot.  :)

--

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 post to this group, send email to seleniu...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/selenium-users/AA0E022B-3408-45CD-BF7A-550AD2DE70A5%40gmail.com.

For more options, visit https://groups.google.com/d/optout.

--

Sonia saini

[Robins Mathew]

Thanks Kaleem for the reply.

I can click on the marker button that works fine for me. Bu what I am looking for is the existence of the locator attached to ::after.

I want to check if that is displayed, for that I need to write a css for::after

[Robins Mathew]

Thanks Sonia,

Can you please send the CSS locator you have used? Are you clicking right on the ::after locator or its parent?

What I am stuck with is, I have a clickable locator in the ::after, I need to check if that is displayed. nth-child() did not work for me because nth child will return only tags

for example

<div class="blah blah blah">

  <span class="blah blah blah1"></span>

  <span class="blah blah blah2"></span>

  <span class="blah blah blah3"></span>

  <span class="blah blah blah4"></span>

</div>

if you inspect $(div[class="blah blah blah"]:nth-child(3)) will return you <span class="blah blah blah4"></span>

but my html has the pseudo element ::after as a sibling like this.

 <div class="blah blah blah">

  <span class="blah blah blah1"></span>

  <span class="blah blah blah2"></span>

  <span class="blah blah blah3"></span>

  <span class="blah blah blah4"></span>

  ::after

</div>

if you inspect $(div[class="blah blah blah"]:nth-child(4)) it wont return you ::after

The funny thing is I found a solution for this couple of months back but now I am not getting it.

[Robins Mathew]

More Informationa bout Pseudo Elements and Pseudo Selectors can be found in 

https://css-tricks.com/pseudo-class-selectors/

[David]

May want to see these as well:

https://groups.google.com/forum/#!topic/selenium-users/ZUi9cenA13o

http://stackoverflow.com/questions/24288358/unable-to-find-before-css-selector-element-in-selenium-webdriver