Question

我将为angular 4应用程序编写自动化脚本，使用primeng下拉。

以下代码用于下拉控件。

<p-dropdown formcontrolname="CertificationsType" class="ng-tns-c4-13 ng-touched ng-dirty ng-valid" ng-reflect-auto-width="false" ng-reflect-options="[object Object],[object Object" ng-reflect-name="CertificationsType">
     <div class="ng-tns-c4-13 ui-dropdown ui-widget ui-state-default ui-corner-all ui-helper-clearfix ui-dropdown-open" ng-reflect-ng-class="[object Object]">
        <div class="ui-helper-hidden-accessible">
            <input class="ng-tns-c4-13" readonly="" role="listbox" type="text" aria-label="Other Programming">
        </div>
       <label class="ng-tns-c4-13 ui-dropdown-label ui-inputtext ui-corner-all" ng-reflect-ng-class="[object Object]">Other Programming</label>
        <div class="ui-dropdown-trigger ui-state-default ui-corner-right">
            <span class="ui-clickable fa fa-fw fa-caret-down" ng-reflect-klass="ui-clickable" ng-reflect-ng-class="fa fa-fw fa-caret-down"></span>
        </div>
        <div class="ng-tns-c4-13 ui-dropdown-panel ui-widget-content ui-corner-all ui-shadow ng-trigger ng-trigger-panelState" ng-reflect-ng-class="ui-dropdown-panel ui-widget-co" style="display: block; z-index: 1008; top: 32px; left: 0px; opacity: 1;">
            <div class="ui-dropdown-items-wrapper" style="max-height: 200px;">
               <ul class="ui-dropdown-items ui-dropdown-list ui-widget-content ui-widget ui-corner-all ui-helper-reset ng-tns-c4-13">
                   <li class="ng-tns-c4-13 ui-dropdown-item ui-corner-all" ng-reflect-ng-class="[object Object]">
                       <span class="ng-tns-c4-13">Select Type</span>
                   </li>
           <li class="ng-tns-c4-13 ui-dropdown-item ui-corner-all ui-state-highlight" ng-reflect-ng-class="[object Object]">
                        <span class="ng-tns-c4-13">Other Programming</span>
                        </li><li class="ng-tns-c4-13 ui-dropdown-item ui-corner-all" ng-reflect-ng-class="[object Object]">
                            <span class="ng-tns-c4-13">Source Programming</span>
                        </li><li class="ng-tns-c4-13 ui-dropdown-item ui-corner-all" ng-reflect-ng-class="[object Object]">
                            <span class="ng-tns-c4-13">Techinical programming</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </p-dropdown>

我的页面对象文件代码如下。

//To return "Type" drop down field options 
getTypeFieldData(){

let type_dropdown = element(by.css('p-dropdown[formcontrolname="CertificationsType"]'));
let ul_element = type_dropdown.element(by.tagName('ul'));
let li_elements= ul_element.all(by.tagName('li'));
    return li_elements;         
}

我的规范文件代码如下。

//Testcase 19 : To click on every option in the 
    //"Type" drop down 
    it('To click on every option in the Type drop down',()=>{
        //To click on every element of the "Type" drop down field content
        let list=page.getTypeFieldData();

                 list.each(function(options,index){

                             options[index].click();
                            browser.driver.sleep(5000);
                })
        });

执行代码后，它显示以下错误信息。

should test certificate tab To click on every option in the Type drop down

- 失败：无法读取未定义

的属性“click”

任何人都可以帮我解决这个问题

Answer 1

通常需要先点击保存下拉列表的元素才能打开选择列表。

另外，由于您的陈旧元素引用错误，我将添加Expected Conditions

试试这段代码：

//Testcase 19 : To click on every option in the 
//"Type" drop down 
it('To click on every option in the Type drop down',()=>{
    var EC = protractor.ExpectedConditions;
    var dropdownElement = $('p-dropdown[formcontrolname="CertificationsType"] div.ui-dropdown');
    //To click on every element of the "Type" drop down field content
    let list=page.getTypeFieldData();
    list.each(function(option){
        //wait for the element to be visible and click the dropdown element to open selection
        browser.wait(EC.visibilityOf(dropdownElement),5000);
        dropdownElement.click();
        //wait for selection to be visible and click the value to select
        browser.wait(EC.visibilityOf(option), 5000);
        option.click();
        browser.driver.sleep(5000);
        })
    });

<强>更新

我的“dropdownElement”选择器中有一个拼写错误。而不是ui-dropdown它应该是div.ui-dropdown（错误使用CSS选择器 - 现在在上面的代码中修复）。

如果有“不可点击的元素，其他元素会收到点击”这样的消息，请调整“dropdownElement”以选择该元素。

无法使用量角器从下拉列表中选择选项

1 个答案: