How to display HTML Table data cell elements in Tkinter GUI using Selenium?

Question

I want to make a program that takes the table data cell elements of tables from a wholesale website (the tables show stock of disposable vapes), and then will display which items are low on stock on a Tkinter GUI. So far I am using selenium to go to different URLs of various vapes and print out the stock of certain flavors of those vapes depending on if they are below a certain number. I've added a Tkinter GUI which asks what stock you would like to check and launches selenium when you press on the 'Vapes' button. Would it be possible to display the HTML data on the Tkinter GUI itself, instead of just printing it to Terminal? Here is my code so far, I plan on adding more vapes and other items but only did two here so it doesn't look as messy:

from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.keys import Keys
from tkinter import *
import time
PATH = "C:\Program Files (x86)\chromedriver.exe"
driver = webdriver.Chrome(PATH)
def search_result():
    # fume infinity
    driver.get("https://safagoods.com/vape-shop/disposable-vape-devices/fume-infinity-disposable-device")
    wait = WebDriverWait(driver, 15)
    table = wait.until(
        EC.visibility_of_element_located((By.CSS_SELECTOR, ".table.table-bordered tr[style='background: #eeeeee;']")))
    data = []
    rows = driver.find_elements_by_css_selector(".table.table-bordered tr[style='background: #eeeeee;']")
    for row in rows:
        qty = row.find_element_by_xpath("./td[1]").text
        stock = row.find_element_by_xpath("./td[2]").text
        name = row.find_element_by_xpath("./td[3]").text
        if int(stock) <= 50:
            data.append([stock, name])
    print("Number left/Flavor/Fume Infinity Disposables 5PC")
    print(*data, sep='\n')
    # Fume Extra
    driver.get("https://safagoods.com/vape-shop/disposable-vape-devices/fume-extra-10pc")
    wait = WebDriverWait(driver, 15)
    table = wait.until(
        EC.visibility_of_element_located((By.CSS_SELECTOR, ".table.table-bordered tr[style='background: #eeeeee;']")))
    data = []
    rows = driver.find_elements_by_css_selector(".table.table-bordered tr[style='background: #eeeeee;']")
    for row in rows:
        qty = row.find_element_by_xpath("./td[1]").text
        stock = row.find_element_by_xpath("./td[2]").text
        name = row.find_element_by_xpath("./td[3]").text
        if int(stock) <= 50:
            data.append([stock, name])
    print("Number left/Flavor/Fume Extra Disposables 10PC")
    print(*data, sep='\n')

    driver.close()

#tkinter gui window and displayed options
window = Tk()
window.geometry("450x200")
search = Label(window,text= "Which stock would you like to check?",font='times 15')
search.place(x=20,y=20)

#buttons
b1 = Button(window,text="vapes",command=search_result,width = 12, bg= 'gray')
b1.place(x=150,y=50)
#b2 = Button(window,text="vape juices",command=search_result,width = 12, bg= 'gray')
#b2.place(x=150,y=90)

#b2 = Button(window,text="Juices",command=vape_juices,width = 12, bg= 'gray')
#b2.place(x=300,y=50)

window.mainloop()

Sorry if this question is confusing I'm fairly new to programming. Thanks guys.

norie · Accepted Answer · 2021-07-13 06:46:16Z

You could try using a Treeview.

I've added one in the code below, it's a bit rough though.:)


from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.keys import Keys
from tkinter import *
from tkinter import ttk

