量角器从使用 mat-select 实现的下拉列表中选择值答案

【问题标题】：protractor select values from drop down implemented using mat-select量角器从使用 mat-select 实现的下拉列表中选择值
【发布时间】：2018-08-03 22:16:15
【问题描述】：

我希望编写一个量角器方法，该方法将从该下拉列表中选择值。下拉列表包含 4 个值，其中之一是“Delta”。我如何从此选择器中选择值，因为它没有我可以使用的任何选项标签。

我意识到实际选项在另一个标签下。如何选择选项？以下似乎不起作用。

element(by.cssContainingText('mat-select-panel mat-select-content .mat-option .mat-option-text', 'Fund')) .click();

【问题讨论】：

标签： typescript xpath css-selectors protractor angularjs-e2e

【解决方案1】：

我就是这样解决的。首先，我必须单击 dorpdown，然后再次单击以选择值。

element(by.tagName('mat-toolbar')).element(by.tagName('mat-select')).click();

element(by.cssContainingText('mat-option .mat-option-text', 'Delta')).click();
browser.waitForAngular();

感谢您的指导。欣赏它。

【讨论】：

【解决方案2】：

选项的 HTML 代码在 mat-select 节点之外。不要在mat-select 节点中找到它们。

// click the down arrow at right side to expand options
element(by.css('mat-select#mat-select-8 .mat-select-arrow-wrapper')).click();
// choose desired option
element(by.xpath('//mat-option[.="Delta"]')).click();

【讨论】：

那行不通。我发现 mat-options 是写在另一个标签“cdk-overlay container”下的。我编辑了我的问题以添加相同的屏幕截图。我仍然无法弄清楚如何从选项中进行选择

【解决方案3】：

by.cssContainingText 是一种解决方案。要获取包含文本“Delta”的元素，您可以执行element(by.cssContainingText('span','Delta'));

此外，类似的 QA（不是骗子）可能对您有用：dropdown select by visible text

【讨论】：

@njosep 您收到什么错误消息？