วิธีเลือกตัวเลือกในการทดสอบไม้โปรแทรกเตอร์แบบหล่นลง js e2e

ฉันกำลังพยายามเลือกตัวเลือกจากเมนูแบบเลื่อนลงสำหรับการทดสอบ e2e เชิงมุมโดยใช้ไม้โปรแทรกเตอร์

นี่คือข้อมูลโค้ดของตัวเลือกการเลือก:

<select id="locregion" class="create_select ng-pristine ng-invalid ng-invalid-required" required="" ng-disabled="organization.id !== undefined" ng-options="o.id as o.name for o in organizations" ng-model="organization.parent_id">
    <option value="?" selected="selected"></option>
    <option value="0">Ranjans Mobile Testing</option>
    <option value="1">BeaverBox Testing</option>
    <option value="2">BadgerBox</option>
    <option value="3">CritterCase</option>
    <option value="4">BoxLox</option>
    <option value="5">BooBoBum</option>
</select>

ฉันเหนื่อย:

ptor.findElement(protractor.By.css('select option:1')).click();

สิ่งนี้ทำให้ฉันมีข้อผิดพลาดต่อไปนี้:

ระบุสตริงที่ไม่ถูกต้องหรือผิดกฎหมาย Build info: version: '2.35.0', revision: 'c916b9d', time: '2013-08-12 15:42:01' System info: os.name: 'Mac OS X' , os.arch: 'x86_64', os.version: '10 .9 ', java.version:' 1.6.0_65 'ข้อมูลไดรเวอร์: driver.version: ไม่ทราบ

ฉันได้ลองแล้ว:

ptor.findElement(protractor.By.xpath('/html/body/div[2]/div/div[4]/div/div/div/div[3]/ng-include/div/div[2]/div/div/organization-form/form/div[2]/select/option[3]')).click();

สิ่งนี้ทำให้ฉันมีข้อผิดพลาดต่อไปนี้:

ElementNotVisibleError: องค์ประกอบไม่สามารถมองเห็นได้ในขณะนี้ดังนั้นจึงอาจไม่มีการโต้ตอบกับระยะเวลาของคำสั่งหรือระยะหมดเวลา: 9 มิลลิวินาทีสร้างข้อมูล: เวอร์ชัน: '2.35.0', การแก้ไข: 'c916b9d', เวลา: '2013-08-12 15:42: 01 'ข้อมูลระบบ: os.name:' Mac OS X ', os.arch:' x86_64 ', os.version: '10 .9', java.version: '1.6.0_65' รหัสเซสชัน: bdeb8088-d8ad-0f49-aad9 -82201c45c63f ข้อมูลไดรเวอร์: org.openqa.selenium.firefox.FirefoxDriver ความสามารถ [{platform = MAC, acceptSslCerts = true, javascriptEnabled = true, browserName = firefox, rotatable = false, locationContextEnabled = true, version = 24.0, cssSelectorsEnabled = true, databaseEnabled = true, handlesAlerts = true, browserConnectionEnabled = true, nativeEvents = false, webStorageEnabled = true, applicationCacheEnabled = false, takesSc screenshot = true}]

ใครก็ได้โปรดช่วยฉันแก้ปัญหานี้หรือให้ความสำคัญกับสิ่งที่ฉันอาจทำผิดที่นี่

ฉันมีปัญหาที่คล้ายกันและในที่สุดก็เขียนฟังก์ชันตัวช่วยที่เลือกค่าแบบเลื่อนลง

ในที่สุดฉันก็ตัดสินใจว่าฉันเลือกตามหมายเลขตัวเลือกได้ดีดังนั้นจึงเขียนวิธีการที่ใช้องค์ประกอบและ optionNumber และเลือก optionNumber นั้น ถ้า optionNumber เป็นโมฆะก็จะไม่เลือกอะไรเลย (ปล่อยให้ดร็อปดาวน์ไม่ได้เลือก)

var selectDropdownbyNum = function ( element, optionNum ) {
  if (optionNum){
    var options = element.all(by.tagName('option'))   
      .then(function(options){
        options[optionNum].click();
      });
  }
};

