Forum Discussion

PingS's avatar
PingS
Occasional Contributor
7 years ago

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!!

  • PingS's avatar
    PingS
    7 years ago

    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.

     

  • tristaanogre's avatar
    tristaanogre
    Esteemed Contributor
    7 years ago

    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.

    • PingS's avatar
      PingS
      Occasional Contributor
      7 years ago

      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.

       

      • AlexKaras's avatar
        AlexKaras
        Champion Level 3
        7 years ago

        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.