vendredi 8 décembre 2017

How to expand and click on angular tree component for testing in protractor?

I want to expand the tree which looks like Tree image and simultaniously I need to click on each element. All the elements are available in span's. The following code is allowing me to expand the tree only once and after that I am unable to take on any command.

element(by.css('.toggle-children-wrapper.ng-star-inserted.toggle-children-wrapper-collapsed')).click()

The span title code element(by.css('span[title="L1"]')).click() is only working for Level 1 elements.

Below is the code snippet for all the levels and the tree nodes as well.

Level 1

<tree-node-content ng-reflect-node="[object Object]" ng-reflect-index="0" ng-reflect-template="[object Object]"> 
<span _ngcontent-c5="" id="121" title="L1" class="ng-star-inserted">Level 1</span>
</tree-node-content>

Nodes when Collapsed

<tree-node-expander ng-reflect-node="[object Object]">
><span class="toggle-children-wrapper toggle-children-wrapper-collapsed ng-star-inserted">
  <span class="toggle-children"></span>
</span>
</tree-node-expander

Nodes when expanded

<tree-node-expander ng-reflect-node="[object Object]">
<span class="toggle-children-wrapper ng-star-inserted toggle-children-wrapper-expanded">
    <span class="toggle-children"></span>
</span>
</tree-node-expander>

I have many Level 1 elements, so how to make sure which one I am clicking.

Thanks in advance.

Aucun commentaire:

Enregistrer un commentaire