How to find an element with multiple class names using Xpath or CssSelector

Question

I want to access this element:

div data-v-658f4ceb="" class="trn-gamereport-list trn-gamereport-list--compact">

I know that since it has multiple names in the class I would need to use either the XPath or CSS selector method to access it but whenever I try either of these codes:

from selenium.webdriver.chrome.service import Service
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver import Chrome
import pandas as pd
from selenium.webdriver.support.wait import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from time import sleep

driver = webdriver.Chrome()
url = "https://destinytracker.com/destiny-2/profile/psn/4611686018440125811/matches?mode=crucible"
driver.get(url)
crucible_content = driver.find_element(By.XPATH, "//div[contains(@class, 'trn-gamereport-list') and contains(@class, 'trn-gamereport-list--compact')]")
crucible_content = driver.find_element(By.CSS_SELECTOR, "div.trn-gamereport-list.trn-gamereport-list--compact")

I get this error:

"/Library/Frameworks/Python.framework/Versions/3.11/lib/python3.11/site-packages/selenium/webdriver/remote/errorhandler.py", line 245, in check_response
    raise exception_class(message, screen, stacktrace)
selenium.common.exceptions.NoSuchElementException: Message: no such element: Unable to locate element: {"method":"xpath","selector":"//div[contains(@class, 'trn-gamereport-list') and contains(@class, 'trn-gamereport-list--compact')]"}

I was wondering if anyone could help me in figuring out what exactly I'm doing wrong.

Would it be possible for you to share the html part from parent node — Samira Kumar Nanda, Jul 25 '23 at 18:50

undetected Selenium · Accepted Answer · 2023-07-25T20:50:04.953

The elements are dynamic elements, so to locate the elements within the website you need to induce WebDriverWait for the visibility_of_element_located() and you can use either of the following locator strategies:

Using CSS_SELECTOR:

driver.get("https://destinytracker.com/destiny-2/profile/psn/4611686018440125811/matches?mode=crucible")
crucible_content = WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "div.trn-gamereport-list.trn-gamereport-list--compact")))

Using XPATH:

driver.get("https://destinytracker.com/destiny-2/profile/psn/4611686018440125811/matches?mode=crucible")  
crucible_content = WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//div[@class='trn-gamereport-list trn-gamereport-list--compact']")))

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

would i need to do this for every element that I want to access? — internshiphopeful, Jul 25 '23 at 20:33
Would vary from usecase to usecase. See the embedded links for granular details. — undetected Selenium, Jul 25 '23 at 20:41

How to find an element with multiple class names using Xpath or CssSelector

1 Answers1