angjs dropdown list selection

Best practices, code snippets for common functionality, examples, and guidelines.
roxter
Posts: 22
Joined: Thu May 12, 2016 10:18 am

angjs dropdown list selection

Post by roxter » Thu Oct 06, 2016 9:49 am

Hello!
I am looking for the best way to deal with a dropdown list (language selection).
The list has 2 language options, english and french I would like to select by click using a $lang variable.

During a recordingfor each list value a separate object has been created in the repository:

the path for the value "english":
.//tag[@tagname='as-toolbar-block']/div/tag[1]/span[2]/span[1]/ul/li[1]/button[@innertext~'^\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ engl']

the path for the valuee "french":
.//tag[@tagname='as-toolbar-block']/div/tag[1]/span[2]/span[1]/ul/li[1]/button[@innertext~'^\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ fren']


Isn't it possible to use only one repo object using one xpath to identify both list values?
What would you suggest is the best solution? And what action spot would I need to define?

User avatar
odklizec
Ranorex Guru
Ranorex Guru
Posts: 7470
Joined: Mon Aug 13, 2012 9:54 am
Location: Zilina, Slovakia

Re: angjs dropdown list selection

Post by odklizec » Thu Oct 06, 2016 10:11 am

Hi,

If both options are within the same listbox, your only option is to replace the hardcoded button inner text with the variable and then fill that variable during runtime from data connector (or from code).

This way you could have just one repo element with the same xpath. But you will always need to fill the variable with expected lang string. So the xpath should look like this:

Code: Select all

.//tag[@tagname='as-toolbar-block']/div/tag[1]/span[2]/span[1]/ul/li[1]/button[@innertext~$langString]
where $langString must be filled during runtime.

i would strongly recommend you to watch the data-driven and xpath related screencasts, available here:
http://www.ranorex.com/support/screencasts.html
And also Data-Driven Testing and RanorexXPath chapters in Ranorex user guide:
http://www.ranorex.com/support/user-guide-20.html

These pieces should help you to understand how to make your xpaths dynamic.
Pavel Kudrys
Ranorex explorer at Descartes Systems

Please add these details to your questions:
  • Ranorex Snapshot. Learn how to create one >here<
  • Ranorex xPath of problematic element(s)
  • Ranorex version
  • OS version
  • HW configuration

roxter
Posts: 22
Joined: Thu May 12, 2016 10:18 am

Re: angjs dropdown list selection

Post by roxter » Thu Oct 06, 2016 10:36 am

Thank you!
I have one more question.
Which action point do I need to use on the list?
The recorder recorded mouse coordinates. But the list fields for each language have different coordinates?
Can't I just perform a click action on the repository object without having to use coordinates?

My path currently looks like this:
div/?/?/tag[@tagname='as-toolbar-block']/div/tag[1]/span[2]/span[2]/button[@innertext~$language]

If I only run thr containing the test step the referenced object can be found in the browser.
But If I execute the whole suite the object can not be found.
I attached a snapshot.
Last edited by roxter on Thu Oct 06, 2016 1:38 pm, edited 1 time in total.

User avatar
odklizec
Ranorex Guru
Ranorex Guru
Posts: 7470
Joined: Mon Aug 13, 2012 9:54 am
Location: Zilina, Slovakia

Re: angjs dropdown list selection

Post by odklizec » Thu Oct 06, 2016 11:53 am

Hi,

There should be no need to use coordinates if Ranorex can recognize the individual elements? I guess the coordinates you found in recording are just for "click" actions? These you can freely change to "Center". And for future, change the "Coordinate recording mode" to "none" (in Ranorex Settings >> Recorder Defaults tab).

A most probably reason, why your test fails if you run the whole test suite is, that you most probably forgot to create a data connector and connect it to recording module variable $language? I guess you added a default value in the rec. module variable editor, but if you don't connect the variable with data connector, the variable is not filled during Test Suite run.

Please examine the failed report and see what is the path and content of $language variable. This is why I suggested data-driven chapter and screencast. These should help you to understand the concept of data-driven testing.

BTW, could you please recreate the snapshot? the xpathc are correct but its screenshots are messed up with Ranorex spy and studio screenshot? Please save the snapshot with just your app and spy running.
Pavel Kudrys
Ranorex explorer at Descartes Systems

Please add these details to your questions:
  • Ranorex Snapshot. Learn how to create one >here<
  • Ranorex xPath of problematic element(s)
  • Ranorex version
  • OS version
  • HW configuration

roxter
Posts: 22
Joined: Thu May 12, 2016 10:18 am

Re: angjs dropdown list selection

Post by roxter » Thu Oct 06, 2016 1:43 pm

Hi!
Thank you for your help.
I attached a new snapshot

Best regards!
Last edited by roxter on Thu Oct 06, 2016 4:07 pm, edited 1 time in total.

User avatar
odklizec
Ranorex Guru
Ranorex Guru
Posts: 7470
Joined: Mon Aug 13, 2012 9:54 am
Location: Zilina, Slovakia

Re: angjs dropdown list selection

Post by odklizec » Thu Oct 06, 2016 2:02 pm

Hi,

Here is the xpath I would suggest to use over the one you are using now. As you can see, there are no indexes in this xpath, which makes it much more reliable...

Code: Select all

/dom[@domain='localhost:3000']//form[#'technical_element_form']/div/tag[@tagname='as-text-tab']/tag[@tagname='as-toolbar-block']/div/tag[@tagname='as-toolbar' and @class='ng-scope ng-isolate-scope']/span/span[@class='ng-scope open']/ul/li/button[@innertext~$language]
Basically, because of pretty limited amount of unique IDs in your app, you may need to adapt the xpath weight to prioritize "Class" attribute and so this should eliminate a good number of indexes and use class attribute instead. For more details check this post and below blog post:
http://www.ranorex.com/forum/react-and- ... tml#p40280
http://www.ranorex.com/blog/automated-t ... namic-ids/
This should give you an idea how to make your xpaths more robust.
Pavel Kudrys
Ranorex explorer at Descartes Systems

Please add these details to your questions:
  • Ranorex Snapshot. Learn how to create one >here<
  • Ranorex xPath of problematic element(s)
  • Ranorex version
  • OS version
  • HW configuration