ฉันเขียนบล็อกโพสต์หากคุณต้องการรายละเอียดเพิ่มเติมนอกจากนี้ยังครอบคลุมถึงการยืนยันข้อความของตัวเลือกที่เลือกในเมนูแบบเลื่อนลง: http://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/

สำหรับฉันทำงานเหมือนมีเสน่ห์

element(by.cssContainingText('option', 'BeaverBox Testing')).click();

หวังว่าจะช่วยได้

แนวทางที่สง่างามจะเกี่ยวข้องกับการสร้างสิ่งที่เป็นนามธรรมให้เหมือนกับการผูกภาษาซีลีเนียมอื่น ๆ ที่นำเสนอนอกกรอบ (เช่นSelectคลาสใน Python หรือ Java)

มาสร้างกระดาษห่อหุ้มที่สะดวกและซ่อนรายละเอียดการใช้งานไว้ด้านใน:

var SelectWrapper = function(selector) {
    this.webElement = element(selector);
};
SelectWrapper.prototype.getOptions = function() {
    return this.webElement.all(by.tagName('option'));
};
SelectWrapper.prototype.getSelectedOptions = function() {
    return this.webElement.all(by.css('option[selected="selected"]'));
};
SelectWrapper.prototype.selectByValue = function(value) {
    return this.webElement.all(by.css('option[value="' + value + '"]')).click();
};
SelectWrapper.prototype.selectByPartialText = function(text) {
    return this.webElement.all(by.cssContainingText('option', text)).click();   
};
SelectWrapper.prototype.selectByText = function(text) {
    return this.webElement.all(by.xpath('option[.="' + text + '"]')).click();   
};

module.exports = SelectWrapper;

ตัวอย่างการใช้งาน (สังเกตว่าอ่านง่ายและใช้งานง่ายแค่ไหน):

var SelectWrapper  = require('select-wrapper');
var mySelect = new SelectWrapper(by.id('locregion'));

# select an option by value
mySelect.selectByValue('4');

# select by visible text
mySelect.selectByText('BoxLox');

วิธีการแก้ปัญหาที่นำมาจากหัวข้อต่อไปนี้: Select -> นามธรรมตัวเลือก

FYI สร้างคำขอคุณสมบัติ: Select -> นามธรรมตัวเลือก

element(by.model('parent_id')).sendKeys('BKN01');

ในการเข้าถึงตัวเลือกเฉพาะคุณต้องระบุตัวเลือกที่ n-child ():

ptor.findElement(protractor.By.css('select option:nth-child(1)')).click();

นี่คือวิธีที่ฉันเลือก

function switchType(typeName) {
     $('.dropdown').element(By.cssContainingText('option', typeName)).click();
};

นี่คือวิธีที่ฉันทำ:

$('select').click();
$('select option=["' + optionInputFromFunction + '"]').click();
// This looks useless but it slows down the click event
// long enough to register a change in Angular.
browser.actions().mouseDown().mouseUp().perform();

ลองสิ่งนี้มันใช้งานได้สำหรับฉัน:

element(by.model('formModel.client'))
    .all(by.tagName('option'))
    .get(120)
    .click();

คุณสามารถลองสิ่งนี้หวังว่าจะได้ผล

element.all(by.id('locregion')).then(function(selectItem) {
  expect(selectItem[0].getText()).toEqual('Ranjans Mobile Testing')
  selectItem[0].click(); //will click on first item
  selectItem[3].click(); //will click on fourth item
});

อีกวิธีในการตั้งค่าองค์ประกอบตัวเลือก:

var select = element(by.model('organization.parent_id'));
select.$('[value="1"]').click();

หากต้องการเลือกรายการ (ตัวเลือก) ที่มีรหัสเฉพาะดังที่นี่:

<select
    ng-model="foo" 
    ng-options="bar as bar.title for bar in bars track by bar.id">
</select>

ฉันใช้สิ่งนี้:

element(by.css('[value="' + neededBarId+ '"]')).click();

เราเขียนไลบรารีซึ่งมี 3 วิธีในการเลือกตัวเลือก:

selectOption(option: ElementFinder |Locator | string, timeout?: number): Promise<void>

selectOptionByIndex(select: ElementFinder | Locator | string, index: number, timeout?: number): Promise<void>

