1

I am making an Automated chrome extension. I need to select an option in a dropdown. I used

var element = document.getElementByClassName("className");
element.value = 1;

This changes the value on the screen, but doesn't trigger the web app, since it is triggered by mouse click. So I tried clicking on the option menu, but the option does not drop down when I click with

element.click()

or when I click the parent of this class, it doesn't drop down. I tried clicking by position

let ele = document.elementsFromPoint(1,1)
for(let i=0;i<ele.length;i++){
    ele.click();
}

But again this doesn't work too.

The html of the dropdown is:

<div class="css-1dbjc4n r-bnwqim">
  <select
    aria-label="Ay"
    data-focusable="true"
    class="r-30o5oe r-1niwhzg r-17gur6a r-1yadl64 r-jwli3a r-1loqt21 r-ubezar r-crgep1 r-1ny4l3l r-t60dpp r-iphfwy r-n072k1 r-vmopo1 r-c2syf2"
  >
    <option value="" aria-disabled="true" disabled="" class="r-yfoy6g"></option>
    <option value="1" class="r-yfoy6g">Ocak</option>
    <option value="2" class="r-yfoy6g">Şubat</option>
    <option value="3" class="r-yfoy6g">Mart</option>
    <option value="4" class="r-yfoy6g">Nisan</option>
    <option value="5" class="r-yfoy6g">Mayıs</option>
    <option value="6" class="r-yfoy6g">Haziran</option>
    <option value="7" class="r-yfoy6g">Temmuz</option>
    <option value="8" class="r-yfoy6g">Ağustos</option>
    <option value="9" class="r-yfoy6g">Eylül</option>
    <option value="10" class="r-yfoy6g">Ekim</option>
    <option value="11" class="r-yfoy6g">Kasım</option>
    <option value="12" class="r-yfoy6g">Aralık</option></select
  ><svg
    viewBox="0 0 24 24"
    class="r-111h2gw r-4qtqp9 r-yyyyoo r-50lct3 r-fdch1b r-dnmrzs r-633pao r-u8s1d r-zchlnj r-1plcrui r-1v2oles r-lrvibr"
  >
    <g>
      <path
        d="M20.207 8.147c-.39-.39-1.023-.39-1.414 0L12 14.94 5.207 8.147c-.39-.39-1.023-.39-1.414 0-.39.39-.39 1.023 0 1.414l7.5 7.5c.195.196.45.294.707.294s.512-.098.707-.293l7.5-7.5c.39-.39.39-1.022 0-1.413z"
      ></path>
    </g>
  </svg>
</div>

Is there a way to simulate mouse click on a dropdown-option menu? I don't want to use Selenium or AHK since I have been developing this extension for a long time. Thanks in advance

Sahin
  • 1,032
  • 14
  • 23

1 Answers1

1

If you just want to change the state of the select input you can use the following

Choose whichever element you want by changing the index

 const index = 2;
 document.getElementsByTagName("select")[0].options[index].selected = true
EugenSunic
  • 13,162
  • 13
  • 64
  • 86
  • This changes the dropdown but does not trigger the web app. When an option is selected it changes something in the page; but by your way, it is not triggered. The page stays the same – Sahin Sep 22 '20 at 22:34
  • Send a `change` event additionally, [How do I programmatically force an onchange event on an input?](https://stackoverflow.com/a/36648958) – wOxxOm Sep 23 '20 at 05:01