Forum Discussion

fc09's avatar
fc09
New Contributor
4 years ago

Sharing name mappings between page objects when several pages have elements in common

I am testing a web application which consists of a considerable number of web pages with different URLs. As such, each of these pages is mapped as a separate page object by TestComplete. However, all of these pages have the same basic layout and have elements in common; for example, there is menu bar with icons down one side which reveals a hierarchical menu when one of the icons is clicked, as well as a navbar across the top with a dropdown and search box.

 

All of these web pages have identical CSS/Xpath selectors for the elements mentioned, so it would seem logical to only have to map the elements once, and then be able to use them on any of the pages. What I'm having to do currently is map the menu bar, hierarchical menu and navbar for every single page in the application, which is not a trivial number. These elements, particularly the menu bar and hierarchical menu see frequent use in our testing, and it is necessary to include mappings for them in most of the page objects. Not only is this approach cumbersome, but is also undesirable from a maintainability point of view - if the developers change the ids or some other attribute used in a selector, then the selector will have to be manually updated in every single page object.

 

We previously used a C# Selenium-based framework to test the application, and we are thinking of switching over to TestComplete. However, this might prove to be a major hurdle. In our Selenium-based framework, we used inheritance and composition in order to eliminate any duplication in selectors. We would have a base class representing the mot generic page within our application, and a menu bar object, for example, which contained the selectors. All page objects would then inherit from this base class and automatically have access to those selectors, so they only had to be defined once.

 

Is there anything similar that can be done in TestComplete? I know it's possible to use conditional criteria for page objects, e.g. URL = X or Y. This means I could in theory have a single page object containing the elements in both pages, but this isn't quite right, because then all the elements would be shared between them - I only want certain elements to be shared.

  • to do conditional name mapping, you must have that page open on your machine.

    then rightclick edit on the free space in the namemapping editor here to bring up this window (for the pageObject youd like to make into conditional mode)

    select conditional mode from the bottom left corner of the new window

    click on the URL property, and then the "OR" toolbar option from the right to make it look like:

     

    and select UR: (for property), equals (operator) and  add in your second url that youd like to accept:

     

    now, any of those coinciding menu/nav tool bar options that may exist on both url 1 and url 2 (google.com and google123.com in my case)

    should all be mapped under this particular page object

    ---------------------

    second way of doing this would be wildcarding the URL property to accept a larger range of values:

     

     

     

     

    • fc09's avatar
      fc09
      New Contributor

      Thanks for your reply.

       

      I've looked into conditional name mapping and wildcards as possible solutions, but I'm wondering if it's possible to do the following. Let's say I have two pages in my application, A and B, which share some common elements, but also each have some distinct elements. What I would like is to have three page objects in TestComplete: 1) a page object for elements unique to A, 2) a page object for elements unique to B, and 3) a page objects for elements which are in both A and B.

       

      It seems like with conditional name mapping and wildcards, I can only have number 3 - please correct me if I'm mistaken. 

  • awaldo's avatar
    awaldo
    Occasional Contributor

    I am also finding myself with the same question.

     

    Modern web development is FULL of shared web elements like headers, footers, menus, "can we help you" chatboxes, etc. It seems strange to me that there does not seem to be a dedicated solution to handle this, and no-one seems to have a good answer as to how to do it even non-simply