Selecting HTML dropdown with ReactJS in VBA - html

Question

I'm trying to use VBA to select a dropdown item from an HTML website that uses ReactJS. For this example, we can use the following website:
https://jedwatson.github.io/react-select/
<span class="Select-value-label" role="option" aria-selected="true" id="react-select-2--value-item">New South Wales</span>
If an HTML page lists all the select options on the dropdown, I can easily set the elementID to one of the dropdown values.
Set ie = CreateObject("InternetExplorer.Application")
With ie
.Visible = True
.Navigate "about:blank"
'with for page load
ieWaitForURL
.Navigate "https://jedwatson.github.io/react-select/"
ie.Document.getelementbyid("react-select-2--value-item").Value = "Victoria"
But the HTML of the ReactJS website doesn't list all the options of the dropdown, and the value of the innertext changes as I make a different selection.
Is there a way to select from a ReactJS dropdown using VBA if all the options aren't listed in the HTML?

Answer 1

It was actually a lot easier than I thought. The following uses selenium basic. Install selenium basic, ensure latest chromedriver.exe is in selenium folder, vbe > tools > references > add reference to selenium type library
I show grabbing all the option values into a dictionary. Also, selecting an item from the dropdown.
The key here is that the option menu is not a traditional select element, with child options, but uses React Select. The range of possible values are pulled via Ajax from this script.
I show how you could also retrieve the possible values from that script direct, at the end, using python, but am happy to translate to vba if you really are interested. Once the dropdown is clicked the list of available values can be collected.
If you want to go down the IE route you can use the same approach but need to trigger the events that will open the dropdown. These are also detailed in the js
script I think.
Option Explicit
Public Sub MakeSelection()
Dim d As WebDriver, i As Long, dropDownOptions As Object
Const URL = "https://jedwatson.github.io/react-select/"
Set d = New ChromeDriver
Set dropDownOptions = CreateObject("Scripting.Dictionary")
With d
.Start "Chrome"
.get URL
.FindElementByCss("button:nth-of-type(2)").Click
.FindElementByCss(".Select-arrow-zone").ClickAndHold
Dim item As Object
For Each item In .FindElementsByCss(".Select-menu div") 'put list of options in dictionary
dropDownOptions(item.Text) = i
i = i + 1
Next
For Each item In .FindElementsByCss(".Select-menu div") 'loop to select an option
If item.Text = "Victoria" Then 'If item.Text = dropDownOptions.item(3) etc....
item.Click
Exit For
End If
Next
Stop
.Quit
End With
End Sub
Python script to parse possible dropdown values from json:
This shows the 3 different element parts which are updated through the dropdown (labels, classes and values)
import requests
import re
import json
r = requests.get('https://jedwatson.github.io/react-select/app.js')
s = str(r.content)
p1 = re.compile('t\.AU=(.*)')
p2 = re.compile('.+?(?=,\[\d+\])')
data1 = re.findall(p1, s)[0]
data2 = re.findall(p2, data1)[0].replace(',disabled:!0','')
replacements = ['value:','label:','className:']
for item in replacements:
data2 = re.sub(item, '"' + item[:-1] + '":' , data2)
finals = data2.split(',t.US=')
finalAus = json.loads(finals[0])
# finalUs = json.loads(finals[1])
d = {}
i = 0
for item in finalAus:
d[item['label']] = i
# item['label']
# item['value']
# item['className']
i+=1
print(d)