Accessing a Syncfusion Dropdown through Selenium Unit Tests

Question

In my unit test, I'm trying to assert that a user can access and select an item from a dropdown menu. I have built every .FindElement() extension I can do, but when running the Unit Test it isn't finding the dropdown menu. Could anybody help me figure out how to select it? The list of dropdown items comes from a list built elsewhere in the code base.

@ Syncfusion Dropdown List Code

<SfDropDownList TItem="Industry" TValue="string" Placeholder="Select..." PopupHeight="20px" DataSource="@Industries" AllowFiltering="true" @bind-Value="Industry" ID="industry">
    <DropDownListEvents TItem="Industry" TValue="string" ValueChange="@(ChangeIndustry)"></DropDownListEvents>
    <DropDownListFieldSettings Text="IndustryName"></DropDownListFieldSettings>
</SfDropDownList>

@Test

var industry = driver.FindElement(By.Id("industry"));
var selectElement = new SelectElement(industry);
selectElement.SelectByText("Construction");

//Assert
Assert.Contains("Construction", industry.Text);

@HTML

<div class="mb-2 position-relative">
        <label class="label-client" for="Industry">Industry</label>
            -- <Dropdown Code Above> --
</div>

Answer 1

The SelectElement class is only for the SELECT HTML element and can't be used here. You'll have to click the element to open the dropdown and then find the desired element based on text contained using an XPath. You haven't provided the HTML generated in the browser for the dropdown so I can't provide a specific locator but this should give you the general idea.

var industry = driver.FindElement(By.Id("industry"));
industry.click(); // open the dropdown
driver.FindElement(By.XPath("//*[.='Sample option']")).click();

Answer 2

So the XPath I was using was wrong, even though I'd followed it through with the generated HTML, I installed the Selenium Edge Extension and used this to record the test I was doing. There is an option in there to change the outputs from CSS select to XPath, which gave me the correct path I was looking for.

I think it must be something to do with the way Syncfusion components generate once the browser is loaded up, but the class and IDs were completely different to the ones I had thought they were. Thanks for the help @JeffC!