Click Drop Down Menu with Selenium in Python

Question

I am trying to finish my script with clicking on my picture in the top corner which leads to a drop down menu where the log out button is located. I can get Selenium to recognize the picture and click the picture to have the drop down menu appear, but I cannot get it to click the last button.

This is the code from the website for the log out button that I am trying to click:

<a id="ctl00_ctl00_mainContent_MainHeader_HeaderSection_lnkLogout" href="javascript:__doPostBack('ctl00$ctl00$mainContent$MainHeader$HeaderSection$lnkLogout','')"><i class="fa fa-power-off  fa-fw"></i>
                                <span>Log Out</span> </a>

This is the whole code for the whole drop down. It looks like it's a list which I didn't realize the first time around, but i remembered reading that you can select a list by number?

<div class="dropdown header-container user-actions-container open">

                        <a id="ctl00_ctl00_mainContent_MainHeader_HeaderSection_hypPicture" class="employee-picture" role="button" data-toggle="dropdown" aria-expanded="true"><span id="ctl00_ctl00_mainContent_MainHeader_HeaderSection_imgPicture" alternatetext="Employee Picture" imagealign="Top"><img class="img-rounded" src="https://share.striven.com//pimg/BA4FE360/Employee/thumb-b8598be5-5cd3-48c3-86ab-79fc9985b95e-07252018.jpg"></span></a>




                        <ul class="dropdown-menu dropdown-menu-right">

                                    <li>
                                        <a id="ctl00_ctl00_mainContent_MainHeader_HeaderSection_rptEmployeeActions_ctl00_lnkAction" href="/HR/Appointments/AppointmentsCalendar.aspx?nav=1"><i class="fa fa-calendar  fa-fw"></i>                                                           
                                          <span>Calendar</span>  

                                        </a></li>

                                    <li>
                                        <a id="ctl00_ctl00_mainContent_MainHeader_HeaderSection_rptEmployeeActions_ctl01_lnkAction" href="/Finance/Reimbursements/ReimbursementsMyReimbursements.aspx?nav=1"><i class="fa fa-money  fa-fw"></i>                                                           
                                          <span>Expenses</span>  

                                        </a></li>

                                    <li>
                                        <a id="ctl00_ctl00_mainContent_MainHeader_HeaderSection_rptEmployeeActions_ctl02_lnkAction" href="/HR/ReportBuilder/MyReports.aspx?nav=1"><i class="fa fa-bar-chart   fa-fw"></i>                                                           
                                          <span>Reports</span>  

                                        </a></li>

                                    <li>
                                        <a id="ctl00_ctl00_mainContent_MainHeader_HeaderSection_rptEmployeeActions_ctl03_lnkAction" href="/AssetManagement/MyAssets/DialogMyAssetList.aspx?nav=1"><i class="fa fa-book   fa-fw"></i>                                                           
                                          <span>Reserved Assets</span>  

                                        </a></li>

                                    <li>
                                        <a id="ctl00_ctl00_mainContent_MainHeader_HeaderSection_rptEmployeeActions_ctl04_lnkAction" href="/Collaboration/DialogMySubscriptions.aspx?nav=1"><i class="fa fa-envelope-o  fa-fw"></i>                                                           
                                          <span>Subscriptions</span>  

                                        </a></li>

                                    <li>
                                        <a id="ctl00_ctl00_mainContent_MainHeader_HeaderSection_rptEmployeeActions_ctl05_lnkAction" href="/HR/Timeoff/EmployeeTimeoff.aspx?nav=1"><i class="fa fa-calendar-times-o  fa-fw"></i>                                                           
                                          <span>Time Off</span>  

                                        </a></li>

                                    <li>
                                        <a id="ctl00_ctl00_mainContent_MainHeader_HeaderSection_rptEmployeeActions_ctl06_lnkAction" href="/HR/TimeAndMaterial/ManageTimeEntry.aspx?nav=1"><i class="fa fa-clock-o  fa-fw"></i>                                                           
                                          <span>Timesheet</span>  

                            <li>
                                <a id="ctl00_ctl00_mainContent_MainHeader_HeaderSection_lnkLogout" href="javascript:__doPostBack('ctl00$ctl00$mainContent$MainHeader$HeaderSection$lnkLogout','')"><i class="fa fa-power-off  fa-fw"></i>
                                <span>Log Out</span> </a></li>
                        </ul>
                </div>

I tried to mimic off of this code that someone helped me on here with for almost the same thing:

element = WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "a.hub-content-item[id*='SearchExplorer'][actiontype='Secondary']>span")))

but it wont recognize it for me.

Answer 1

You were pretty close. The <span> tag is not the immediate child so you need to replace > with a space character and you can use either of the following Locator Strategies :

• Using CSS_SELECTOR :

   WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CSS_SELECTOR, "a[id$='mainContent_MainHeader_HeaderSection_lnkLogout'] span"))).click() 

• Using XPATH :

   WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//a[contains(@id, 'mainContent_MainHeader_HeaderSection_lnkLogout')]//span[text()='Log Out']"))).click() 

• Note : You have to add the following imports :

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