Changing selected value in a select option

Question

I am Currently having trouble change the value of a drop down list. I am currently adding an item to my cart on https://www.reebok.com/us/cart . I am trying to change the quantity.

I am trying to rewrite my java code into javascript. With that being said.

Select select = new Select(driver.findElement(By.xpath("//* [@id=\"app\"]/div/div/div/div/div[2]/div/main/div[1]/div/div/div/div/div/div[2]/div[2]/div[2]/div/div/select")));
select.selectByVisibleText(5);

Currently works for me in java using the Selenium library. But in Javascript, I am having trouble emulating the same step. I have tried everything.

Edit: I have tried

var select= document.evaluate('//*[@id="app"]/div/div/div/div/div[2]/div/main/div[1]/div/div/div/div/div/div[2]/div[2]/div[2]/div/div/select', document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
select.selectedIndex=7;

and

document.getElementsByClassName('gl-dropdown-native__select-element')[0].value=7;

Answer 1

This is working function to change the item in the basket. The issue was to found the handler and event type they rely on. It was mouseup and event directly in the window.

function changeItemTo(itermNumber) {
    const itemsSelector = '.gl-dropdown-custom__options button';
    const itemsElements = document.querySelectorAll(itemsSelector);
    if (itemsElements == null) throw new Error(`Selector ${itemsSelector} is wrong, nothing found`);
    const buttonForItem = itemsElements[itermNumber];
    if (buttonForItem == null) throw new Error(`Item with index: ${itermNumber} not found`);

    buttonForItem.dispatchEvent(new Event('mouseup', { bubbles: true, cancelable: true, }));
}

Hope this helps!