javascript - item - protractor xpath

Cómo seleccionar la opción en las pruebas drop-down de transportador e2e

Question

Estoy tratando de seleccionar una opción de un menú desplegable para las pruebas angulares e2e con transportador.

Aquí está el fragmento de código de la opción de selección:

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

Yo he tratado:

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

Esto me da el siguiente error:

Se ha especificado una cadena no válida o ilegal Información de compilación: versión: ''2.35.0'', revisión: ''c916b9d'', hora: ''2013-08-12 15:42:01'' Información del sistema: os.name: ''Mac OS X'' , os.arch: ''x86_64'', os.version: ''10 .9 '', java.version:'' 1.6.0_65 ''Información del controlador: controlador.versión: desconocida

También he intentado:

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

Esto me da el siguiente error:

ElementNotVisibleError: El elemento no está actualmente visible y, por lo tanto, no se puede interactuar con la duración o el tiempo de espera del comando: 9 milisegundos Información de compilación: versión: ''2.35.0'', revisión: ''c916b9d'', hora: ''2013-08-12 15:42: 01 ''Información del sistema: os.name:'' Mac OS X '', os.arch:'' x86_64 '', os.version: ''10 .9'', java.version: ''1.6.0_65'' ID de sesión: bdeb8088-d8ad-0f49-aad9 -82201c45c63f Información del controlador: org.openqa.selenium.firefox.FirefoxDriver Capabilities [{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, takesScreenshot = true}]

¿Puede alguien ayudarme con este problema o arrojar algo de luz sobre lo que podría estar haciendo mal aquí?

Answer 1

Así es como hice mi selección.

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

Answer 2

Así es como lo hice:

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

Answer 3

Ayudante para establecer un elemento de opción:

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

Answer 4

El problema es que las soluciones que funcionan en los cuadros de selección angular regulares no funcionan con el material angular md-select y md-option usando el transportador. Este fue publicado por otro, pero funcionó para mí y aún no puedo comentar su publicación (solo 23 puntos de repetición). Además, lo limpié un poco, en lugar de browser.sleep, usé 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
});

Answer 5

Hay un problema con la selección de opciones en Firefox que soluciona el hack de Droogans que quiero mencionar aquí explícitamente, con la esperanza de que pueda salvar a alguien de algún problema: https://github.com/angular/protractor/issues/480 .

Incluso si tus pruebas están pasando localmente con Firefox, es posible que veas que están fallando en CircleCI o TravisCI o lo que sea que estés usando para CI y despliegue. Ser consciente de este problema desde el principio me habría ahorrado mucho tiempo :)

Answer 6

He estado buscando en la red una respuesta sobre cómo seleccionar una opción en un menú desplegable de modelos y he usado esta combinación que me ha ayudado con material angular.

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

parece que al arrojar el código todo en una línea podría encontrar el elemento en el menú desplegable.

Tomé mucho tiempo para esta solución. Espero que esto ayude a alguien.

Answer 7

He mejorado un poco la solución escrita por PaulL. Antes que nada, arreglé el código para que fuera compatible con la última API de Transportador. Y luego declaro la función en la sección ''onPrepare'' de un archivo de configuración del transportador como miembro de la instancia del navegador , por lo que se puede hacer referencia a cualquier especificación 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();
        });
    };
  },

Answer 8

Otra forma de establecer un elemento de opción:

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

Answer 9

Otra forma de establecer un elemento de opción:

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

Answer 10

Para acceder a una opción específica, debe proporcionar el selector nth-child ():

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

Answer 11

Para mí trabajó como un encanto

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

Espero eso ayude.

Answer 12

Para seleccionar elementos (opciones) con identificadores únicos como aquí:

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

Estoy usando esto:

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

Answer 13

Prueba esto, me funciona:

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

Answer 14

Puede seleccionar las opciones desplegables por valor: $(''#locregion'').$(''[value="1"]'').click();

Answer 15

Puede seleccionar opciones desplegables como esta:

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

Answer 16

Puedes probar esta esperanza, 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
});

Answer 17

Queríamos utilizar la solución elegante con material angularjs pero no funcionó porque en realidad no hay etiquetas option / md-option en el DOM hasta que se haya hecho clic en md-select. Así que la forma "elegante" no funcionó para nosotros (¡observe el material angular!) Aquí está lo que hicimos en su lugar, no sé si es la mejor, pero definitivamente funciona ahora

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

Necesitábamos tener 4 selecciones seleccionadas y mientras la selección está abierta, hay una superposición en la forma de seleccionar la siguiente selección. Es por eso que debemos esperar 500ms para asegurarnos de no tener problemas con los efectos materiales que aún están en acción.

Answer 18

Quizás no sea súper elegante, pero eficiente:

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

Esto simplemente envía la tecla hacia abajo en la selección que desea, en nuestro caso, estamos usando modelSelector, pero obviamente puede usar cualquier otro selector.

Luego en mi modelo de objetos de página:

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

Y de la prueba:

myPage.selectMyOption(1);

Answer 19

Seleccione la opción por índice:

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

Answer 20

Si a continuación se muestra el menú desplegable proporcionado

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

Entonces el código del transportador puede ser-

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

Fuente- https://github.com/angular/protractor/issues/600

Answer 21

Tuve un problema similar y finalmente escribí una función auxiliar que selecciona los valores desplegables.

Finalmente decidí que estaba bien seleccionando por número de opción, y por lo tanto, escribí un método que toma un elemento y la opción Número, y selecciona esa opción Número. Si el optionNumber es nulo, no selecciona nada (dejando el menú desplegable no seleccionado).

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

Escribí una publicación de blog si desea más detalles, también cubre la verificación del texto de la opción seleccionada en un menú desplegable: http://technpol.wordpress.com/2013/12/01/protractor-and-dropdowns-validation/

Answer 22

Seleccione la opción por propiedad CSS

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

o

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

Donde locregion (id), organization.parent_id (nombre del modelo) son los atributos del elemento seleccionado.

Answer 23

Un enfoque elegante implicaría hacer una abstracción similar a lo que ofrecen otras vinculaciones de lenguaje de selenio listas para usar (por ejemplo, Select clase en Python o Java).

Hagamos un contenedor conveniente y ocultemos los detalles de implementación dentro de:

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;

Ejemplo de uso (tenga en cuenta lo legible y fácil de usar que es):

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

Solución tomada del siguiente tema: Seleccione -> opción de abstracción .

FYI, creó una solicitud de función: Seleccione -> opción de abstracción .

Answer 24

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


});

Answer 25

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