Как выбрать опцию в выпадающих тестах protractorjs e2e

Ответ 1

У меня была похожая проблема, и в итоге я написал вспомогательную функцию, которая выбирает выпадающие значения.

В конце концов я решил, что у меня все в порядке, выбирая номер опции, и поэтому написал метод, который берет элемент и 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/

Ответ 2

Для меня работала как шарм

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

Надеюсь, что это поможет.

Ответ 3

Элегантный подход включал бы создание абстракции, аналогичной тому, что предлагают другие привязки языка селена из коробки (например, класс 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');

Решение взято из следующей темы: Выберите → опция абстракция.

К вашему сведению, создан запрос объекта: выберите → опция абстракция.

Ответ 4

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

Ответ 5

Чтобы получить доступ к определенному параметру, вам необходимо указать селектор nth-child():

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

Ответ 6

Вот как я сделал свой выбор.

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

Ответ 7

Вот как я это сделал:

$('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();

Ответ 8

Попробуй, он работает для меня:

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

Ответ 9

Вы можете попробовать эту надежду, что он будет работать

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
});

Ответ 10

Другой способ установки элемента опции:

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

Ответ 11

Мы написали библиотеку, которая включает в себя 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/protractor-test-helper. Типы для TypeScript также предоставляются.

Ответ 12

Возможно, не супер элегантный, но эффективный:

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);

Ответ 13

Чтобы выбрать элементы (параметры) с уникальными идентификаторами, например, здесь:

<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();

Ответ 14

Проблема заключается в том, что решения, которые работают с регулярными блоками выбора angular, не работают с angular Material 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
});

Ответ 15

Там проблема с выбором опций в Firefox, что Droogans hack исправляет, что я хочу упомянуть здесь явно, надеясь, что это может сэкономить кому-то определенную проблему: https://github.com/angular/protractor/issues/480.

Даже если ваши тесты проходят локально с Firefox, вы можете обнаружить, что они терпят неудачу в CircleCI или TravisCI или что вы используете для развертывания CI и Осознание этой проблемы с самого начала могло бы сэкономить мне много времени:)

Ответ 16

Помощник для установки элемента option:

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

Ответ 17

Если ниже приведено раскрывающееся меню -

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

Ответ 18

Выберите опцию по индексу:

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

Ответ 19

Мы хотели использовать элегантное решение там, используя материал angularjs, но он не работал, потому что в DOM на самом деле нет тегов опций/md-опций, пока не будет нажата кнопка md-select. Таким образом, "элегантный" способ не сработал для нас (обратите внимание на материал angular!) Вот что мы сделали для этого, не знаю, лучший ли он, но его определенно работающий сейчас

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 мс, чтобы убедиться, что мы не сталкиваемся с проблемой материальных эффектов, которые все еще находятся в действии.

Ответ 20

Другой способ установки элемента опции:

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');

Ответ 21

----------
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')


});

Ответ 22

Я травил сеть на ответ о том, как выбрать вариант в раскрывающемся списке модели, и я использовал эту комбинацию, которая помогла мне с материалом Angular.

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

кажется, что при метании кода в одной строке он мог найти элемент в выпадающем списке.

Ушло много времени на это решение. Я надеюсь, что это поможет кому-то.

Ответ 23

Вы можете выбрать варианты выпадающего списка по значению: $('#locregion').$('[value="1"]').click();

Ответ 24

Я немного улучшил решение, написанное PaulL. Прежде всего, я исправил код, совместимый с последним API-интерфейсом Protractor. И затем я объявляю функцию в разделе "onPrepare" конфигурационного файла Protractor в качестве члена экземпляра браузера, поэтому на него можно ссылаться на любую спецификацию e2e.

  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();
        });
    };
  },

Ответ 25

Вот как это сделать по значению опции или по индексу. Этот пример немного грубоват, но показывает, как сделать то, что вы хотите:

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>

TS:

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

Ответ 26

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();
                   }
               }            
        }

    })

}

Ответ 27

Как выбрать опцию в выпадающем тесте транспортира js e2e. Может ли кто-нибудь помочь мне здесь.

Афганистан Индия

Ответ 28

Выберите параметр с помощью свойства 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 (имя модели) являются атрибутами выбранного элемента.

Ответ 29

Вы можете выбрать выпадающие опции, например:

element(by.xpath(
'//*[@id="locregion"]//option[contains(text(),"Ranjans Mobile Testing")]'
)).click();