Search code examples
pythonseleniumxpathcss-selectorswebdriverwait

How to locate the value inside a div using Selenium and Python

How to locate value inside a div using xpath \ css_selector

I have this html:

<div class="catalog-products view-tile" data-catalog-products="" data-slider-available="" data-primary-as-icon=""><div data-id="product" class="catalog-product ui-button-widget" data-product="5a7b4c6d-0bc3-11ec-a2b0-00155dfc8232" data-code="4862447" data-preview-slider-inited="1"><div class="catalog-product__image"><a class="catalog-product__image-link" href="/product/5a7b4c6d0bc3c823/videokarta-msi-geforce-210-n210-1gd3lp/" data-toggle-slider=""><picture><source type="image/webp" media="(min-width: 768px)" etc

So I need to get data-code value 4862447

  1. Tried to access via xpath:

    /html/body/div[1]/div/div[2]/div[2]/div[3]/div/div[1]/div[1]

    Got highlighted in Chrome console that part:

    <div data-id="product" class="catalog-product ui-button-widget" data-product="5a7b4c6d-0bc3-11ec-a2b0-00155dfc8232" data-code="4862447" data-preview-slider-inited="1">

    Don't know how to get data-code value.

  2. Tried css_selector:

    div[data-id='product']

    Got same line:

    <div data-id="product" class="catalog-product ui-button-widget" data-product="5a7b4c6d-0bc3-11ec-a2b0-00155dfc8232" data-code="4862447" data-preview-slider-inited="1">

    And no idea again.

Solution

  • To print the value of the data-code attribute you have to induce WebDriverWait for the visibility_of_element_located() and you can use either of the following locator strategies:

    • Using CSS_SELECTOR:

      print(WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "div.catalog-products.view-tile > div.catalog-product.ui-button-widget[data-id='product']"))).get_attribute("data-code"))

    • Using XPATH:

      print(WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//div[@class='catalog-products view-tile']/div[@data-id='product' and @class='catalog-product ui-button-widget'][.//a[@class='catalog-product__image-link' and @href and @data-toggle-slider]]"))).get_attribute("data-code"))

    • 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