How to get text from span tag and span class in BeautifulSoup

Question

I'm trying to scrape some information from a website that has the following html:

<div role="tabpanel">
   <ul class="css-1ijyj3z e1iszlzh2" data-testid="lblPDPInfoProduk">
      <li class="css-354z6m">
         <span>
            Kondisi<!-- -->: 
         </span>
         <span class="main">Baru</span>
      </li>
      <li class="css-354z6m">
         <span>
            Berat<!-- -->: 
         </span>
         <span class="main">500 Gram</span>
      </li>
      <li class="css-354z6m">
         <span>
            Kategori<!-- -->: 
         </span>
         <a href="https://www.tokopedia.com/p/handphone-tablet/handphone/android-os" rel="noopener noreferrer" target="_blank"><b>Android OS</b></a>
      </li>
      <li class="css-354z6m">
         <span>
            Etalase<!-- -->: 
         </span>
         <a href="https://www.tokopedia.com/ofan-store8/etalase/xiaomi" rel="noopener noreferrer" target="_blank"><b>Xiaomi</b></a>
      </li>
   </ul>
   <div class="css-1dwge1q">
      <span class="css-11oczh8 e1iszlzh0">
         <span class="css-17zm3l e1iszlzh1">
            <div data-testid="lblPDPDescriptionProduk">Produk segel<br/>Kualitas terjamin keasliannya <br/>bergaransi TAM<br/>Produk kami kirim dlm keadaan ssgel...<br/><br/>Note : <br/>UNTUK PARA PEMBELI MOHON DI BACA SEBELUM MEMBELI..... <br/><br/>untuk garansi Kami akan aktivasi sesuai dengan invoice pembelian di  TOKOPEDIA oleh Promotor Xiaomi kami dengan cara sebagai berikut : <br/><br/>imei handphone di sold out menggunakan sistem aplikasi yg ada di setiap handphone para promotor xiaomi... dan kami pastikan produk tdk lah di unboxing tp msh tetap dlm keadaan segel. mohon maaf kami tdk akan melayani komplain apabila aktivasi garansi sudah sesuai dengan invoice pembelian di tokopedia.  untuk para pembeli dgn  melakukan pembelian maka kami anggap sudah setuju dgn peraturan toko <br/><br/>JADILAH PEMBELI YG BIJAKSANA<br/></div>
         </span>
      </span>
      <button class="css-5lrz2e" data-testid="btnPDPSeeMore" type="button">Lihat Selengkapnya</button>
   </div>
</div>

I'm trying to scrape the description of product name and store them within a list, so the output will be:

Kondisi: Baru
Berat: 500 Gram
Kategori: Android OS
Etalase: Xiaomi

I tried:

description = []
quotes = soup.find_all('div', {'role': 'tabpanel'})
for item in quotes:
    desc = item.find('span').text
    description.append(desc)

but the output only:

['Kondisi: ']

How can I change this to correct code? Thankyou!

Answer 1

You grab the <div> tag. When you do find() , it'll just get the first tag it finds. What you actually want is to find_all() . But instead of <span> tags, go after the <li> tags. Then you can iterate through those to pull out the text from each of those tags.

Given:

html = '''<div role="tabpanel">
   <ul class="css-1ijyj3z e1iszlzh2" data-testid="lblPDPInfoProduk">
      <li class="css-354z6m">
         <span>
            Kondisi<!-- -->: 
         </span>
         <span class="main">Baru</span>
      </li>
      <li class="css-354z6m">
         <span>
            Berat<!-- -->: 
         </span>
         <span class="main">500 Gram</span>
      </li>
      <li class="css-354z6m">
         <span>
            Kategori<!-- -->: 
         </span>
         <a href="https://www.tokopedia.com/p/handphone-tablet/handphone/android-os" rel="noopener noreferrer" target="_blank"><b>Android OS</b></a>
      </li>
      <li class="css-354z6m">
         <span>
            Etalase<!-- -->: 
         </span>
         <a href="https://www.tokopedia.com/ofan-store8/etalase/xiaomi" rel="noopener noreferrer" target="_blank"><b>Xiaomi</b></a>
      </li>
   </ul>
   <div class="css-1dwge1q">
      <span class="css-11oczh8 e1iszlzh0">
         <span class="css-17zm3l e1iszlzh1">
            <div data-testid="lblPDPDescriptionProduk">Produk segel<br/>Kualitas terjamin keasliannya <br/>bergaransi TAM<br/>Produk kami kirim dlm keadaan ssgel...<br/><br/>Note : <br/>UNTUK PARA PEMBELI MOHON DI BACA SEBELUM MEMBELI..... <br/><br/>untuk garansi Kami akan aktivasi sesuai dengan invoice pembelian di  TOKOPEDIA oleh Promotor Xiaomi kami dengan cara sebagai berikut : <br/><br/>imei handphone di sold out menggunakan sistem aplikasi yg ada di setiap handphone para promotor xiaomi... dan kami pastikan produk tdk lah di unboxing tp msh tetap dlm keadaan segel. mohon maaf kami tdk akan melayani komplain apabila aktivasi garansi sudah sesuai dengan invoice pembelian di tokopedia.  untuk para pembeli dgn  melakukan pembelian maka kami anggap sudah setuju dgn peraturan toko <br/><br/>JADILAH PEMBELI YG BIJAKSANA<br/></div>
         </span>
      </span>
      <button class="css-5lrz2e" data-testid="btnPDPSeeMore" type="button">Lihat Selengkapnya</button>
   </div>
</div>'''

Code:

from bs4 import BeautifulSoup

soup = BeautifulSoup(html, 'html.parser')

description = []
quotes = soup.find_all('div', {'role': 'tabpanel'})
for item in quotes:
    desc = item.find_all('li')
    for each in desc:
        description.append(each.text.split())

Output:

print(description)
[['Kondisi:', 'Baru'], ['Berat:', '500', 'Gram'], ['Kategori:', 'Android', 'OS'], ['Etalase:', 'Xiaomi']]

Answer 2

you can try this:

description = {}
quotes = soup.find_all('div', {'role': 'tabpanel'})
for item in quotes:
    for a in item.find("ul").find_all('li'):
        ls = a.text.strip().split('\n')
        description[ls[0]] = ls[-1]
print(description)

output is:

{'Kondisi: ': 'Baru', 'Berat: ': '500 Gram', 'Kategori: ': 'Android OS', 'Etalase: ': 'Xiaomi'}

Answer 3

Try searching for the class css-354z6m and call the.get_text() method:

soup = BeautifulSoup(html, "html.parser")
print([tag.get_text(strip=True) for tag in soup.find_all(class_="css-354z6m")])

Output:

['Kondisi:Baru', 'Berat:500 Gram', 'Kategori:Android OS', 'Etalase:Xiaomi']

Answer 4

If you can use htql, here is the code:

import htql
for a,b in htql.query(html, "<li> &tx {a=/':'/1 &trim; b=/':'/2 &trim } "):  
  print("%s: %s" % (a,b) ) 

It prints:

Kondisi: Baru
Berat: 500 Gram
Kategori: Android OS
Etalase: Xiaomi