Unable to select from dropdown in selenium using vba

Question

Hi I am new to selenium via VBA, so I am trying to automate a process by loging into a webpage navigate and get data extracted into the excel file. From what I have researched, first i have call the dropdown by click and then select the option.

Below is my code

Sub Praise()
Dim bot As New WebDriver
bot.Start "chrome"
bot.Get "https://dashboard.stripe.com/login"
bot.FindElementById("email").SendKeys ActiveCell.Value
bot.FindElementById("password").SendKeys ActiveCell.Offset(0, 1).Value
bot.FindElementByTag("form").submit
Application.Wait (Now + TimeValue("0:00:8"))
Set myelement = bot.FindElementByClass("bs-Link", Raise:=False)
If myelement Is Nothing Then
Else
bot.FindElementByClass("bs-Link").Click
End If
bot.FindElementByClass("db-AccountSwitcher-chevron").Click ' to call dropdown
bot.FindElementByClass("Text-color--white Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline").Click ' Error occurs in this line

End Sub

Here is the code to call dropdown

 <div class="db-AccountSwitcher-button Box-root Flex-flex Flex-alignItems--center"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-activeImage"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--dark Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--noWrap Text-display--inline">Masorini.com</span></div> <div class="Box-root Margin-left--8"> <div class="db-AccountSwitcher-chevron"></div> </div> </div> 

Here is the code of the dropdown list

 <div class="ScrollableMenu SearchableList-items" id="searchable-list-results-47" role="listbox" style="max-height: 200px;"> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Masorini.com</span></div> </div> </div> </div> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Ariavoss</span></div> </div> </div> </div> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Bikinimas</span></div> </div> </div> </div> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Diva Noche</span></div> </div> </div> </div> <div aria-selected="true" role="option"> <div> <div class="Box-root Box-background--blue Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(255, 255, 255);"><span class="Text-color--white Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Bootyswim</span></div> </div> </div> </div> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Zainno</span></div> </div> </div> </div> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Actiwears</span></div> </div> </div> </div> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Rockactive</span></div> </div> </div> </div> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Cat Lovers</span></div> </div> </div> </div> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Chicnuit</span></div> </div> </div> </div> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Bootyswim</span></div> </div> </div> </div> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Diva Noche</span></div> </div> </div> </div> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Bikinimas</span></div> </div> </div> </div> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">EpicDevil.co</span></div> </div> </div> </div> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">probago.com</span></div> </div> </div> </div> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Activepose</span></div> </div> </div> </div> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">SiaRose.com</span></div> </div> </div> </div> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Sunvoss</span></div> </div> </div> </div> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Mosselli</span></div> </div> </div> </div> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Aroabikini</span></div> </div> </div> </div> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">Swimlemon</span></div> </div> </div> </div> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">milewatches</span></div> </div> </div> </div> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--fallback"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">stripe-northwrist@massiveshops.com</span></div> </div> </div> </div> <div aria-selected="false" role="option"> <div> <div class="Box-root Box-background--white Padding-horizontal--8 Padding-vertical--4 Flex-flex Flex-alignItems--center" style="cursor: pointer; user-select: none;"> <div class="Box-root Margin-right--8"> <div class="db-AccountSwitcher-accountImage Box-root Box-background--white"> <div class="db-AccountSwitcher-accountImage--content db-AccountSwitcher-accountImage--newAccount"></div> </div> </div> <div class="TruncatedText" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"><span class="Text-color--default Text-fontSize--16 Text-fontWeight--medium Text-lineHeight--24 Text-typeface--base Text-wrap--wrap Text-display--inline">New account</span></div> </div> </div> </div> </div> 

Here is the error code

Answer 1

I am not sure about the click part for this but you need to remove spaces from the class name to get rid of that error

bot.FindElementByCss(".Text-color--white.Text-fontSize--16.Text-fontWeight--medium.Text-lineHeight--24.Text-typeface--base.Text-wrap--wrap.Text-display--inline").Click 

That targets Bootyswim

If click works then you should also be able to use:

bot.FindElementByXPath("//*[@role='option'][5]").Click

Then you change the [5] for your other options.

Try the xpath here and play with selecting your other options.

Answer 2

You don't actually click the drop down then select the value. You simply set the drop down field to the value you want it to be.

Here's my little code snippet that does this on a site I need to navigate.

Dim element As Selenium.WebElement
Set element = WaitForElement(byName, "Your element ID here")
element.AsSelect.SelectByText "The exact text that's in the drop down"

The first line calls the function below - I was running into timeout issues waiting for the website to finish loading, so I wrote that to be able to intelligently wait until the page loaded before giving up on not finding the element.

The second line explicitly sets the drop down to the value that I'm looking for - there's no clicking on the element and selecting.

Private Function WaitForElement(ByVal Method As FindElementBy, ByVal elementID As String) As Selenium.WebElement

  Dim startTimer As Single
  startTimer = Timer

  Dim waitTime As Single
  waitTime = this.Driver.Timeouts.ImplicitWait / 100

  Dim webBit As Selenium.WebElement
  On Error Resume Next    'it is possible that we'll go looking for the element before it's been returned to view, that's fine, we're waiting for it
  While webBit Is Nothing And Timer < (startTimer + waitTime)
    Select Case Method
      Case byClass
        Set webBit = this.Driver.FindElementByClass(elementID)
      Case byCSS
        Set webBit = this.Driver.FindElementByCss(elementID)
      Case byID
        Set webBit = this.Driver.FindElementById(elementID)
      Case byLinkText
        Set webBit = this.Driver.FindElementByLinkText(elementID)
      Case byName
        Set webBit = this.Driver.FindElementByName(elementID)
      Case byPartialLinkText
        Set webBit = this.Driver.FindElementByPartialLinkText(elementID)
      Case byTag
        Set webBit = this.Driver.FindElementByTag(elementID)
      Case byXPath
        Set webBit = this.Driver.FindElementByXPath(elementID)
    End Select
  Wend
  On Error GoTo 0         'resume normal error handling

  Set WaitForElement = webBit

End Function