selectOptionByText(select: ElementFinder | Locator | string, text: string, timeout?: number): Promise<void>

คุณสมบัติเพิ่มเติมของฟังก์ชั่นนี้คือพวกเขารอให้องค์ประกอบแสดงก่อนที่จะดำเนินการใด ๆ กับไฟล์ selectที่จะดำเนินการ

คุณสามารถค้นหาได้ใน NPM @ hetznercloud / ไม้โปรแทรกเตอร์ทดสอบผู้ช่วย การพิมพ์สำหรับ TypeScript มีให้เช่นกัน

อาจจะไม่หรูหรา แต่มีประสิทธิภาพ:

function selectOption(modelSelector, index) {
    for (var i=0; i<index; i++){
        element(by.model(modelSelector)).sendKeys("\uE015");
    }
}

สิ่งนี้ส่งคีย์ลงไปที่ตัวเลือกที่คุณต้องการในกรณีของเราเราใช้ modelSelector แต่เห็นได้ชัดว่าคุณสามารถใช้ตัวเลือกอื่นได้

จากนั้นในรูปแบบวัตถุหน้าของฉัน:

selectMyOption: function (optionNum) {
       selectOption('myOption', optionNum)
}

และจากการทดสอบ:

myPage.selectMyOption(1);

ปัญหาคือวิธีแก้ปัญหาที่ใช้กับกล่องเลือกเชิงมุมปกติไม่สามารถใช้กับวัสดุเชิงมุม md-select และ md-option โดยใช้ไม้โปรแทรกเตอร์ อันนี้โพสต์โดยคนอื่น แต่มันใช้ได้ผลสำหรับฉันและฉันยังไม่สามารถแสดงความคิดเห็นในโพสต์ของเขาได้ (มีเพียง 23 คะแนนซ้ำ) นอกจากนี้ฉันทำความสะอาดเล็กน้อยแทนที่จะเป็น browser.sleep ฉันใช้ browser.waitForAngular ();

element.all(by.css('md-select')).each(function (eachElement, index) {
    eachElement.click();                    // select the <select>
    browser.waitForAngular();              // wait for the renderings to take effect
    element(by.css('md-option')).click();   // select the first md-option
    browser.waitForAngular();              // wait for the renderings to take effect
});

มีปัญหาในการเลือกตัวเลือกใน Firefox ซึ่งการแฮ็กของ Droogansแก้ไขที่ฉันต้องการพูดถึงที่นี่อย่างชัดเจนหวังว่ามันจะช่วยใครบางคนปัญหาได้: https://github.com/angular/protractor/issues/480 https://github.com/angular/protractor/issues/480

แม้ว่าการทดสอบของคุณจะผ่านในเครื่องด้วย Firefox คุณอาจพบว่าพวกเขาล้มเหลวใน CircleCI หรือ TravisCI หรืออะไรก็ตามที่คุณใช้สำหรับ CI และการปรับใช้ การตระหนักถึงปัญหานี้ตั้งแต่แรกจะช่วยให้ฉันประหยัดเวลาได้มาก :)

ตัวช่วยในการตั้งค่าองค์ประกอบตัวเลือก:

selectDropDownByText:function(optionValue) {
            element(by.cssContainingText('option', optionValue)).click(); //optionValue: dropDownOption
        }

หากด้านล่างคือรายการแบบเลื่อนลงที่ระบุ

            <select ng-model="operator">
            <option value="name">Addition</option>
            <option value="age">Division</option>
            </select>

จากนั้นรหัสไม้โปรแทรกเตอร์สามารถ -

        var operators=element(by.model('operator'));
    		operators.$('[value=Addition]').click();

ที่มา - https://github.com/angular/protractor/issues/600

เลือกตัวเลือกตามดัชนี:

var selectDropdownElement= element(by.id('select-dropdown'));
selectDropdownElement.all(by.tagName('option'))
      .then(function (options) {
          options[0].click();
      });

ฉันได้ปรับปรุงโซลูชันที่เขียนโดย PaulL เล็กน้อย ก่อนอื่นฉันแก้ไขรหัสให้เข้ากันได้กับ Protractor API ตัวสุดท้าย จากนั้นฉันจะประกาศฟังก์ชันในส่วน 'onPrepare' ของไฟล์กำหนดค่า Protractor เป็นสมาชิกของอินสแตนซ์เบราว์เซอร์ดังนั้นจึงสามารถอ้างอิงได้ในรูปแบบ e2e spec ใด ๆ

  onPrepare: function() {
    browser._selectDropdownbyNum = function (element, optionNum) {
      /* A helper function to select in a dropdown control an option
      * with specified number.
      */
      return element.all(by.tagName('option')).then(
        function(options) {
          options[optionNum].click();
        });
    };
  },

ฉันลากตาข่ายเพื่อหาคำตอบเกี่ยวกับวิธีเลือกตัวเลือกในแบบจำลองแบบเลื่อนลงและฉันได้ใช้ชุดค่าผสมนี้ซึ่งช่วยฉันในการใช้วัสดุเชิงมุม

element(by.model("ModelName")).click().element(By.xpath('xpathlocation')).click();

ปรากฏว่าเมื่อโยนรหัสทั้งหมดในบรรทัดเดียวจะพบองค์ประกอบในเมนูแบบเลื่อนลง

ใช้เวลามากในการแก้ปัญหานี้ฉันหวังว่าสิ่งนี้จะช่วยใครบางคนได้

เราต้องการใช้โซลูชันที่หรูหราที่นั่นโดยใช้วัสดุ angularjs แต่มันไม่ได้ผลเพราะไม่มีแท็ก option / md-option ใน DOM จนกว่าจะคลิก md-select ดังนั้นวิธีที่ "สง่างาม" ไม่ได้ผลสำหรับเรา (สังเกตวัสดุเชิงมุม!) นี่คือสิ่งที่เราทำแทนไม่รู้ว่าเป็นวิธีที่ดีที่สุดหรือไม่ แต่ตอนนี้ได้ผลแน่นอน

element.all(by.css('md-select')).each(function (eachElement, index) {
    eachElement.click();                    // select the <select>
    browser.driver.sleep(500);              // wait for the renderings to take effect
    element(by.css('md-option')).click();   // select the first md-option
    browser.driver.sleep(500);              // wait for the renderings to take effect
});

เราจำเป็นต้องมีการเลือก 4 รายการและในขณะที่การเลือกเปิดอยู่จะมีการวางซ้อนในลักษณะการเลือกตัวเลือกถัดไป นั่นเป็นเหตุผลที่เราต้องรอ 500 มิลลิวินาทีเพื่อให้แน่ใจว่าเราจะไม่ประสบปัญหากับเอฟเฟกต์ทางวัตถุที่ยังดำเนินอยู่

อีกวิธีในการตั้งค่าองค์ประกอบตัวเลือก:

var setOption = function(optionToSelect) {

    var select = element(by.id('locregion'));
    select.click();
    select.all(by.tagName('option')).filter(function(elem, index) {
        return elem.getText().then(function(text) {
            return text === optionToSelect;
        });
    }).then(function(filteredElements){
        filteredElements[0].click();
    });
};

// using the function
setOption('BeaverBox Testing');

----------
element.all(by.id('locregion')).then(function(Item)
{
 // Item[x] = > // x is [0,1,2,3]element you want to click
  Item[0].click(); //first item

  Item[3].click();     // fourth item
  expect(Item[0].getText()).toEqual('Ranjans Mobile Testing')


});

คุณสามารถเลือกตัวเลือกแบบเลื่อนลงตามค่า: $('#locregion').$('[value="1"]').click();

นี่คือวิธีดำเนินการโดยใช้ค่าตัวเลือกหรือดัชนีนี่คือวิธีการที่จะทำมันด้วยค่าตัวเลือกอย่างใดอย่างหนึ่งหรือดัชนีตัวอย่างนี้ค่อนข้างหยาบ แต่แสดงวิธีการทำสิ่งที่คุณต้องการ:

HTML:

<mat-form-field id="your-id">
    <mat-select>
        <mat-option [value]="1">1</mat-option>
        <mat-option [value]="2">2</mat-option>
    </mat-select>
</mat-form-field>

ทีเอส:

