InvalidSelectorException：消息：无效选择器：指定了无效或非法选择器错误单击带有 Selenium 的 div ng-click 元素

Question

我正在尝试选择

<div ng-click="select('expert')" class="select-exp__item select-exp__item_active" ng-class="{'select-exp__item_active': 'expert'===selected}" style="">

我尝试了一些方法

driver.find_element_by_css_selector("div[ng-click='select('expert')']").click()

driver.find_element_by_class_name('select-exp__item-title').click()

WebDriverWait(driver, 10).until(EC.element_to_be_clickable(By.XPATH("//div[@class='select-exp__item select-exp__item_active']").click()

WebDriverWait(driver, 10).until(EC.element_to_be_clickable(By.XPATH("//div[@class='select-exp__item select-exp__item_active' and contains(@ng-click, 'select('expert')')]").click()

...但我每次都得到相同的错误：

InvalidSelectorException：消息：无效选择器：指定了无效或非法的选择器

感谢任何指导，在没有太多运气的情况下广泛搜索了“selenium ng-click”，但仍在学习 Selenium，谢谢。

这是完整的 HTML：

<div class="agmodal__wrapper agmodal onboarding-wrapper ng-scope agmodal__wrapper--visible" ng-controller="OnboardingController as ctrl" ng-class="{'agmodal__wrapper--visible': ctrl.shown}" tabindex="-1" style="">
    <div class="onboarding">
        <div class="onboarding__body">
            <!-- ngIf: ctrl.onboardingService.step === 1 --><section class="select-exp step ng-scope" ng-if="ctrl.onboardingService.step === 1" style="">
    <div class="select-exp__header step__header">
        <div class="select-exp__title step__title">Welcome to AMZScout PRO Extension</div>
        <div class="select-exp__desc step__desc">
            PRO Extension helps you find the perfect product to sell on Amazon
        </div>
    </div>
    <div class="select-exp__body">
        <div class="select-exp__body-title">
            Select your experience level with Amazon</div>
        <div class="select-exp__body-desc">
            We will adjust the amount of pop up tips and certain parameters based on your experience. You will be able
            to
            change this choice later in the Settings.</div>
        <div class="select-exp__items">
            <div ng-click="select('beginner')" class="select-exp__item" ng-class="{'select-exp__item_active': 'beginner'===selected}">
                <div class="select-exp__item-title">Beginner</div>
                <div class="select-exp__item-desc">If you are new to Amazon research, you’ll see vital parameters that
                    will help you choose a great
                    product quickly. Great for learning.</div>
            </div>
            <div ng-click="select('expert')" class="select-exp__item select-exp__item_active" ng-class="{'select-exp__item_active': 'expert'===selected}" style="">
                <div class="select-exp__item-title">Expert</div>
                <div class="select-exp__item-desc">As an expert, you’ll see the full data and be able to fine-tune your
                    research.</div>
            </div>
        </div>
    </div>

Answer 1

此错误消息...

InvalidSelectorException: Message: invalid selector: An invalid or illegal selector was specified

...暗示您使用的选择器不是有效的选择器表达式。

---

分析

根据您的第一次代码试用：

driver.find_element_by_css_selector("div[ng-click='select('expert')']").click()

( 和) 在css-selectors 中使用时具有特殊效果。所以表达式无效。您需要对字符进行转义。

---

解决方案

由于所需元素是 Angular 元素，因此您需要将 WebDriverWait 用于 element_to_be_clickable()，并且您可以使用以下任一 Locator Strategies：

• CSS_SELECTOR:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div.select-exp__item.select-exp__item_active[ng-click=\"select('expert')\"]"))).click()
  

• XPATH:

  WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//div[@class='select-exp__item select-exp__item_active' and @ng-click=\"select('expert')\"]"))).click()
  

Answer 2

尝试使用 css 选择器定位元素，如下所示：

WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.CSS_SELECTOR, 'div.select-exp__item.select-exp__item_active'))).click()

你用错了WebdriverWait，你的代码：

WebDriverWait(driver, 10).until(EC.element_to_be_clickable(By("value").click()

应该是这样的模式：

WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By, 'value'))).click()

Explicit Waits