无法单击选项包装器中的选项 - python selenium

Question

我在弹出气泡中选择一个选项时遇到问题（抱歉，我不太确定如何确定它是什么类型的弹出窗口） 我真的不介意我选择什么选项，我只需要单击其中一个。 这是它在代码中的样子：

<div data-v-d4e6e290="" class="f_input-optionsWrapper js_optionsWrapper" style=""><div data-v-d4e6e290="" class="f_input-options"><div data-v-d4e6e290="" class="f_input-header js_header">Oslovení</div> <div data-v-d4e6e290="" class="f_input-options-content"><div class="f_customScroll" data-v-d4e6e290="" style="max-height: 883px;"><div data-v-68c7351e="" class="f_input-option"><div data-v-68c7351e="" data-testid="Pan" class="f_input-option-text xh-highlight">
        Pan
    </div></div><div data-v-68c7351e="" class="f_input-option"><div data-v-68c7351e="" data-testid="Paní" class="f_input-option-text">
        Paní
    </div></div></div> <div data-v-d4e6e290="" class="f_input-footer js_footer"><!----> <span data-v-d4e6e290="" class="f_button f_button--common f_button_set--small">Potvrdit</span></div></div></div></div>

我尝试了多种方式定位元素，第一个问题是它总是检测到两个结果。弹出窗口是选择旅行者的性别，我有两个旅行者，所以我猜它也会检测第二个旅行者的第二个弹出窗口。

我试图定位：

volbaOsloveni = driver.find_elements_by_xpath("//*[@class='f_input-optionsWrapper js_optionsWrapper'] //*[@class='f_input-option-text']")
volbaOsloveni2 = driver.find_elements_by_xpath("//*[@data-testid='Pan']")
volbaOsloveni3 = driver.find_element_by_xpath("//*[@class='f_customScroll'] //*[@data-testid='Pan']")

所有这些都为我提供了两个我认为应该可行的结果。每当我尝试单击元素时，硒要么说它没有找到该元素，要么只是传递它，因为它已经单击了该元素并且脚本继续。

点击尝试：

volbaOsloveni[0].click()
driver.execute_script("arguments[0].click();", volbaOsloveni3)
volbaOsloveni2[1].click()

我尝试了 find_elementS 方法，因此我得到了更多结果，这就是为什么我尝试使用 [0] 等单击第一个元素的原因。 execute_script 或 click() 都不能完成这项工作，我现在有点绝望。

谁能帮我解决这个问题？将不胜感激！提前致谢

Answer 1

点击Pan或Paní

如果我们在HTML DOM 中有唯一条目，请检查dev tools（谷歌浏览器）。

你应该检查的xpath：

//div[@data-testid='Paní']

检查步骤：

Press F12 in Chrome -> 转到element 部分 -> 做一个CTRL + F -> 然后粘贴xpath 看看，如果你想要的element 用@ 得到高亮 987654331@匹配节点。

如果我们有1/1匹配节点，请使用下面提到的任何一个代码进行点击：

代码试用 1：

time.sleep(5)
driver.find_element_by_xpath("//div[@data-testid='Paní']").click()

代码试用 2：

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[@data-testid='Paní']"))).click()

代码试用 3：

time.sleep(5)
button = driver.find_element_by_xpath("//div[@data-testid='Paní']")
driver.execute_script("arguments[0].click();", button)

代码试用 4：

time.sleep(5)
button = driver.find_element_by_xpath("//div[@data-testid='Paní']")
ActionChains(driver).move_to_element(button).click().perform()

进口：

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

另外，如果您仍然看到 XPath 的 2 个元素

//div[@data-testid='Paní']

请使用 XPath 索引：

(//div[@data-testid='Paní'])[2]

根据索引过滤掉节点。

Answer 2

要单击文本为 Pan 的元素，您可以使用以下任一Locator Strategies：

• 使用css_selector：

  driver.find_element(By.CSS_SELECTOR, "div.f_input-options div.f_input-options-content div[data-testid='Pan']").click()
  

• 使用xpath：

  driver.find_element(By.XPATH, "//div[@class='f_input-options']//div[@class='f_input-options-content']//div[@data-testid='Pan']").click()
  

---

所需元素是动态元素，因此理想情况下，点击该元素需要诱导WebDriverWait为element_to_be_clickable()，您可以使用以下Locator Strategies之一：

• 使用CSS_SELECTOR：

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div.f_input-options div.f_input-options-content div[data-testid='Pan']"))).click()
  

• 使用XPATH:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[@class='f_input-options']//div[@class='f_input-options-content']//div[@data-testid='Pan']"))).click()
  

• 注意：您必须添加以下导入：

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