function selectOptionByOptionValue(selectFormFieldElementId, valueToFind) {

  const formField = element(by.id(selectFormFieldElementId));
  formField.click().then(() => {

    formField.element(by.tagName('mat-select'))
      .getAttribute('aria-owns').then((optionIdsString: string) => {
        const optionIds = optionIdsString.split(' ');    

        for (let optionId of optionIds) {
          const option = element(by.id(optionId));
          option.getText().then((text) => {
            if (text === valueToFind) {
              option.click();
            }
          });
        }
      });
  });
}

function selectOptionByOptionIndex(selectFormFieldElementId, index) {

  const formField = element(by.id(selectFormFieldElementId));
  formField.click().then(() => {

    formField.element(by.tagName('mat-select'))
      .getAttribute('aria-owns').then((optionIdsString: string) => {
        const optionIds = optionIdsString.split(' ');

        const optionId = optionIds[index];
        const option = element(by.id(optionId));
        option.click();
      });
  });
}

selectOptionByOptionValue('your-id', '1'); //selects first option
selectOptionByOptionIndex('your-id', 1); //selects second option

static selectDropdownValue(dropDownLocator,dropDownListLocator,dropDownValue){
    let ListVal ='';
    WebLibraryUtils.getElement('xpath',dropDownLocator).click()
      WebLibraryUtils.getElements('xpath',dropDownListLocator).then(function(selectItem){
        if(selectItem.length>0)
        {
            for( let i =0;i<=selectItem.length;i++)
               {
                   if(selectItem[i]==dropDownValue)
                   {
                       console.log(selectItem[i])
                       selectItem[i].click();
                   }
               }            
        }

    })

}

เราสามารถสร้างคลาส DropDown ที่กำหนดเองสำหรับสิ่งนี้และเพิ่มวิธีการเป็น:

async selectSingleValue(value: string) {
        await this.element.element(by.xpath('.//option[normalize-space(.)=\'' + value + '\']')).click();
    }

นอกจากนี้ในการตรวจสอบค่าที่เลือกในปัจจุบันเราสามารถมี:

async getSelectedValues() {
        return await this.element.$('option:checked').getText();
    }

ตัวอย่างด้านล่างเป็นวิธีที่ง่ายที่สุด ฉันได้ทดสอบและส่งผ่านใน Protractor Version แล้ว5.4.2

//Drop down selection  using option's visibility text 

 element(by.model('currency')).element(by.css("[value='Dollar']")).click();
 Or use this, it   $ isshort form for  .By.css
  element(by.model('currency')).$('[value="Dollar"]').click();

//To select using index

var select = element(by.id('userSelect'));
select.$('[value="1"]').click(); // To select using the index .$ means a shortcut to .By.css

รหัสเต็ม

describe('Protractor Demo App', function() {

  it('should have a title', function() {

     browser.driver.get('http://www.way2automation.com/angularjs-protractor/banking/#/');
    expect(browser.getTitle()).toEqual('Protractor practice website - Banking App');
    element(by.buttonText('Bank Manager Login')).click();
    element(by.buttonText('Open Account')).click();

    //Drop down selection  using option's visibility text 
  element(by.model('currency')).element(by.css("[value='Dollar']")).click();

    //This is a short form. $ in short form for  .By.css
    // element(by.model('currency')).$('[value="Dollar"]').click();

    //To select using index
    var select = element(by.id('userSelect'));
    select.$('[value="1"]').click(); // To select using the index .$ means a shortcut to .By.css
    element(by.buttonText("Process")).click();
    browser.sleep(7500);// wait in miliseconds
    browser.switchTo().alert().accept();

  });
});

นี่เป็นคำตอบง่ายๆเพียงบรรทัดเดียวซึ่งเชิงมุมมีตัวระบุตำแหน่งพิเศษซึ่งสามารถช่วยในการเลือกและจัดทำดัชนีจากรายการ

element.all(by.options('o.id as o.name for o in organizations')).get(Index).click()

เลือกตัวเลือกตามคุณสมบัติ CSS

element(by.model("organization.parent_id")).element(by.css("[value='1']")).click();

หรือ

element(by.css("#locregion")).element(by.css("[value='1']")).click();

โดยที่ locregion (id), organization.parent_id (ชื่อรุ่น) เป็นแอตทริบิวต์ขององค์ประกอบที่เลือก