Como selecionar a opção em testes suspensos protractorjs e2e

Eu estou tentando selecionar uma opção de um suspenso para os testes e2e angular usando transferidor.

Aqui está o trecho de código da opção de seleção:

  Ranjans Mobile Testing BeaverBox Testing BadgerBox CritterCase BoxLox BooBoBum  

Eu tentei:

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

Isso me dá o seguinte erro:

Uma cadeia inválida ou ilegal foi especificada Informações da compilation: versão: ‘2.35.0’, revisão: ‘c916b9d’, tempo: ‘2013-08-12 15:42:01’ Informações do sistema: os.name: ‘Mac OS X’ , os.arch: ‘x86_64’, os.version: ’10 .9 ‘, java.version:’ 1.6.0_65 ‘Informação de driver: driver.version: desconhecido

Eu também tentei:

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

Isso me dá o seguinte erro:

ElementNotVisibleError: O elemento não está visível no momento e, portanto, pode não interagir com a duração ou o tempo limite do comando: 9 milisegundos Informações da compilation: versão: ‘2.35.0’, revisão: ‘c916b9d’, tempo: ‘2013-08-12 15:42: 01 ‘Informações do sistema: os.name:’ Mac OS X ‘, os.arch:’ x86_64 ‘, os.version: ’10 .9’, java.version: ‘1.6.0_65’ ID da session: bdeb8088-d8ad-0f49-aad9 -82201c45c63f Informação do controlador: org.openqa.selenium.firefox.FirefoxDriver Capabilities [{plataforma = MAC, acceptSslCerts = true, javascriptEnabled = verdadeiro, browserName = firefox, rotatable = false, locationContextEnabled = true, versão = 24.0, cssSelectorsEnabled = true, databaseEnabled = true, handlesAlerts = true, browserConnectionEnabled = true, nativeEvents = false, webStorageEnabled = true, applicationCacheEnabled = false, takesScreenshot = true}]

Alguém por favor pode me ajudar com esse problema ou lançar alguma luz sobre o que eu poderia estar fazendo errado aqui.

   

    Eu tive um problema semelhante e, finalmente, escrevi uma function auxiliar que seleciona valores suspensos.

    Eu finalmente decidi que estava bem selecionando por número de opção e, portanto, escrevi um método que usa um elemento e o optionNumber, e seleciona esse optionNumber. Se o optionNumber for nulo, não selecionará nada (deixando a lista suspensa desmarcada).

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

    Eu escrevi uma postagem no blog, se você quiser mais detalhes, também abrange a verificação do texto da opção selecionada em um menu suspenso: http://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/

    Para mim funcionou como um encanto

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

    Espero que ajude.

    Uma abordagem elegante envolveria a criação de uma abstração semelhante à que outras ligações de idioma de selenium oferecem, prontas para uso (por exemplo, Select class em Python ou Java).

    Vamos criar um wrapper conveniente e ocultar os detalhes da implementação:

     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; 

    Exemplo de uso (note como é legível e fácil de usar):

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

    Solução tirada do seguinte tópico: Select -> option abstraction .


    FYI, criou uma solicitação de recurso: Select -> option abstraction .

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

    Para acessar uma opção específica, você precisa fornecer o seletor nth-child ():

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

    Foi assim que fiz minha seleção.

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

    Veja como eu fiz:

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

    Tente isso, está funcionando para mim:

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

    Você pode tentar esta esperança que vai funcionar

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

    Outra maneira de definir um elemento de opção:

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

    Talvez não seja super elegante, mas eficiente:

     function selectOption(modelSelector, index) { for (var i=0; i 

    Isso apenas envia a chave para baixo na seleção desejada, no nosso caso, estamos usando o modelSelector, mas obviamente você pode usar qualquer outro seletor.

    Então no meu modelo de object de página:

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

    E do teste:

     myPage.selectMyOption(1); 

    Para selecionar itens (opções) com IDs únicos, como aqui:

      

    Eu estou usando isso:

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

    O problema é que as soluções que funcionam em checkboxs de seleção angulares regulares não funcionam com o Material Angular md-select e md-option usando o transferidor. Este foi postado por outro, mas funcionou para mim e eu sou incapaz de comentar sobre o seu post ainda (apenas 23 pontos de rep). Além disso, eu limpei um pouco, em vez de browser.sleep, eu usei browser.waitForAngular ();

     element.all(by.css('md-select')).each(function (eachElement, index) { eachElement.click(); // select the  

    Nós escrevemos uma biblioteca que inclui 3 maneiras de selecionar uma opção:

     selectOption(option: ElementFinder |Locator | string, timeout?: number): Promise selectOptionByIndex(select: ElementFinder | Locator | string, index: number, timeout?: number): Promise selectOptionByText(select: ElementFinder | Locator | string, text: string, timeout?: number): Promise 

    Uma característica adicional dessas funções é que elas aguardam que o elemento seja exibido antes que qualquer ação na select seja executada.

    Você pode encontrá-lo em npm @ hetznercloud / protractor-test-helper . As tipologias para o TypeScript também são fornecidas.

    Há um problema com a seleção de opções no Firefox que as correções de hack do Droogans que eu quero mencionar aqui explicitamente, esperando que isso possa salvar alguns problemas: https://github.com/angular/protractor/issues/480 .

    Mesmo que seus testes estejam passando localmente com o Firefox, você pode descobrir que eles estão falhando no CircleCI ou no TravisCI ou o que você estiver usando para a implantação e o IC. Estar ciente deste problema desde o início teria me poupado muito tempo 🙂

    Ajudante para definir o elemento de opção:

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

    Se abaixo está o dropdown dado

       

    Selecione a opção por índice:

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

    Queríamos usar a solução elegante usando o material angularjs, mas não funcionou porque na verdade não há nenhuma opção / md-option no DOM até que o md-select seja clicado. Então, a maneira “elegante” não funcionou para nós (note o material angular!) Aqui está o que fizemos para isso, não sei se é a melhor maneira, mas está definitivamente funcionando agora

     element.all(by.css('md-select')).each(function (eachElement, index) { eachElement.click(); // select the  

    Precisamos ter 4 seleções selecionadas e enquanto o select está aberto, há uma sobreposição na seleção da próxima seleção. é por isso que precisamos aguardar 500ms para garantir que não tenhamos problemas com os efeitos materiais ainda em ação.

    Outra maneira de definir um elemento de opção:

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

    Eu tenho vasculhado a rede para obter uma resposta sobre como selecionar uma opção em um menu suspenso de modelo e usei essa combinação que me ajudou com o material Angular.

    elemento (by.model (“ModelName”)). click (). elemento (By.xpath (‘xpath localização’)). click ();

    parece que, ao lançar o código em uma única linha, ele poderia encontrar o elemento na lista suspensa.

    Levou muito tempo para esta solução, espero que isso ajude alguém.

    Você pode selecionar opções suspensas por valor: $('#locregion').$('[value="1"]').click();

    Eu melhorei um pouco a solução escrita por PaulL. Primeiro de tudo, consertei o código para ser compatível com a última API do Protractor. E então eu declaro a function na seção ‘onPrepare’ de um arquivo de configuração do Protractor como um membro da instância do navegador , para que possa ser referenciada a qualquer especificação 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(); }); }; }, 

    Aqui está como fazer isso por qualquer valor de opção ou índice . Este exemplo é um pouco grosseiro, mas mostra como fazer o que você quer:

    html:

       1 2   

    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 

    Selecione a opção por propriedade CSS

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

    ou

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

    Onde locregion (id), organization.parent_id (nome do modelo) são os atributos do elemento select.

    Você pode selecionar opções suspensas como esta:

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