Jak wybrać opcję w rozwijanych testach kątomierza e2e

Próbuję wybrać opcję z listy rozwijanej dla testów kątowych e2e przy użyciu kątomierza.

Oto fragment kodu opcji wyboru:

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

Próbowałem:

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

To daje mi następujący błąd:

Podano nieprawidłowy lub niedozwolony ciąg Informacje o kompilacji: wersja: „2.35.0”, wersja: „c916b9d”, godzina: „2013-08-12 15:42:01” Informacje o systemie: nazwa.os .: „Mac OS X” , os.arch: 'x86_64', os.version: '10 .9 ', java.version:' 1.6.0_65 'Informacje o sterowniku: driver.version: nieznany

Próbowałem też:

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

To daje mi następujący błąd:

ElementNotVisibleError: Element nie jest obecnie widoczny i nie można na niego wchodzić z czasem trwania lub limitem czasu polecenia: 9 milisekund Informacje o kompilacji: wersja: „2.35.0”, wersja: „c916b9d”, godzina: „12.08.2013 15:42: 01 'Informacje o systemie: os.name:' Mac OS X ', os.arch:' x86_64 ', os.version: '10 .9', java.version: '1.6.0_65' Identyfikator sesji: bdeb8088-d8ad-0f49-aad9 -82201c45c63f Informacje o sterowniku: org.openqa.selenium.firefox.FirefoxDriver Możliwości [{platforma = MAC, acceptSslCerts = true, javascriptEnabled = true, browserName = firefox, rotatable = false, locationContextEnabled = true, version = 24.0, cssSelCerts = true, javascriptEnabled = true, browserName = firefox, rotatable = false, locationContextEnabled = true, version = 24.0, cssSelectors, databaseEnabled = true, handlesAlerts = true, browserConnectionEnabled = true, nativeEvents = false, webStorageEnabled = true, applicationCacheEnabled = false, takesScreenshot = true}]

Czy ktoś może mi pomóc z tym problemem lub rzucić trochę światła na to, co tutaj robię źle.

Miałem podobny problem i ostatecznie napisałem funkcję pomocniczą, która wybiera rozwijane wartości.

Ostatecznie zdecydowałem, że mogę wybrać numer opcji, dlatego napisałem metodę, która przyjmuje element i opcję optionNumber, i wybiera tę opcję optionNumber. Jeśli optionNumber ma wartość null, to nic nie wybiera (pozostawiając niezaznaczone menu).

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

Napisałem wpis na blogu, jeśli chcesz więcej szczegółów, obejmuje również weryfikację tekstu wybranej opcji w menu rozwijanym: http://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/

U mnie zadziałało jak urok

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

Mam nadzieję, że to pomoże.

Eleganckie podejście polegałoby na stworzeniu abstrakcji podobnej do tego, co inne wiązania języka selenowego oferują po wyjęciu z pudełka (np.Select Klasa w Pythonie lub Javie).

Zróbmy wygodny wrapper i ukryjmy w nim szczegóły implementacji:

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;

Przykład użycia (zwróć uwagę, jak jest czytelny i łatwy w użyciu):

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

Rozwiązanie zaczerpnięte z tematu: Wybierz -> abstrakcja opcji .

FYI, utworzyłem żądanie funkcji: Wybierz -> abstrakcja opcji .

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

Aby uzyskać dostęp do określonej opcji, musisz podać selektor nth-child ():

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

W ten sposób dokonałem wyboru.

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

Oto jak to zrobiłem:

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

Spróbuj tego, to działa dla mnie:

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

Możesz spróbować tej nadziei, że zadziała

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

Inny sposób ustawienia elementu opcji:

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

Aby wybrać elementy (opcje) z unikalnymi identyfikatorami, jak tutaj:

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

Używam tego:

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

Napisaliśmy bibliotekę, która zawiera 3 sposoby wyboru opcji:

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>

Dodatkową cechą tych funkcji jest to, że czekają na wyświetlenie elementu przed wykonaniem jakiejkolwiek akcji na elemencie select.

Możesz go znaleźć na npm @ hetznercloud / protractor-test-helper . Dostępne są również czcionki TypeScript.

