how to identify css selector ::before in selenium is not working

Question

I am trying to use Selenium to get all element in the list ::before pseudo-element. I can't save data into the list.

Scenario: I want to all data into the list where data in li and a tag

Here is what the DOM looks like:

I am using selenium + python

This code is hovering to main category nav 'Women':

element_to_select = driver.find_element_by_xpath("//*[@id='nico-main-header']/nav/ul/li[1]")
hover = ActionChains(driver).move_to_element(element_to_select)
hover.perform()
driver.implicitly_wait(15)

Print all li achor tag :

ele = driver.find_element_by_css_selector("ul .row .col-md-3:first-child ul li")

print(ele)

** but li anchor tag is not coming while printing the ele.

Answer 1

You can use this code: For a tag

my_a_tag_datas = []      //empty list
a_data = driver.find_elements_by_tag_name("a")   //a tag from web driver
for a_tag_data in a_data:      
    a_tag_data_taxt = a_tag_data.text    // a tag element data convert to text
    my_a_tag_datas.append(a_tag_data_taxt)   //  a tag whole data save in list
print(my_a_tag_datas)    // print list data

For li tag: same code just please replace "a" to "li"

Note: If you save all element rather then text then please append a_tag_data where i append a_tag_data_taxt

Answer 2

Disclaimer: This is not an optimal solution.I am using python for the first time and not have much hands on with selenium.

elem = driver.find_element_by_css_selector('.col-md-3').find_elements_by_tag_name('a')

  for a_tag_data in elem:
    a_tag_data_text = a_tag_data.text
    my_a_tag_datas = my_a_tag_datas + a_tag_data_text

print(my_a_tag_datas)

Answer 3

Pseudo Elements

A CSS pseudo-element is used to style specified parts of an element. It can be used to:

• Style the first letter, or line, of an element
• Insert content before, or after, the content of an element

---

::before

::before inserts the content before any other content in the HTML instead of after. The only reasons to use one over the other are:

• You want the generated content to come before the element content, positionally.
• The ::after content is also "after" in source-order, so it will position on top of ::before if stacked on top of each other naturally.

---

This usecase

To extract all the texts within <a> tag using Selenium and Python you have to induce WebDriverWait for the visibility_of_all_elements_located() and you can use either of the following Locator Strategies:

• Using CSS_SELECTOR:

  driver.get("https://nthqibord.com/2019/08/15/pemimpin-pkr-pertahan-tun-mahathir/")
  print([my_elem.text for my_elem in WebDriverWait(driver, 5).until(EC.visibility_of_all_elements_located((By.CSS_SELECTOR, "a#main-category-menu[href='/shop/women/'] + ul.top-nav-border ul li>a")))])
  

• Using XPATH:

  driver.get("https://nthqibord.com/2019/08/15/pemimpin-pkr-pertahan-tun-mahathir/")
  print([my_elem.text for my_elem in WebDriverWait(driver, 5).until(EC.visibility_of_all_elements_located((By.XPATH, "//a[@id='main-category-menu' and @href='/shop/women/']//following::ul[@class='top-nav-border']//ul//li/a")))])
  

• Note : You have to add the following imports :

  from selenium.webdriver.support.ui import WebDriverWait
  from selenium.webdriver.common.by import By
  from selenium.webdriver.support import expected_conditions as EC