Selenium, how to locate and click a particular button

Question:

I’m using selenium to try and scrape a listing of products in this website:
https://www.zonacriativa.com.br/harry-potter

However, I’m having trouble getting the full listing of products. the page list 116 products, yet only a few are shown at a time. If I want to see the other ones, I need to click on the "Carregar mais Produtos" (load more products) button at the bottom a few times to get the full listing.

I’m having trouble locating this button, as it doesn’t have an id and its class is a huge string. I’ve tried several things, like the examples below, but they don’t seem to work. Any suggestions?

driver.find_element("xpath", "//button[text()='Carregar mais Produtos']").click()
driver.find_element("css selector", ".vtex-button__label.flex.items-center.justify-center.h-100.ph5").click()
driver.find_element(By.CLASS_NAME, "vtex-button.bw1.ba.fw5.v-mid.relative.pa0.lh-solid.br2.min-h-small.t-action--small.bg-action-primary.b--action-primary.c-on-action-primary.hover-bg-action-primary.hover-b--action-primary.hover-c-on-action-primary.pointer").click()
Asked By: Alain

||

Answers:

The element you trying to click is initially out of the visible screen so you can’t click it. Also this XPath at least for me doesn’t locate that element.
What you need to do is to scroll the page down untill that button becomes visible and clickable and then click it.
The following code clicks that button 1 time:

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

options = Options()
options.add_argument("start-maximized")

webdriver_service = Service('C:webdriverschromedriver.exe')
driver = webdriver.Chrome(options=options, service=webdriver_service)
wait = WebDriverWait(driver, 5)

url = "https://www.zonacriativa.com.br/harry-potter"
driver.get(url)
while True:
    try:
        wait.until(EC.element_to_be_clickable((By.XPATH, "//div[contains(@class,'buttonShowMore')]//button"))).click()
        break
    except:
        driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")

The above code can be simply modified to scroll and click that button until we reach the latest page where this button is not presented:

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC

options = Options()
options.add_argument("start-maximized")

webdriver_service = Service('C:webdriverschromedriver.exe')
driver = webdriver.Chrome(options=options, service=webdriver_service)
wait = WebDriverWait(driver, 5)

url = "https://www.zonacriativa.com.br/harry-potter"
driver.get(url)
while driver.find_elements(By.XPATH, "//div[contains(@class,'buttonShowMore')]//button"):
    try:
        wait.until(EC.element_to_be_clickable((By.XPATH, "//div[contains(@class,'buttonShowMore')]//button"))).click()
    except:
        driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
Answered By: Prophet