On our website we have a table which contains several rows and new rows can be added. Each row contains the same elements like dropdowns, textfields, number fields.

During the test execution, the table has 2 rows where the test is editing each field. In one teststep, i first edit the dropdown element of the first row and right after i edit the dropdown element of the second row.

The XPATH selector which im using to locate the dropdown is this:

$"(//input[@name='ProductPriceChannelId'])[1]" for the dropdown in the first row
$"(//input[@name='ProductPriceChannelId'])[2]" for the dropdown in the second row

When i use the inspect and search for the XPATH, it always shows me "1/1 elements found". So in general its locating the correct dropdown element and it exist just once.

But in 1/10 cases, after the test chose a option from the first dropdown element (1st row) and then right after, opens the second dropdown element (2nd row), it opens the first dropdown element too. So there are 2 dropdown menus open at the same time.

See the screenshot below, there you can see that both dropdown menus are open.

Does anyone know, what is causing this problem?

The methods i use to control the dropdown box is:

1. Click on dropdown element (In this example its the first row by adding 1

var field = _webDriver.FindElement(By.XPath($"(//input[@name='ProductPriceChannelId'])[1]"));
field.Click();

2. Click on one option from dropdown list

var field = _webDriver.FindElement(By.XPath($"//p[normalize-space()='{nameOfElementToChoose}']"));
field.Click();

EDIT1: Here are the first test steps which are calling each action on the website. I paste 2 parameters to the EditServiceChargesVersion. The integer is the row i want to edit, the "s" is the option i want to choose from the DropDownMenu

First: Here are the teststeps of the test

// ---------- EDIT SERVICE CHARGE VERSION
// 1. ROW: Edit Service Charges Version
_h.EditServiceChargesVersion(1, s);
// Check if no validation
_h.CheckOverlapValidation(1, false);
_h.CheckOverlapValidation(2, false);
// 2. ROW: Edit Service Charges Version
_h.EditServiceChargesVersion(2, s);
// Check Validation for both rows
_h.CheckOverlapValidation(1, true);
_h.CheckOverlapValidation(2, true);
_h.Save(SaveButtonStates.Error);

Second: Here is the EditServiceChargesVersion method (Paramter ServiceCharge contains just the string of the option the test should choose from the DropDown)

public void EditServiceChargesVersion(int rowPosition, ServiceCharge s)
{
var rowSelector = $"//tbody//tr[@class='mud-table-row'][{rowPosition}]";
_a.ClickElementFromDropDown($"{rowSelector}{VersionSelector}", $"{(int)s.ServiceChargeVersionId!} - {s.ServiceChargeVersionId.GetDisplayName()}");
}

Third: Here is the ClickElementFromDropDown method. This method calls ClickOnElement, which contains the code example that i shared on the top.

public void ClickElementFromDropDown(string selector, string nameOfElementToChoose, bool shouldCompareValue = true)
    {
        ClickOnElementWithWait(selector, $"//p[normalize-space()='{nameOfElementToChoose}']");
        ClickOnElement($"//p[normalize-space()='{nameOfElementToChoose}']");
        if (shouldCompareValue)
        {
            GetValueFromElementAndCompare(selector, nameOfElementToChoose);
        }
    }

Four: Here is the method ClickOnElement (ClickOnElementWithWait)

public void ClickOnElementWithWait(string selector, string selectorWait, int? timeToWait = null)
{
var field = _webDriver.FindElement(By.XPath(selector));
field.Click();
_fluentWait.Until(ExpectedConditions.ElementExists(By.XPath(selectorWait)));
}