使用量角器處理下拉

Question

我在自動化過程中遇到一些瑣碎的問題。 我需要使用量角器選擇一個特定的選項。 我正在傳遞要選擇的選項的索引，然后單擊將其選中。 但是，我的click()方法出錯，指出該索引上的click()方法未定義。

這是我要嘗試的操作-在我的selectElements.js文件中，dropdown方法定義為

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;

我使用的是POM結構，因此dropdown方法位於單獨的.js文件中。 我在頁面文件中稱呼它

 const methodDropDown = require('../BasePage/selectElements.js');


 var signUpBankDetails = function(){

    this.bankName = element.all(by.css('.form-group')).get(7).element(by.xpath("//label[text()='Select Bank Name']"));
   //the selector is clicked to open the drop down

  console.log("Start of this block =========>");

  this.selectDropDownMethod = function(){
     console.log("Drop Down method start ==========>");
     this.bankName.click();
     browser.sleep(1000);
     methodDropDown.selectElementDropdown(this.bankName,0,1000);

   };

我收到以下錯誤消息：

   Failed: Cannot read property 'click' of undefined

this.bankName.click()塊工作正常，因為，我可以看到單擊了元素並出現了下拉菜單，但是選擇似乎出錯了。 我還附上了以下代碼的HTML代碼段-

PS-網頁正在使用Angular2。

Answer 1

當我查看HTML時，我看到標簽不包含select 。 選擇位於<div class="ui-helper-hidden-accessible">..</div> ，該標簽與標簽處於同一級別。

當我查看您的PO時，我看到您使用此方法將標簽 （ this.bankName ）作為ElementFinder傳遞給該方法methodDropDown.selectElementDropdown(this.bankName,0,1000); 。 methodDropDown.selectElementDropdown()開始從您傳遞的ElementFinder中搜索，該methodDropDown.selectElementDropdown()即為label ，而不是保存select的<div class="ui-helper-hidden-accessible">..</div> 。

也許您可以將其更改為以下內容：

// Define ElementFinder for the bankname component
const bankNameComponent = $('p-dropdown[formcontrolename="bankname"]');
// Open the dropdown
bankNameComponent.$('label').click();
// Click on an element by index
bankNameComponent.$$('select option').get(2).click();
// Or search by text in the dropdown
bankNameComponent.element(by.cssContainingText('option', 'BNI')).click();

希望能幫助到你

Answer 2

解決方案01

Select based on drop-down values attribute details

public selectOptionByValue(element: ElementArrayFinder,valueToSelect: string) : void{
        let clickedIndex: number;
        element.first().$$('option').filter(function(elem, index) {
            return elem.getAttribute("value").then(function(value) {
                if (value === valueToSelect) {
                    elem.click();
                    console.log('Yes ! Found option is:' + value);
                }
                return value === valueToSelect;
            });
        }).then(function (bool) {

        }).catch(function (err) {
            console.log('Ooops ! Error... '+err.message);
        });
    }

解決方案02

Select based on drop-down visible text details

public selectOptionByText(element: ElementArrayFinder,optionToSelect: string) : void{
        let clickedIndex: number;
        element.first().$$('option').filter(function(elem, index) {
            return elem.getText().then(function(text) {
                    if (text === optionToSelect) {
                        elem.click();
                        console.log('Yes ! Found option is:' + text);
                    }
                return text === optionToSelect;
            });
        }).then(function (bool) {

        }).catch(function (err) {
            console.log('Ooops ! Error... '+err.message);
        });
    }