通過 Selenium 單元測試訪問 Syncfusion 下拉菜單

Question

在我的單元測試中，我試圖斷言用戶可以訪問和 select 下拉菜單中的項目。 我已經構建了我能做的每個.FindElement()擴展，但是在運行單元測試時它找不到下拉菜單。 任何人都可以幫我弄清楚如何 select 嗎？ 下拉項列表來自代碼庫中別處構建的列表。

@Syncfusion下拉列表代碼

<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>

@測試

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

SelectElement class 僅適用於 SELECT HTML 元素，不能在此處使用。 您必須單擊該元素以打開下拉菜單，然后根據使用 XPath 包含的文本找到所需的元素。您尚未提供在瀏覽器中為下拉菜單生成的 HTML，因此我無法提供特定的定位器，但這應該給你一般的想法。

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

Answer 2

所以我使用的 XPath 是錯誤的，盡管我已經使用生成的 HTML 完成了它，但我安裝了 Selenium Edge Extension 並用它來記錄我正在做的測試。 那里有一個選項可以將輸出從 CSS select 更改為 XPath，這給了我正在尋找的正確路徑。

我認為這一定與加載瀏覽器后 Syncfusion 組件的生成方式有關，但 class 和 ID 與我想象的完全不同。 感謝@JeffC 的幫助！