1。简单的方法

Question

我正在尝试使用量角器选择下拉列表。此代码均无效。

it("Select Block from District", function() {

    const selectElement={}
    selectElement.selectElementDropdown =function(element,index,milliseconds){
     console.log("Selecting element by drop down","OK");

     element.all(by.tagName('option')).then(function(options){

         options[2].click(); 
    //here index 2 is hardcoded, which can be changed to options[index]
     });

     if(typeof milliseconds!=='undefined'){
         browser.sleep(milliseconds);
     }

    }

    module.exports =selectElement;

    const methodDropDown = {} //require('../Src/SelectElement.js');

    var DistrictDetails = function(){

    this.DistrictName = element.all(by.xpath("//label[text()='Select Block']")).get(7).element(by.xpath("//option[contains(text(),'Ambabhona')]"));
    //the selector is clicked to open the drop down

我已经使用发送键将值传递到文本框了

<div _ngcontent-c9="" class="col-sm-6">
    <label _ngcontent-c9="" class="col-md-5 control-label">District
        <span _ngcontent-c9="" class="err-msg">*</span>
    </label>
    <div _ngcontent-c9="" class="col-md-7">
        <p-dropdown _ngcontent-c9="" formcontrolname="districtId" placeholder="Select District"
            class="ng-tns-c6-189 ng-pristine ng-invalid ng-touched">
            <div class="ng-tns-c6-189 ui-dropdown ui-widget ui-state-default ui-corner-all ui-helper-clearfix"
                style="width: 138px;">
                <!---->
                <div class="ui-helper-hidden-accessible ng-tns-c6-189 ng-star-inserted">
                    <select class="ng-tns-c6-189" aria-hidden="true" tabindex="-1" aria-label=" ">
                        <!---->
                        <option class="ng-tns-c6-189 ng-star-inserted">Select District</option>
                        <!---->
                        <!---->
                        <!---->
                        <!---->
                        <option class="ng-tns-c6-189 ng-star-inserted" value="390" style="">Bargarh</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="391" style="">Jharsuguda</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="392" style="">Sambalpur</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="393" style="">Deogarh</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="394" style="">Sundergarh</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="395" style="">Keonjhar</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="396" style="">Mayurbhanj</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="397" style="">Balasore</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="398" style="">Bhadrak</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="399" style="">Kendrapara</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="400" style="">Jagatsinghpur</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="401" style="">Cuttack</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="402" style="">Jajpur</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="403" style="">Dhenkanal</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="404" style="">Angul</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="405" style="">Nayagarh</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="406" style="">Khordha</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="407" style="">Puri</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="408" style="">Ganjam</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="409" style="">Gajapati</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="410" style="">Kandhamal</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="411" style="">Boudh</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="412" style="">Sonepur</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="413" style="">Bolangir</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="414" style="">Nuapada</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="415" style="">Kalahandi</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="416" style="">Rayagada</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="417" style="">Nabarangpur</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="418" style="">Koraput</option>
                        <option class="ng-tns-c6-189 ng-star-inserted" value="419" style="">Malkangiri</option>
                        <!---->
                    </select>
                </div>
                <div class="ui-helper-hidden-accessible">
                    <input class="ng-tns-c6-189" readonly="" role="listbox" type="text" aria-label=" ">
                </div>
                <!---->
                <!----><label
                    class="ng-tns-c6-189 ui-dropdown-label ui-inputtext ui-corner-all ui-placeholder ng-star-inserted">
                    Select District
                </label>
                <!---->
                <!---->
                <div class="ui-dropdown-trigger ui-state-default ui-corner-right"><span
                        class="ui-dropdown-trigger-icon ui-clickable pi pi-caret-down"></span>
                </div>
                <div class="ng-tns-c6-189 ui-dropdown-panel ui-widget-content ui-corner-all ui-shadow ng-trigger ng-trigger-panelState"
                    style="display: none; z-index: 1181; top: 27px; left: 0px; opacity: 0;">
                    <!---->
                    <div class="ui-dropdown-items-wrapper" style="max-height: 200px;">
                        <!---->
                    </div>
                </div>
            </div>
        </p-dropdown>
        <!---->
    </div>
</div>

想要选择Deogarh之类的值形式下拉列表

Answer 1

通常描述的方法之一。请注意，我在代码中使用async/await

1。简单的方法

声明js单击（在控制台中插入脚本）。然后直接单击任何选项

let jsClick = ($element) => browser.executeScript(
    "arguments[0].click();",
    $element.getWebElement()
);

let $option = $("option[value='395']");

await jsClick($option);

此注入的点击的作用与量角器.click()不同。即使它们是可见的，它也可能单击元素。可行，但实际上不是UI验证

2。用户会做什么

需要滚动

let scroll = ($element, offsetY = 0) => browser.executeScript(
        `arguments[0].scrollIntoView();
        window.scroll(
            0,window.scrollY-50-(${offsetY})
        );`,
        $element.getWebElement()
     );

await $visibleDropdown.click();
await scroll($yourOption);
await $yourOption.click();

让我知道是否都没有帮助

Answer 2

也许尝试一下：

HTML：在选择代码中，添加属性data-targetId：

[attr.data-targetId]="selectTag"

然后像这样在测试中使用它：

target='[data-targetId="selectTag"] .ng-star-inserted';
$('[role="listbox"]').click(); // click on ddListBtn to open the ddList if it's not open
let value = 'Kalahandi'; // an example
element(by.cssContainingText(target, value)).click();

Answer 3

您可以使用过滤器来做到这一点：

this.DDOptions = element.all(by.css('.ng-star-inserted'));

exports.SelectDDOption = function (option){
this.DDOptions.filter(function (elem, index) {
    return elem.getText().then(function (text) {
      return text.toUpperCase() === option.toUpperCase();
    });
  }).then(function (filteredElements) {
    filteredElements[0].click();
  });
};

现在调用此函数并传递您要选择的选项：

this.SelectDDOption('Jharsuguda');

Answer 4

尝试以下选项

const dropDown = element(by.css('div.ui-helper-hidden-accessible > select > option');

await dropDown.sendKeys('Deogarh');

希望它对您有帮助

Answer 5

我认为首先您应该检查选项的位置：

单击下拉包装
等待下拉，显示选项。
右键单击一个选项，然后选择“检查”。现在您可以看到选项在哪里。

按照您的html代码

<select class="ng-tns-c6-189" aria-hidden="true" tabindex="-1" aria-label=" ">

“选择”中有一个咏叹调隐藏字段

当您单击drop-down-wrap，下拉列表并显示选项时，aria-hidden字段为false：（aria-hidden =“ false”）
关闭下拉菜单时，不显示选项，aria-hidden =“ true”。

所以我认为选项和下拉包装是相同的html页面。

当您知道选项在哪里时，您将正确编写代码。推荐，您的代码应逐步编写：

var EC = protractor.ExpectedConditions;

单击下拉包装：以两种方式选择一种

element（by.css（'p-dropdown div.ui-dropdown.ui-widget'）。click（）;

browser.executeScript（“ arguments [0] .click（）;”，element（by.css（'p-dropdiv div.ui-dropdown.ui-widget'）。getWebElement（））;

浏览器，直到显示选项为止

browser.wait（EC.presenceOf（element（by.css（“ select [aria-hidden =” false“]”）））））））

或

browser.wait（EC.presenceOf（element（by.css（“ select [aria-hidden =” false“] option：nth-child（2）”））））））

或

browser.wait（EC.presenceOf（element（by.css（“ select [aria-hidden =” false“] option [value =” 391“]”）））））））

单击所需的选项

browser.executeScript（“ arguments [0] .click（）;”，element（by.css（“ select [aria-hidden =” false“] option [value =” 391“]”））。getWebElement（））;

如何使用框架“ jasmine”在量角器中选择下拉值，

5 个答案:

1。简单的方法

2。用户会做什么