1

I want to re-use the CSS selector on the current WebElement. IS there a way to extract it out? The reason is that I want to re-select the element if the condition is met so that I want to add "> *" in By.cssSelector() to get children DOM element. So far, I only can do the tagName() but there is no guarentee to select the right one. 

List<WebElement> webElements = DMDriver.findElements(By.cssSelector(cssSelectorNode));
  WebElement selectedRootFolder = null;

  if (webElements.size() > 0)
  {
    for (WebElement webElement : webElements)
    {
      if (webElement.getText().trim().equals(strFolder))
      {
        webElement.findElement(By.tagName("..."));

....

HTML code (generated by Angular JS)

<div class="folder-rows-wrapper" ng-nice-scroll="" style="overflow: hidden;" tabindex="1">
<div class="folder-rows my-docs ya-treeview ng-isolate-scope" ya-context="context" ya-options="options" ya-model="tree" ya-id="myDocsTree" ya-treeview="">
<div class="ya-node" ya-node="">
    <ul class="list-unstyled ng-scope" ng-hide="node.collapsed">
        <li class="node ng-scope" ng-repeat="node in node.$children">
            <div class="" ng-show="node.$hasChildren">
                <a class="btn btn-link pull-left" ng-click="expand($event, node)" ng-show="node.collapsed">
                    <i class="glyphicon glyphicon-chevron-right"></i>
                </a>
                <a class="btn btn-link pull-left ng-hide" ng-click="collapse($event, node)" ng-hide="node.collapsed">
                    <i class="glyphicon glyphicon-chevron-down"></i>
                </a>
            </div>
            <div class="node-content clearfix" ng-dblclick="dblClick($event, node)" ng-click="selectNode($event, node)" ya-transclude="">
                <span class="row-folder ng-scope" ng-class="{open: node.collapsed == false}" context-menu-item="node.$model" context-menu-method="actionsMenuOptions" context-menu="">
                    <span class="folder-name name ng-binding">SharedFolderAgainAgain</span>
                </span>
            </div>
            <div class="ya-node" ya-node="">
                <ul class="list-unstyled ng-scope ng-hide" ng-hide="node.collapsed"></ul>
            </div>
        </li>
<li class="node ng-scope" ng-repeat="node in node.$children">
...
<li class="node ng-scope" ng-repeat="node in node.$children">
...

The paste bin link is here for you to easy to read - http://pastebin.com/WtbCPZ2L

Mikey
  • 380
  • 4
  • 15
  • This isn't a stable and reliable way of doing things - can you give a more concrete example of what you are doing? http://stackoverflow.com/questions/4588119/get-elements-css-selector-without-element-id – Arran Aug 05 '15 at 09:24
  • @Arran I added the sample code of HTML at my first post. As you can see, I want to do comparison on the Folder Name, SharedFolderAgainAgain. It's a File & Folder Navigation Tree UI widget. If this is true, I want to get the Anchor tag to do the click from webdriver. Of course, there will be more folders which are showing more list tags. For this case, I have three folders. that's why there are three li tags. – Mikey Aug 05 '15 at 18:59
  • I agree with @Arran, it's not the best approach. You should re-think the way you use your CSS selectors and the way you construct your PageObject drivers. – Johnny Aug 06 '15 at 08:38
  • @StasS What would you do in my case? Currently, I got this inherited by my predecessor and the design is not in PageObject pattern. Right now, I don't have the time to re-write since the project setup is a bit too late for that. – Mikey Aug 06 '15 at 22:54
  • 1
    @Mikey, what we did in our Angular based app, is asked the FED to add for us special hook in the DOM. So, we have a additional attribute called data-hook that helps us select the correct elements. – Johnny Aug 09 '15 at 09:25
  • @StasS, lucky you! Well, unfortunately, our developers would not like to add any additional attribute nor add an additional ID. That's why I try to get the alternative solution by doing it. – Mikey Aug 12 '15 at 00:24

0 Answers0