Working with trees

To simplify working with tree structures there is a special wrapper called WebTree. A tree could be any html elements composition which could be described as a list of list of list etc. (for example ul element with nested ul elements).

To create WebTree wrapper from element with given id use code as follows

var tree = browserAdapter.GetTreeWithId("SampleTree");

You can also convert an existing element (IPageFragment) to list using ToWebTree() method. Navigation through tree structure is analogical to WebList.

By default WebTree uses tag name to locate sublists. If you are using divs instead of ul/ol tags to build your tree structure you have to provide additional parameter to GetTreeWithId function. For example for structure like that

<div id="SampleTree">
	<div class="node">
		<div>Node 1</div>
		<div class="subtree">
			<div class="node">
				<div>Node 11</div>					
			</div>
			<div class="node">
				<div>Node 12</div>
			</div>
		</div>
	</div>
	<div class="node">
		<div>Node 2</div>
		<div class="subtree">
			<div class="node">
				<div>Node 21</div>					
			</div>
			<div class="node">
				<div>Node 22</div>
			</div>
		</div>
	</div>
</div>

use the following set of parameters

var tree = browserAdapter.GetTreeWithId("SampleTree", itemsContainerLocator: By.ClassName("subtree"));

Example: Expanding tree nodes

<ul id="SampleTree">
        <li>
            <div><a>Expand</a> Level 1 item A</div>
            <ul>
                <li>
                    <div><a>Expand</a>Level 2 item AA</div>
                    <ul>
                        <li>
                            <div>Level 3 item AAA</div>
                        </li>    
                    </ul>
                </li>
                <li>
                    <div><a>Expand</a>Level 2 item AB</div>
                    <ul>
                        <li>
                            <div>Level 3 item ABA</div>
                        </li>    
                    </ul>
                </li>
                <li>
                    <div><a>Expand</a>Level 2 item AC</div>
                    <ul>
                        <li>
                            <div>Level 3 item ACA</div>
                        </li>   
                        <li>
                            <div>Level 3 item ACB</div>
                        </li>    
                    </ul>
                </li>
                
            </ul>
        </li>
        <li>
            <div><a>Expand</a>Level 1 item B</div>
            <ul>
                <li>
                    <div><a>Expand</a>Level 2 item BA</div>
                    <ul>
                        <li>
                            <div>Level 3 item BAA</div>
                        </li>    
                    </ul>
                </li>
                <li>
                    <div><a>Expand</a>Level 2 item AB</div>
                    <ul>
                        <li>
                            <div>Level 3 item BBA</div>
                        </li>    
                    </ul>
                </li>
                
            </ul>
        </li>
    </ul>

var tree = browserAdapter.GetTreeWithId("SampleTree");

//Expand first level
tree.AffectWith(()=> tree[0].ClickOnElementWithText("Expand"));
tree.AffectWith(()=> tree[1].ClickOnElementWithText("Expand"));

//Expand second level
tree.AffectWith(()=> tree[0][0].ClickOnElementWithText("Expand"));
tree.AffectWith(()=> tree[0][1].ClickOnElementWithText("Expand"));
tree.AffectWith(()=> tree[1][0].ClickOnElementWithText("Expand"));
tree.AffectWith(()=> tree[2][1].ClickOnElementWithText("Expand"));