etiqueta - Búsqueda en descendientes de un elemento.

title ejemplos

Question

¿Con el transportador cuál es la mejor manera de seleccionar elementos secundarios? Digamos que tenemos el diseño a continuación ...

<div id=''parent_1''>
    <div class=''red''>Red</div>
    <div class=''blue''>Blue</div>
</div>
<div id=''parent_2''>
    <div class=''red''>Red</div>
    <div class=''blue''>Blue</div>
</div>

Con jQuery haríamos algo como esto.

var p1 = $(''#parent_1'');
var p1_red = $(''.red'', p1);  //or p1.find(''.red'');
var p1_blue = $(''.blue'', p1); //or p1.find(''.blue'');

Pero con Protractor, ¿tiene sentido obtener primero el elemento padre? Desde que var p1 = element(''#parent_1''); esto var p1 = element(''#parent_1''); en realidad no recupera / busca el objeto hasta que se getText() o algo.

haciendo esto ..

escenario 1

expect(p1.element(''.red'')).toBe(''red'');
expect(p1.element(''.blue'')).toBe(''blue'');

O

Escenario 2

expect(element(''#parent_1'').element(''.red'')).toBe(''red'');
expect(element(''#parent_1'').element(''.blue'')).toBe(''blue'');

O

Escenario 3

expect(element(''#parent_1 > .red'')).toBe(''red'');
expect(element(''#parent_1 > .blue'')).toBe(''blue'');

¿Hay algún beneficio en un enfoque sobre el otro?

Esto es lo que estoy haciendo, pero no sé si hay alguna ventaja de separar el padre del cssSelector:

function getChild(cssSelector, parentElement){
    return parentElement.$(cssSelector);
}

var parent = $(''#parent_1'');
var child_red = getChild(''.red'', parent);
var child_blue = getChild(''.blue'', parent);

Mirando a elementFinder de elementFinder podría estar haciendo esto:

function getChild(cssSelector, parentCss){
    return $(parentCss).$(cssSelector);
}

var child_red = getChild(''.red'', ''#parent_1'');
var child_blue = getChild(''.blue'', ''#parent_1'');

Answer 1

La ventaja de separar el elemento secundario del selector css secundario solo sería si desea utilizar el elemento primario para otra cosa. De lo contrario, es un poco más rápido hacerlo en una llamada, como expect(element(''#parent_1 > .red'')).toBe(''red''); ya que Protractor no necesita hacer dos llamadas al navegador en este caso.

Otra razón para utilizar el primer enfoque sería si utilizara una estrategia de localización que no se pueda expresar en CSS. Por ejemplo:

var parent = element(by.css(''.foo''));
var child = parent.element(by.binding(''childBinding''));
expect(child.getText()).toEqual(''whatever'');