web-dev-qa-db-fra.com

Recherche sur les descendants d'un élément

Avec rapporteur, quel est le meilleur moyen de sélectionner des éléments enfants? Disons que nous avons la mise en page ci-dessous ...

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

Avec jQuery, nous ferions quelque chose comme ça.

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

Mais avec Protractor, est-il judicieux d’obtenir d’abord l’élément parent? Depuis, var p1 = element('#parent_1'); ne récupère pas/recherche réellement l'objet jusqu'à ce que getText() ou quelque chose soit appelé.

donc faire ça ..

Scénario 1

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

OR

Scénario 2

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

OR

Scénario 3

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

Y at-il des avantages dans une approche par rapport à l’autre?

C'est ce que je fais mais je ne sais pas s'il y a un avantage à séparer le parent du cssSelector:

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

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

En regardant Protractor elementFinder je pourrais le faire:

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

var child_red = getChild('.red', '#parent_1');
var child_blue = getChild('.blue', '#parent_1');
elementparent-childprotractorchaining
46
Brad8118

L'avantage de séparer l'enfant du sélecteur css de l'enfant ne serait que si vous souhaitez utiliser le parent pour autre chose. Sinon, il est légèrement plus rapide de le faire en un seul appel, comme expect(element('#parent_1 > .red')).toBe('red'); puisque Protractor n'a pas besoin d'appeler deux fois le navigateur dans ce cas.

Une autre raison d'utiliser la première approche serait si vous utilisiez une stratégie de localisateur qui ne peut pas être exprimée en CSS. Par exemple:

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