Вопрос:

Поиск по потомкам элемента

element parent-child protractor chaining

43622 просмотра

1 ответ

2379 Репутация автора

Что такое транспортир для выбора дочерних элементов? Скажем, у нас есть макет ниже ...

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

Глядя на elementFinder в Protractor, я мог бы сделать это:

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

var child_red = getChild('.red', '#parent_1');
var child_blue = getChild('.blue', '#parent_1');
Автор: Brad8118 Источник Размещён: 21.05.2014 04:11

Ответы (1)


56 плюса

9845 Репутация автора

Решение

Преимущество отделения дочернего элемента от дочернего селектора CSS будет только в том случае, если вы хотите использовать родительский элемент для чего-то другого. В противном случае, это немного быстрее сделать это за один вызов, например, expect(element('#parent_1 > .red')).toBe('red');поскольку в этом случае Protractor не нужно делать два вызова браузеру.

Другой причиной использования первого подхода было бы, если бы вы использовали стратегию локатора, которая не может быть выражена в CSS. Например:

var parent = element(by.css('.foo'));
var child = parent.element(by.binding('childBinding'));
expect(child.getText()).toEqual('whatever');
Автор: Jmr Размещён: 22.07.2014 06:53
Вопросы из категории :
32x32