How to click on ::before element

Question

I have to close the this dialog box

The HTML Code of the same is

How to deal with it. There is no other option to close the dialog box. I have tried locating element via css selector but that dint help.

Edit CSS of ngdialog-close:before

.ngdialog.ngdialog-theme-default .ngdialog-close:before {
  background: transparent;
  border-radius: 3px;
  color: #bbb;
  content: '\00D7';
  font-size: 26px;
  font-weight: 400;
  height: 30px;
  line-height: 26px;
  position: absolute;
  right: 3px;
  text-align: center;
  top: 3px;
  width: 30px;
}

try to find the `Serial Number` element and then navigate to close button, using Xpath or cssSelectors. please add HTML code for `Serial Number` till `Close` button. — Naveen Kumar R B, Feb 28 '17 at 06:13
@frederick99 What you are suggesting is to find the div element and then do click, right? It doesnt work. I need to do click on ::before — saurabh baid, Feb 28 '17 at 06:36
no. I am setting the `display` property of the element to `none`. — frederick99, Feb 28 '17 at 06:37
useful info http://stackoverflow.com/questions/23719956/what-does-before-really-do — Naveen Kumar R B, Feb 28 '17 at 07:38
@frederick99 your solution got me going for now, but I think that is more like a workaround because it basically hides the dialog box. in the HTML box is still present. — saurabh baid, Feb 28 '17 at 08:49

score 2 · Accepted Answer · answered Feb 28 '17 at 08:20

You can't click the ::before as it is not an element, it's probably content (If it is an element than someone used bad practices behind the scenes). Chrome displays it as ::before for debugging purposes. So I think it could be one of these:

Either your close button isn't a button but an icon or a gif etc...
You're missing the actual button which could be the div but it requires a hover before the click for example or it's a parent element to your div.
Your button isn't working... (does it work manually?)

If it turns out it is an element, then you can click it with Chrome dev tools opened and see what the Styles tab is showing, for example:

div::before {
  content: url(some.gif);
}

Perhaps it will show you the HTML code that's being added.

Your 2nd point got me going. I had to click on div but for some reason selenium `click()` was not working, even with the action chains. So I used javascript() click method and it solved my problem. — saurabh baid, Feb 28 '17 at 09:10
That's great! and a little weird that it didn't work with Selenium... However, you can see in the `content: '\00D7';` that it's just a multiplication sign and not a button. (Unicode Character U+00D7) — Moshisho, Feb 28 '17 at 09:25

Dhytm · Answer 2 · 2022-06-29T14:47:07.810

U can use "Xpath". Probably isn't the best solution, but can work. Take a look:

Firstly, i create a function that wait:

def waitxpath(xpath_):
    element = WebDriverWait(driver, 15).until(
        EC.presence_of_element_located((By.XPATH, xpath_))
        )
    time.sleep(1)
    return element

After that, to click ok button "::before" u can use a code like that:

data_one = waitxpath('//*[@id="comunicado"]/span/i') driver.find_element(By.XPATH, '//*[@id="comunicado"]/span/i').click()

Well, i hope that it would be useful for u or anyone.

Page HTML: enter image description here

How to click on ::before element

2 Answers2

Linked