分享
三行代码  ›  专栏  ›  技术社区  ›  Justin

使用selenium单击下拉菜单

  •  1
  • Justin  · 技术社区  · 1 周前

    我正在尝试在上面创建抽认卡quizlet.com网站含硒。如果你访问,你会看到一个“创建”按钮(或只是一个“+”取决于窗口大小)在导航栏,当你点击它变成一个下拉菜单,其中有3个按钮:“研究集”,“文件夹”和“类”。(我正在尝试单击“学习集”)

    <button type="button" aria-label="Create"><span>Create</span>/button>
    

    和:(注意,所有3个按钮共享类“UILink”,第一个按钮是“Study Set”按钮,注释是我的)

    <div class="s1ovpdog"> <!-- going to grab this div first because theres 85 elements with the class 'UILink' on the page, grabbing this div cuts it to 3-->
        <button class="UILink" type="button">  <!-- then going to grab this button-->
            <div class="c1ap9d88">
                <div class="iiekfr8">
                    <div class="i1q3l8tw">
                        <svg aria-label="sets" class="AssemblyIcon AssemblyIcon--medium" role="img"><noscript></noscript>
                        <use xlink:href="#sets"></use><noscript></noscript></svg><span class="AssemblyMenuItem--title t1nsp0j0">Study set</span>
                    </div>
                </div>
            </div>
        </button>
        <button class="UILink" type="button">
            <div class="c1ap9d88">
                <div class="iiekfr8">
                    <div class="i1q3l8tw">
                        <svg aria-label="folder" class="AssemblyIcon AssemblyIcon--medium" role="img"><noscript></noscript>
                        <use xlink:href="#folder"></use><noscript></noscript></svg><span class="AssemblyMenuItem--title t1nsp0j0">Folder</span>
                    </div>
                </div>
            </div>
        </button>
        <button class="UILink" type="button">
            <div class="c1ap9d88">
                <div class="iiekfr8">
                    <div class="i1q3l8tw">
                        <svg aria-label="class" class="AssemblyIcon AssemblyIcon--medium" role="img"><noscript></noscript>
                        <use xlink:href="#class"></use><noscript></noscript></svg><span class="AssemblyMenuItem--title t1nsp0j0">Class</span>
                    </div>
                </div>
            </div>
        </button>
    </div>
    

    Python代码:

    from selenium import webdriver
    from selenium.webdriver.common.keys import Keys
    
    driver = webdriver.Chrome('./chromedriver')
    driver.get("https://quizlet.com")
    
    # Code to log in to quizlet omitted...
    
    # Grab and click first 'Create' button
    create_button = driver.find_element_by_xpath("//button[@aria-label='Create']") # only one element has this aria-label
    create_button.send_keys(Keys.RETURN) # doesn't display drop-down menu, makes me think something is wrong here but also does not throw an error
    # Grab and click 'Study Set' button
    div_containting_study_set_button = driver.find_element_by_class_name('s1ovpdog') # only one element has this class
    study_set_button = div_containting_study_set_button.find_elements_by_class_name('UILink')[0] # returns 3 buttons, only need first one
    study_set_button.send_keys(Keys.RETURN) # Error,ElementNotInteractableException
    

    raise exception_class(message, screen, stacktrace)
    selenium.common.exceptions.ElementNotInteractableException: Message: element not interac
    table
    

    不过 study_set_button 应该是指 button

    编辑: 经过寻找,我发现 is_displayed() 然后跑了

    create_button.is_displayed() # True
    study_set_button.is_displayed() #False
    

    这是回报 True False 分别是。我想我的问题就在那里。

    1 回复  |  直到 1 周前
        1
  •  1
  •   JeffC    1 周前

    这就是我找到的工作。要在下拉列表中找到“研究集”的唯一定位器并不容易。页面上有两个“Study set”元素,DOM中的第一个元素不可见。我添加了等待只是为了安全,因为你点击和下拉列表必须加载。你可能不需要等待,但它不会伤害有他们(它不会减慢任何东西),以防万一。

    from selenium.webdriver.common.by import By
    from selenium.webdriver.support.ui import WebDriverWait
    from selenium.webdriver.support import expected_conditions as EC
    
    wait = WebDriverWait(driver, 10)
    wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR, "button[aria-label='Create']"))).click()
    wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR, "div.UIOverlayTrigger-content svg[aria-label='sets'] + span"))).click()