Selenium WebDriver 使用 CSS 选择器和数据属性找不到元素

Question

I have an input HTML element for first name in signup.

 <div class="form-group" data-test="signup-form-first-name"> <label for="first-name">First Name</label> <input type="text" id="first-name" name="first-name" autocomplete="given-name" class="fbkr-input gray error" value="" background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: pointer;"> <div aria-live="polite" class="label label-danger"> First Name is required. </div> </div>

The element with label-danger class is only visible if there is an error and the field is empty. I am trying to test whether that element is visible when testing the signup flow, but every time I try that, it fails. I tried to change the script so it only uses the class (.label-danger), but alas, still nothing. Here is the code that I am trying that with.

    def is_element_error_label_visible(self, element_data_attribute: str) -> bool:
        try:
            element_present = 
            expected_conditions.presence_of_element_located(
                (By.CSS_SELECTOR, f". 
            {self._build_data_attribute(element_data_attribute)} .label-danger"))
            WebDriverWait(self.remote_web_driver, 
            15).until(element_present)
        except NoSuchElementException:
            return False
        return True

The value that

f"{self._build_data_attribute(element_data_attribute)} .label-danger"))

returns is: [data-test="signup-form-first-name"].label-danger

Is this an invalid way to get the element using the CSS Selector? Or is there a much simpler way for this. Please keep in my mind that I do not want to use xPath, since I like to keep my code clean, that is why I am using the data-test attribute.

Answer 1

Try this following css selector.

expected_conditions.presence_of_element_located((By.CSS_SELECTOR, ".label-danger"))

---

Update: While Automating seems you need to click on Sign_up button to see the error without entering data.

from selenium import webdriver
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("https://fishingbooker.com/")
WebDriverWait(driver,10).until(EC.element_to_be_clickable((By.CSS_SELECTOR,"a.btn[href*='signup']"))).click()
WebDriverWait(driver,10).until(EC.element_to_be_clickable((By.CSS_SELECTOR,"button.fbkr-button.yellow"))).click()
try:
    print(WebDriverWait(driver,10).until(EC.presence_of_element_located((By.CSS_SELECTOR,"#first-name + .label-danger"))).text)
except:
    print("No such element found")

Hope this helps.

Answer 2

I'm not familiar with python to provide a code snippet. But I would use a partial CSS selector matcher for this situation. Please use it if applicable only.

div[class*="label-danger"]