Click through dropdown menu with selenium

I am trying to create flashcards on quizlet.com with selenium. If you visit, you will see a “Create” button (or just a “+” depending on window size) in the navbar, when you click this it turns into a dropdown menu with 3 more buttons: ‘Study Set’, ‘Folder’ and ‘Class’. (I am trying to click Study Set)

First, I am not even sure If I need to have selenium click the first ‘Create’ button to access the ‘Study Set’ button or if I can just jump straight to the ‘Study Set’ button. Anyway, here is the html related to the ‘Create’ button and ‘Study Set’ button, respectively:

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

and: (Note, all 3 buttons share the class ‘UILink’, the first button is the ‘Study Set’ button and the comments are mine)

<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 code:

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

When I run this, it throws

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

Though study_set_button should definitely be referencing a button element, I believe? Thanks for any help with this.

EDIT: Upon searching, I found is_displayed() and ran

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

this returns True and False, respectively. Think my problem lies somewhere there.

Answer

This is what I found to work. It was not easy to find a unique locator for “Study set” inside the dropdown. There are two “Study set” elements on the page and the first one in the DOM is not visible. I added the waits just to be safe since you are clicking and the dropdown has to load. You may not need the waits but it won’t hurt to have them (it won’t slow anything down) just in case.

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()

Advertisement

Answer