import time
PATH = "chromedriver.exe"
driver = webdriver.Chrome(PATH)
def search_result():
    # fume infinity
    driver.get("https://safagoods.com/vape-shop/disposable-vape-devices/fume-infinity-disposable-device")
    wait = WebDriverWait(driver, 15)
    table = wait.until(
        EC.visibility_of_element_located((By.CSS_SELECTOR, ".table.table-bordered tr[style='background: #eeeeee;']")))
    data = []
    rows = driver.find_elements_by_css_selector(".table.table-bordered tr[style='background: #eeeeee;']")
    for row in rows:
        qty = row.find_element_by_xpath("./td[1]").text
        stock = row.find_element_by_xpath("./td[2]").text
        name = row.find_element_by_xpath("./td[3]").text
        if int(stock) <= 50:
            data.append([stock, name])

    #populate treeview
    for idx, vals in enumerate(data):
      print(idx)
      tree.insert(parent='', index=idx, values=vals)
      
    print("Number left/Flavor/Fume Infinity Disposables 5PC")
    print(*data, sep='\n')
    # Fume Extra
    driver.get("https://safagoods.com/vape-shop/disposable-vape-devices/fume-extra-10pc")
    wait = WebDriverWait(driver, 15)
    table = wait.until(
        EC.visibility_of_element_located((By.CSS_SELECTOR, ".table.table-bordered tr[style='background: #eeeeee;']")))
    data = []
    rows = driver.find_elements_by_css_selector(".table.table-bordered tr[style='background: #eeeeee;']")
    for row in rows:
        qty = row.find_element_by_xpath("./td[1]").text
        stock = row.find_element_by_xpath("./td[2]").text
        name = row.find_element_by_xpath("./td[3]").text
        if int(stock) <= 50:
            data.append([stock, name])
    print("Number left/Flavor/Fume Extra Disposables 10PC")
    print(*data, sep='\n')

    driver.close()

#tkinter gui window and displayed options
window = Tk()
window.geometry("450x500")
search = Label(window,text= "Which stock would you like to check?",font='times 15')
search.place(x=20,y=20)

#buttons
b1 = Button(window,text="vapes",command=search_result,width = 12, bg= 'gray')
b1.place(x=150,y=50)

# add treeview
tree = ttk.Treeview(window, )
tree['columns'] = ['Quantity', 'Name']
tree.column('#0', width=0, stretch=NO)
tree.column('Quantity', anchor=CENTER, width=100)
tree.column('Name', anchor=CENTER, width=200)

tree.heading('#0', text='', anchor=CENTER)
tree.heading('Quantity', text='Quantity', anchor=CENTER)
tree.heading('Name', text='Name', anchor=CENTER)

tree.place(x=0, y=200)



#b2 = Button(window,text="vape juices",command=search_result,width = 12, bg= 'gray')
#b2.place(x=150,y=90)

#b2 = Button(window,text="Juices",command=vape_juices,width = 12, bg= 'gray')
#b2.place(x=300,y=50)

window.mainloop()

Wow. I will look more into treeview, but this is definitely what I was looking for. It displays all my data and I was able to add a scrollbar very easily too. Thank you. If you have the time, could you please explain what "for idx, vals in enumerate(data): print(idx) tree.insert(parent='', index=idx, values=vals" means? I'm sure I can figure it out as I continue coding but I'd like to understand it from you if possible.

imxitiz · Accepted Answer · 2021-07-14 05:50:11Z

I had found some of the answers/article that matches with you question:

First link suggests you to use cefpython:

Yes, you can both embed HTML and open full webpages (with CSS and javascript even) in tkinter. With the cefpython module you can embed a full-blown Chromium browser in a tk window.

And Second suggests you to use tkhtmlview:

The tkhtmlview module is a collection of Tkinter widgets whose text can be set in HTML format. An HTML widget isn’t a web browser frame, it’s only a simple and lightweight HTML parser that formats the tags used by the Tkinter Text base class.

I didn't find exact table code there on both articles. After further research I had found third article that provide you table, but I don't think, it can solve your problem in your circumstance.

So, here's my suggestion You had already scrape the page and got the needed data from there, now you want to show that in table. You can do this:

First try to make table and insert your data manually in table, you had done it manually and got some sort of table, right? Now try to change the code to insert your data in table by looping through your data, as you did it manually.

Here's example code for above idea

## Like you have this kind of list
lst = [(1,'Raj','Mumbai',19),
       (2,'Aaryan','Pune',18),
       (3,'Vaishnavi','Mumbai',20),
       (4,'Rachna','Mumbai',21),
       (5,'Shubham','Delhi',21)]
## Now we have to insert this list into table then, we can loop through the list and insert it one by one.
for i in range(len(lst)): #For rows
    for j in range(len(lst[0])): #For column
        e = Entry(root, width=20, fg='blue',font=('Arial',16,'bold'))
        e.grid(row=i, column=j)
        e.insert(END, lst[i][j])

Visit Create table using tkinter for more information about above script.

If you want any other idea or didn't understand anything then try to do reach me through comment!

Thanks!!! I understand how to use HTML in tkinter better now :) very useful information.

Collectives™ on Stack Overflow

How to display HTML Table data cell elements in Tkinter GUI using Selenium?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related