Może nie super eleganckie, ale wydajne:

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

To po prostu wysyła klucz w dół do wybranego selektora, w naszym przypadku używamy modelSelector, ale oczywiście możesz użyć dowolnego innego selektora.

Następnie w moim modelu obiektów strony:

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

A z testu:

myPage.selectMyOption(1);

Problem polega na tym, że rozwiązania, które działają na zwykłych kątowych polach wyboru, nie działają z materiałami kątowymi md-select i md-option używającymi kątomierza. Ten został opublikowany przez innego, ale zadziałał i nie mogę jeszcze skomentować jego postu (tylko 23 punkty rep). Ponadto trochę go wyczyściłem, zamiast browser.sleep, użyłem 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
});

Występuje problem z wyborem opcji w Firefoksie, który naprawia hack Droogansa, o którym chcę tutaj wyraźnie wspomnieć, mając nadzieję, że może to zaoszczędzić komuś kłopotów: https://github.com/angular/protractor/issues/480 .

Nawet jeśli twoje testy przechodzą lokalnie w Firefoksie, może się okazać, że zawodzą w CircleCI lub TravisCI lub czymkolwiek innym, czego używasz do CI i wdrażania. Świadomość tego problemu od samego początku zaoszczędziłaby mi dużo czasu :)

Pomocnik do ustawienia elementu opcji:

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

Jeśli poniżej znajduje się lista rozwijana-

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

Wtedy kod kątomierza może być-

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

Źródło - https://github.com/angular/protractor/issues/600

Wybierz opcję według indeksu:

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

Poprawiłem nieco rozwiązanie napisane przez PaulLa. Przede wszystkim poprawiłem kod tak, aby był kompatybilny z ostatnim API Protractor. Następnie deklaruję funkcję w sekcji „onPrepare” pliku konfiguracyjnego Protractor jako element członkowski instancji przeglądarki , dzięki czemu można się do niej odwoływać z dowolnej specyfikacji 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();
        });
    };
  },

Szukałem w sieci odpowiedzi na pytanie, jak wybrać opcję z menu modelu i użyłem tej kombinacji, która pomogła mi z materiałem Angular.

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

wygląda na to, że rzucając kod w jednym wierszu, mógł znaleźć element na liście rozwijanej.

To rozwiązanie zajęło dużo czasu. Mam nadzieję, że komuś to pomoże.

Chcieliśmy użyć eleganckiego rozwiązania używającego materiału angularjs, ale nie zadziałało, ponieważ tak naprawdę nie ma tagów option / md-option w DOM, dopóki nie klikniesz md-select. Więc „elegancki” sposób nie zadziałał dla nas (zwróć uwagę na kanciasty materiał!) Oto, co dla niego zrobiliśmy, nie wiem, czy to najlepszy sposób, ale zdecydowanie działa teraz

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

Musieliśmy mieć zaznaczone 4 zaznaczenia, a gdy wybór jest otwarty, istnieje nakładka na drodze wyboru następnego wyboru. dlatego musimy poczekać 500 ms, aby upewnić się, że nie będziemy mieć problemów z efektami materialnymi, które nadal działają.

Inny sposób ustawienia elementu opcji:

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


});

Możesz wybrać opcje rozwijane według wartości: $('#locregion').$('[value="1"]').click();

Oto jak to zrobić za pomocą wartości opcji lub indeksu . Ten przykład jest nieco prymitywny, ale pokazuje, jak robić, co chcesz:

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

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

    })

}

Możemy w tym celu stworzyć niestandardową klasę DropDown i dodać metodę jako:

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

Ponadto, aby zweryfikować, jaka wartość jest aktualnie wybrana, możemy mieć:

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

Poniższy przykład jest najłatwiejszy. Przetestowałem i zdałem w wersji Protractor5.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

Pełny kod

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

  });
});

Jest to prosta odpowiedź w jednym wierszu, w której angular ma specjalny lokalizator, który może pomóc w wyborze i indeksowaniu z listy.

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

Wybierz opcję według właściwości CSS

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

lub

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

Gdzie locregion (id), organization.parent_id (nazwa modelu) to atrybuty wybranego elementu.