С помощью транспортира каков наилучший способ выбора дочерних элементов? Скажем, у нас есть макет ниже...
<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>
С помощью jQuery мы сделаем что-то вроде этого.
var p1 = $('#parent_1');
var p1_red = $('.red', p1); //or p1.find('.red');
var p1_blue = $('.blue', p1); //or p1.find('.blue');
Но с помощью Protractor имеет смысл сначала получить родительский элемент?
Поскольку это var p1 = element('#parent_1');
фактически не извлекает/не ищет объект до getText()
или что-то вызывается.
так что..
Сценарий 1
expect(p1.element('.red')).toBe('red');
expect(p1.element('.blue')).toBe('blue');
ИЛИ
Сценарий 2
expect(element('#parent_1').element('.red')).toBe('red');
expect(element('#parent_1').element('.blue')).toBe('blue');
ИЛИ
Сценарий 3
expect(element('#parent_1 > .red')).toBe('red');
expect(element('#parent_1 > .blue')).toBe('blue');
Есть ли какие-либо преимущества в одном подходе к другому?
Это то, что я делаю, но я не знаю, есть ли какое-либо преимущество разделения родителя на cssSelector:
function getChild(cssSelector, parentElement){
return parentElement.$(cssSelector);
}
var parent = $('#parent_1');
var child_red = getChild('.red', parent);
var child_blue = getChild('.blue', parent);
Глядя на Protractor elementFinder Я мог бы это сделать:
function getChild(cssSelector, parentCss){
return $(parentCss).$(cssSelector);
}
var child_red = getChild('.red', '#parent_1');
var child_blue = getChild('.blue', '#parent_1');