Extract data using nth-child / css_selector in selenium with python

Question

I am fairly new to python and selenium and am trying to extract data from https://crypto.com/price/bitcoin, in particular the market cap and 24H volume. The HTML for the market cap ($395.33) and 24H volume ($47.03 B) are below.

<div id="__next">
  <style>...</style>
  <nopscript>...</noscript>
  <div class="css-b14fde">
    <div class="chakra-container css-p5b43h">
      <div class="css-13lnf1p">
        <div class="css-1f1k94j">
          <div class="css-9xp0oz">
            <div class="chakra-stack coin-chart css-5we3l5" data-testid="card-container">
              <div class="css-1y4us2f">
                <div class="css-95687q">
                  <p class="chakra-text css-1c8c51m">$395.33 B</p>
                 </div>
                <div class="css-95687q">
                  <p class="chakra-text css-1c8c51m">$47.03 B</p>
                 </div>

I have tried to use the following code but it just selects and prints the market cap twice since both elements have the same css-1c8c51m. I don't want to use XPATH because this causes a different issue in my code. Therefore, I want to use the nth-child element of the market cap and 24H volume.

def get_data(driver: webdriver.Chrome, link):
    dict_data={}
    driver.get(link)
    market_cap = driver.find_element(by=By.CSS_SELECTOR, value = ".css-1c8c51m").text
    dict_data['market cap'] = market_cap
    print(market_cap)
    volume =  driver.find_element(by=By.CSS_SELECTOR, value = ".css-1c8c51m").text
    dict_data["24H volume"] = volume
    print(volume)

The selector for market cap is below:

#__next > div.css-bl4fde > div > div > div.css-1f1k94j > div.css-9xp0oz > div.chakra-stack.coin-chart.css-5we3l5 > div.css-1y4us2f > div:nth-child(1) > p

The selector for 24H volume is below:

#__next > div.css-bl4fde > div > div > div.css-1f1k94j > div.css-9xp0oz > div.chakra-stack.coin-chart.css-5we3l5 > div.css-1y4us2f > div:nth-child(2) > p

As you can see market cap is nth-child(1) and 24H volume is nth-child(2). How can I implement this into the code above so that it prints the market cap and 24H volume?

I have tried this:

def get_data(driver: webdriver.Chrome, link):
    dict_data={}
    driver.get(link)
    market_cap = driver.find_element(by=By.CSS_SELECTOR, value = "div.css-1y4us2f#__next p:nth-child(1)").text
    dict_data['market cap'] = market_cap
    print(market_cap)
    volume =  driver.find_element(by=By.CSS_SELECTOR, value = "div.css-1y4us2f#__next p:nth-child(2)").text
    dict_data["24H volume"] = volume
    print(volume)

But it throws this error: selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"css selector","selector":"div.css-1y4us2f#__next p:nth-child(1)"}

AbiSaran · Accepted Answer · 2022-11-04 14:38:19Z

1

To get the 'Market Cap (USD)' value, use the below css locator:

".css-1y4us2f div:nth-of-type(1) p"

To get the '24H VOLUME (USD)' value, use the below css locator:

".css-1y4us2f div:nth-of-type(2) p"

answered Nov 4, 2022 at 14:38

AbiSaran

2,6983 gold badges13 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Extract data using nth-child / css_selector in selenium with python

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related