[Bug]: Incorrect `<option>` selected when multiple `<select>` tags have options with the same value attribute

[dickermoshe]

Checklist before reporting

• [x] I have searched for similar issues and didn't find a duplicate.
• [x] I have updated to the latest version of pydoll to verify the issue still exists.

pydoll Version

1.7.0

Python Version

3.13.1

Operating System

Windows

Bug Description

First off, a huge thank you for creating this package! It's incredibly helpful and powerful, and I've been having a great experience with it overall.

I believe I've encountered a bug in how tags are selected from dropdowns when multiple elements on a page share tags with identical value attributes.

Example Scenario: Consider a form with two dropdowns:

1. A "Country" dropdown: Contains <option value="DE">GERMANY</option>
2. A "State" dropdown (e.g., for US states): Contains <option value="DE">DELAWARE</option>

If I attempt to select "DELAWARE" (value "DE") from the "State" dropdown, the "GERMANY" option (value "DE") in the "Country" dropdown is incorrectly selected instead.

This happens even if these 2 select tags are in separate forms

Steps to Reproduce

1. Create an HTML form with at least two <select> elements.
   • Example Select 1 (Country): <select name="country"> ... <option value="DE">GERMANY</option> ... </select>
   • Example Select 2 (State): <select name="state"> ... <option value="DE">DELAWARE</option> ... </select>
2. Use the library to attempt to select the option in the second select element using a specific XPath. * Target country (e.g., "US"). * Target state (e.g., "DE" for Delaware) using an XPath like //select[@name='state']//option[@value="DE"].
3. Observe which option is actually selected on the page.

Code Example

state_option = await page.wait_element(
    By.XPATH,
    f"""//select[@name='state']//option[@value="DE"]""",
    timeout=10,
)

print(await state_option.inner_html) # Prints <option value="DE">DELAWARE</option>
await state_option.click_option_tag() # Selects <option value="DE">GERMANY</option>

Expected Behavior

The <option> tag matching the specific XPath (e.g., "DELAWARE" in the state select) should be selected, and the corresponding dropdown should update.

Actual Behavior

The <option> tag with the matching value from the first <select> element in the DOM (e.g., "GERMANY" in the country select) is selected. The state dropdown remains unchanged.

Relevant Log Output

Additional Context

No response

[dickermoshe]

A quick glance through the code shows that indeed, we are only using an options value to select an option.

[dickermoshe]

This should be replaced with

CLICK_OPTION_TAG = """
    var optionTag = document.evaluate(
        '{xpath}',
        document,
        null,
        XPathResult.FIRST_ORDERED_NODE_TYPE,
        null
    ).singleNodeValue;
    optionTag.selected = true;

   
    var select = document.evaluate(
        'ancestor::select',
        optionTag,
        null,
        XPathResult.FIRST_ORDERED_NODE_TYPE,
        null
    ).singleNodeValue;
    var event = new Event('change', { bubbles: true });
    select.dispatchEvent(event);
    """

However I'm not sure how would be able to get the Full Xpath of the element