1

I am facing hard time to identify below elements uniquely as am new to protractor and JavaScript.

I have to drag and drop thousands of the elements uniquely which have same hierarchy but only different values in the tags as below. 

<div class="ng-scope ng-binding angular-ui-tree-handle" ui-tree-handle=""> ABC </div>
<div class="ng-scope ng-binding angular-ui-tree-handle" ui-tree-handle=""> DEF </div>
<div class="ng-scope ng-binding angular-ui-tree-handle" ui-tree-handle=""> EFG </div>

I have tried something like:

element.all(by.css('.ng-scope ng-binding angular-ui-tree-handle')).get(0).click();

but don't really want to get into it as mentioned earlier, I have thousands of elements.

Your help is much appreciated.

alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195
ASB
  • 167
  • 1
  • 11
  • Welcome to StackOverflow! I recommend you edit your question and add any code you've already tried using, but did not work. – keeehlan Mar 05 '15 at 22:18

1 Answers1

1

You can use by.xpath() and find the elements by text:

element(by.xpath('//div[@ui-tree-handle][. = " ABC "]'))

where . refers to the element's text (in this case).

alecxe
  • 462,703
  • 120
  • 1,088
  • 1,195
  • Thanks for this, I am trying this out. Can it work in selenium as well or it's for protractor? – ASB Mar 05 '15 at 22:35
  • 1
    @ASB `protractor` is basically a wrapper around selenium javascript webdriver, `by.xpath` is coming from the "WebDriverJS API". – alecxe Mar 05 '15 at 22:36
  • I tried this but still protractor cannot identify object. Can we use class instead of ui-tree-handle? If yes, can you please share an example? – ASB Mar 06 '15 at 14:49
  • @ASB sure, `//div[contains(@class, "angular-ui-tree-handle") and . = " ABC "]`. – alecxe Mar 06 '15 at 14:50
  • Is there a possibility to give part of the value, ABC in this case, as the value in node has next line character as well as uneven spacing. So the value is like "\n ABC " – ASB Mar 06 '15 at 21:14
  • @ASB yes, using `contains()`. This should work: `//div[contains(@class, "angular-ui-tree-handle") and contains(., "ABC")]` – alecxe Mar 07 '15 at 01:14
  • I tried but it says NoSuchElementError: No element found using locator: By.xpath("//div[contains(@class, \"angular-ui-tree-handle\") and contains(., \"Business Hours\")]") – ASB Mar 07 '15 at 05:07
  • @ASB is there a space after contain? – alecxe Mar 07 '15 at 05:08
  • I did but still NoSuchElementError: No element found using locator: By.xpath("//div[contains(@class, \"ng-binding\") and contains(., \"Business\")]") – ASB Mar 07 '15 at 05:18
  • @ASB the expression looks good for me. Could you, for starters, show the HTML code containing this particular `div` element? Also, are you sure it is really there at the time you make this xpath search? Thanks. – alecxe Mar 07 '15 at 05:19
  • Here it is.
  • Business Hours
    • – ASB Mar 07 '15 at 05:21
  • @ASB ok, instead of `ng-binding` class try checking for `angular-ui-tree-handle`. – alecxe Mar 07 '15 at 05:25
  • k will try,I have also added the parent nodes if that can help. – ASB Mar 07 '15 at 05:27
  • @ASB thanks, also try without checking the class at all, just text. – alecxe Mar 07 '15 at 05:27
  • Again same thing.. Only solution that I am thinking as of now is adding id's to various elements. Here is the error NoSuchElementError: No element found using locator: By.xpath("//div[contains(@class, \"angular-ui-tree-handle\") and contains(., \"Business\")]") – ASB Mar 07 '15 at 05:30
  • here is the result without class.. NoSuchElementError: No element found using locator: By.xpath("//div[contains(., \"Business\")]") – ASB Mar 07 '15 at 05:33
  • No its purely on AngularJS, no frames. – ASB Mar 07 '15 at 05:46
  • So is there any way to wait for element in protractor until it loads – ASB Mar 07 '15 at 05:49
  • I have used browser.ignoreSynchronization = true; as my scrript was always throwing sync issues. – ASB Mar 07 '15 at 05:50
  • Okay I will try this tomorrow and report. – ASB Mar 07 '15 at 05:57
  • I tried using expect(e.isPresent()).toBeTruthy(); but still getting issues in Sync. But in the real world it gets loaded correctly and I can perform all the actions manually. – ASB Mar 09 '15 at 13:54
  • Yes I have tried both presenseOf and visiblityOf like browser.wait(EC.visibilityOf(e), 10000); – ASB Mar 09 '15 at 14:21
  • So the issue is, I can open the homepage, click on a link, move to the next page. But when I want to interact with the next page, I get the sync issue, but in actual, the page has been correctly loaded if I want to interact manually. What can the issue be? And I have access to development team and source code both, so any suggestions on what to check would be great. – ASB Mar 09 '15 at 14:37
  • This is the code from Spec.js `describe ("Select a flow", function() { var EC = protractor.ExpectedConditions; var e = element(by.xpath('//div[contains(., "Business")]')); it ("Click on Hello", function(){ element(by.xpath('//a[contains(@class, "ng-binding") and . = "Hello"]')).click(); browser.waitForAngular(); browser.wait(EC.visibilityOf(e), 10000); }); it ("Click on Business Hours", function(){ browser.wait(EC.visibilityOf(e), 5000); expect(e.isPresent()).toBeTruthy(); element(by.xpath('//div[contains(., "Business")]')).click(); }); });` – ASB Mar 09 '15 at 18:29
  • So it clicks on hello, but then when it waits for visibilityOf e, it goes to global timeout which I have set is 300 seconds and fails to sync is displayed in the cmd. This is the error message ` Error: Timed out waiting for Protractor to synchronize with the page after 300001ms. Please see https://github.com/angular/protractor/blob/master/docs/faq` If I dont check visibility there and cheeck it before expect in seond `it` statement, then sync error is displayed there. – ASB Mar 09 '15 at 18:34
  • Yes it is Angular page which gets loaded. – ASB Mar 09 '15 at 20:55