How can i select a element from a javascript/CSS website using Excel vba?

Question

Recently I've been working on a code to fill a web page made in JavaScript / CSS, however, when trying to fill any drop-down/pop-up menu value, although the text gets written on the field, the element is not selected, making it invalid.

I'm filling the fields by finding its elementID , and then sending the value in

    Dim ie As Object
    Set ie = CreateObject("InternetExplorer.Application")
    ie.document.getElementByID(CRMPE(i)).Value = CampoPE(i)
    Dim id As String

    id="_FOpt1:_FOr1:0:_FOSrCRM_CUSTOM_CARD_EMRQUOTE_C:0:_FOTsr1:0:ExtGen_pt11:ExtGen_cr1:0:ExtGen_ptCr11:ExtGen_attr_Tier_c_EMRQuote_c1::pop"   

where CRMPE contains fields ids, and CampoPE contains the values to be pasted on the web page.

For the dropdowns I tried:

    ie.document.getElementByID(id).Focus
    ie.document.getElementByID(id).selectedIndex = 1
    ie.document.getElementByID(id).FireEvent
    ie.document.getElementByID(id)(1).Click
    ie.document.getElementByID(id).FireEvent ("onchange")
    ie.document.getElementsByTagName(id).querySelector("Li[_adfiv=3]").Click

None of those worked.

I think the main problem is how the page is structured

Here follows the CSS code:

<ul class="x1qu" id="_FOpt1:_FOr1:0:_FOSrCRM_CUSTOM_CARD_EMRQUOTE_C:0:_FOTsr1:0:ExtGen_pt11:ExtGen_cr1:0:ExtGen_ptCr11:ExtGen_attr_Tier_c_EMRQuote_c1::pop"><li id="_FOpt1:_FOr1:0:_FOSrCRM_CUSTOM_CARD_EMRQUOTE_C:0:_FOTsr1:0:ExtGen_pt11:ExtGen_cr1:0:ExtGen_ptCr11:ExtGen_attr_Tier_c_EMRQuote_c1::sp" class="x1qz" style="width: 264px;"></li><li class="x1r3" _adfiv=""></li><li class="x1r3" _adfiv="NO_VALUE">No Value</li><li class="x1r3" _adfiv="0">0</li><li class="x1r3 p_AFSelected" _adfiv="1">1</li><li class="x1r3" _adfiv="2">2</li><li class="x1r3" _adfiv="3">3</li><li class="x1r3" _adfiv="4">4</li><li class="x1r3" _adfiv="5">5</li></ul>
<li id="_FOpt1:_FOr1:0:_FOSrCRM_CUSTOM_CARD_EMRQUOTE_C:0:_FOTsr1:0:ExtGen_pt11:ExtGen_cr1:0:ExtGen_ptCr11:ExtGen_attr_Tier_c_EMRQuote_c1::sp" class="x1qz" style="width: 264px;"></li>
<li class="x1r3" _adfiv=""></li>
<li class="x1r3" _adfiv="NO_VALUE">No Value</li>
<li class="x1r3" _adfiv="0">0</li>
<li class="x1r3 p_AFSelected" _adfiv="1">1</li>
<li class="x1r3" _adfiv="2">2</li>
<li class="x1r3" _adfiv="3">3</li>

As shown, the selected element has added to it's class name the p_AFSelected ,

I tried all of the above codes with .classname = "x1r3 p_AFSelected" , but no success

So the main question is, how can i select one of this values by clicking, or changing its classname to add the p_AFSelected ?

Any other solution that works is welcomed.

Answer 1

You could try attribute = value css selector to target elements

ie.document.querySelector("[_adfiv='2']").click

And (not sure if your html is correctly added to question)

ie.document.querySelectorAll("[_adfiv='2']").item(1).click