使用硒元素在角度选择框中选择项目

Question

我正在尝试使用selenium在下拉列表中进行选择。selectbox不是"select"的html类型，而是使用angular，因此它是一个"mat-select"html标记。

我简化了我的代码以使其工作，但无法使其工作。这是我现在的代码：

var q = driver.FindElement(By.TagName("mat-select"));
new SelectElement(q).SelectByText("My List Value");

当我运行此代码时，我得到：

Element should have been select but was mat-select

我该如何解决此问题？我尝试使用SendKeys；我的列表值"；有空格，空格会触发选择框打开或关闭，但不会选择正确的值。然后我读到了SelectByText，但这似乎需要一个正常的"，但我只有一个"。

这是选择的html：

<div class="mat-form-field-infix">
<mat-select _ngcontent-qpv-c46="" class="mat-select ng-tns-c12-118 ng-pristine ng-valid mat-select-empty ng-star-inserted ng-touched" role="listbox" id="mat-select-5" tabindex="0" aria-labelledby="mat-form-field-label-41" aria-required="false" aria-disabled="false" aria-invalid="false" aria-multiselectable="false">
<div class="mat-select-trigger" aria-hidden="true" cdk-overlay-origin="">
<div class="mat-select-value">
<!---->
<span class="mat-select-placeholder ng-tns-c12-118 ng-star-inserted">&nbsp;</span>
<!---->
</div>
<div class="mat-select-arrow-wrapper">
<div class="mat-select-arrow"></div>
</div>
</div>
<!---->
</mat-select>
<span class="mat-form-field-label-wrapper">
<!---->
<label class="mat-form-field-label ng-tns-c24-117 mat-empty mat-form-field-empty ng-star-inserted" id="mat-form-field-label-41" for="mat-select-5" aria-owns="mat-select-5">
<!----><!---->
<mat-label _ngcontent-qpv-c46="" class="ng-star-inserted">Properties</mat-label>
<!----><!---->
</label>
</span>
</div>

html中缺少所有选项？我知道c#，但不太有棱角，所以这对我来说有点有趣。我没有尝试点击，因为当我自己都看不到它们时，我不知道如何找到它们。

当我点击选择时，所有项目都会以某种神奇的角度出现。。。

Answer 1

出现错误的原因是SelectElement()只能与HTML SELECT元素一起使用。mat-select(和一些其他元素(可以被格式化为看起来像下拉列表，但它们不是SELECT下拉列表元素。正因为如此，我们将无法使用SelectElement()，但有一些方法可以解决这个问题。

我找到的最简单的方法是找到mat-select元素(通常按ID(，然后单击它打开下拉列表。然后使用包含期望字符串的XPath单击所需选项。下面的代码显示了这一点，但第二个定位器只是猜测，因为您提供的HTML没有显示下拉选项。如果你更新HTML来显示这一点，我可以更新和测试定位器，但即使你不更新，这也应该为你指明正确的方向。

WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
wait.Until(ExpectedConditions.ElementToBeClickable(By.Id("mat-select-5"))).Click();
wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath("//span[contains(text(),'My List Value')]"))).Click();

为了安全起见，我增加了等待时间。它们可能不需要。

driver.FindElement(By.Id("mat-select-5")).Click();
driver.FindElement(By.XPath("//span[contains(text(),'My List Value')]")).Click();

---

我想你会不止一次使用这个。在这种情况下，我会写一个方法，接受所需的选项并选择它

public void SelectProperty(string propertyName)
{
WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
wait.Until(ExpectedConditions.ElementToBeClickable(By.Id("mat-select-5"))).Click();
wait.Until(ExpectedConditions.ElementToBeClickable(By.XPath($"//span[contains(text(),'{propertyName}')]"))).Click();
}

并称之为。。。

SelectProperty("My List Value");

Answer 2

Selenium不提供与mat-select交互的方法。您需要为Selenium编写一个自定义程序来与mat-select交互。

以下是如何使用C#选择Selenium的mat-select选项的示例：

IWebElement field = driver.FindElement(By.cssSelector('mat-select'));
// Click to open the dropdown.
field.Click();
// Query for options in the DOM. These exist outside of the mat-select component.
IReadOnlyList<WebElement> options = driver.FindElements(By.cssSelector("mat-option"));
// Find the option with the text that matches the one you are looking for.
options.First(element => element.GetText() == "My List Value")
// Click it to select it.
.Click();

你可能会想用某种可重复使用的方法来包装它