La recherche sur les descendants d'un élément
Avec le rapporteur, quel est le meilleur moyen de sélectionner des éléments d'enfant? Disons que nous avons la disposition 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 que nous allions faire quelque chose de ce genre.
var p1 = $('#parent_1');
var p1_red = $('.red', p1); //or p1.find('.red');
var p1_blue = $('.blue', p1); //or p1.find('.blue');
Mais avec le Rapporteur est-il judicieux de prendre le parent de l'élément?
Depuis que je fais ce var p1 = element('#parent_1');
ne fait pas les récupérer/recherche de l'objet jusqu'à ce getText()
ou quelque chose est appelé.
donc faire..
Scénario 1
expect(p1.element('.red')).toBe('red');
expect(p1.element('.blue')).toBe('blue');
OU
Scénario 2
expect(element('#parent_1').element('.red')).toBe('red');
expect(element('#parent_1').element('.blue')).toBe('blue');
OU
Scénario 3
expect(element('#parent_1 > .red')).toBe('red');
expect(element('#parent_1 > .blue')).toBe('blue');
Existe-il des avantages dans une approche plutôt que l'autre?
C'est ce que je fais mais je ne sais pas si il y a d'avantage de séparer la mère de l'cssSelector:
function getChild(cssSelector, parentElement){
return parentElement.$(cssSelector);
}
var parent = $('#parent_1');
var child_red = getChild('.red', parent);
var child_blue = getChild('.blue', parent);
Regardant Protractor elementFinder je pourrais faire ceci:
function getChild(cssSelector, parentCss){
return $(parentCss).$(cssSelector);
}
var child_red = getChild('.red', '#parent_1');
var child_blue = getChild('.blue', '#parent_1');
Vous devez vous connecter pour publier un commentaire.
L'avantage de séparer l'enfant de l'enfant sélecteur css serait uniquement si vous souhaitez utiliser le parent pour quelque chose d'autre. Sinon, c'est un peu plus rapide de le faire en un seul appel, comme
expect(element('#parent_1 > .red')).toBe('red');
depuis le Rapporteur n'a pas besoin de faire deux appels pour le navigateur dans ce cas.Une autre raison d'utiliser la première approche serait si vous étiez à l'aide d'un Localisateur de stratégie qui ne peut pas être exprimée en CSS. Par exemple:
by.binding
n'est pas pris en charge, reportez-vous à stackoverflow.com/a/36267362/786389