cancel
Showing results for 
Search instead for 
Did you mean: 

How to open a dropdown control

SOLVED
PingS
Occasional Contributor

How to open a dropdown control

I am writing Automation Test for a web appliocation. On a page, there are two controls: Date of Birth and Gender. The Date of Birth is like a Datetimepicker. When it is clicked, a calender shows up. The Gender is a <select> control, a dropdown opens when it is clicked. The picture shows the Source code behind the page. I am writing script to identify the objects and then envoke the right method of the object to perform actions. I need to programatically open the dropdown of these controls and then take a screen shot as objective evidence to show the dropdown opens. I used XPath to identify and get the object on the page and then tried "Click()" and "DropDown()" methods on the object, but neither opened the dropdown control.  Can anyone help? Thank you!!

1 ACCEPTED SOLUTION

Accepted Solutions
PingS
Occasional Contributor

Re: How to open a dropdown control

I tried the recording the tests using keyword test but the Gender Dropdown does not open when the recording is on.

After a few tries, I eventually found the solution. The DateTimePicker and the Generder Dropdown are wrapped inside a lot of control containers. The DateTimePicker control has two <Input> and they are inside multiple <div>, I must get the <input> with "class = 'dateTimePicker'" using XPath and then perform  click() operation on this control to open the DateTimePicker; the Gender DropDown has multiple <span> controls, I must get the <span> with "Role = 'combobox'". When perform a "Click ()" on this control, it opens the dropdown.

 

The attached image has the two controls hightlighted in Red. I hope this may help someone who is puzzling on this type of issues.

 

View solution in original post

3 REPLIES 3
tristaanogre
Community Hero

Re: How to open a dropdown control

It would be helpful if you post your code.

One thing to note: finding an object by XPath returns the DOM object which might not always be recognized by TestComplete as an object which will have the "Click" or "DropDown" methods. XPath methodology, while standard in Selenium, is not the preferred method of identifying and automating interaction with web pages in TestComplete.

Something else to try:

 

Do a simple record of the desired actions.  This will help to discover how TestComplete identifies the objects and may help to fine tune your other code.


Robert Martin
[Hall of Fame]
Please consider giving a Kudo if I write good stuff
----

Why automate?  I do automated testing because there's only so much a human being can do and remain healthy.  Sleep is a requirement.  So, while people sleep, automation that I create does what I've described above in order to make sure that nothing gets past the final defense of the testing group.
I love good food, good books, good friends, and good fun.

Mysterious Gremlin Master
Vegas Thrill Rider
Extensions available
PingS
Occasional Contributor

Re: How to open a dropdown control

I tried the recording the tests using keyword test but the Gender Dropdown does not open when the recording is on.

After a few tries, I eventually found the solution. The DateTimePicker and the Generder Dropdown are wrapped inside a lot of control containers. The DateTimePicker control has two <Input> and they are inside multiple <div>, I must get the <input> with "class = 'dateTimePicker'" using XPath and then perform  click() operation on this control to open the DateTimePicker; the Gender DropDown has multiple <span> controls, I must get the <span> with "Role = 'combobox'". When perform a "Click ()" on this control, it opens the dropdown.

 

The attached image has the two controls hightlighted in Red. I hope this may help someone who is puzzling on this type of issues.

 

View solution in original post

AlexKaras
Community Hero

Re: How to open a dropdown control

Hi,

 

Great to know that the problem is solved and thank you for the follow-up. It definitely may help others.

 

Just two minor notes:

a) As Robert already mentioned, search by XPath should be considered as the last resort approach in TestComplete world and be used only when it is not possible to reliably identify the control via native TestComplete means. Latest TestComplete 12.60 added support to search web elements by custom attributes (https://support.smartbear.com/testcomplete/docs/general-info/whats-new.html#web-testing-improvements) which might help in the cases like yours.

b) While there is nothing incorrect in calling native methods of web controls, there is a risk here that developers may not implement all required functionality in the custom controls and thus they may not always react as expected. For example, direct assignment of control's value may be not reflected in UI and cause validation errors. Internal methods, for sure, are faster, but UI actions more closely and correctly emulate the end-user behaviour.

 

Regards,
  /Alex [Community Hero]
____
[Community Heroes] are not employed by SmartBear Software but
are just volunteers who have some experience with the tools by SmartBear Software
and a desire to help others. Posts made by [Community Heroes]
may differ from the official policies of SmartBear Software and should be treated
as the own private opinion of their authors and under no circumstances as an
official answer from SmartBear Software.
The [Community Hero] signature is used with permission by SmartBear Software.
https://community.smartbear.com/t5/custom/page/page-id/hall-of-fame
================================
New Here?
Join us and watch the welcome video:
Announcements