How to automate tests for a fancy web site



  • I am going to take up the responsibility of automating an in-house "Media" website that looks really fancy and has more than 50 elements per page.

    But being from "industrial and data-center network" domain for past couple of years with the responsibility of UI automation for the network monitoring tools, I feel this new responsibility as a challenge.

    As the UI of industrial systems usually consists of less visual components and looks simpler. The automation effort usually involves data driven testing where we give a set of input and expect something , or do a sequence of actions and expect something.

    It was pretty straight forward to automate the UI.But for such a fancy website , i am not sure where to start or what strategy to use.

    So my question would be :

    What strategy to use to achieve fair test coverage and access all elements ?

    Because writing unique locator for around 50 elements in a page doesn't feels as a good approach.

    For instance , how will someone automate a website like: https://fancy.com/

    enter image description here



  • Nice question, it is.

    I had walk through www.fancy.com mobile website. I will try to give you an approach where you will have to just create 4-5 locators for full page test coverage OR to cover all 50 locators and with 1 common function. I will be more practical less theoretical. As I have worked with multiple e-commerce website where you see lots of product, I have used this approach.

    Approach in simple words, We will us containers for different HTML elements (Images, anchors, input, buttons and custom tag elements) and will iterate them and filter a particular element based on specific condition

    Lets start from here, I am using mobile website of fancy.com as I am writing full post by mobile.

    1. Divide your page in small sub component function wise so we can consider them a container.

    Header have some buttons (buttons/inputs) and menu (anchors)

    Body have Daily discovery (images), Top collections (Images), Top categories (images) and Recommended for you (images).

    Footer has some links (anchors) based on category

    Here we can write a function to filter specific element.

    private static webElement getElement(webElement container, String tagName, String requiredElementName)
    {
    
    webElement  requiredElement;
    
    
    //make a list of targeted elements inside container
    
    List<webElement> targetedElements =  container.findElements(By.tagName(tagName));
    
    // iterate all targeted elements 
    
    For( webElement iterateElement : targetedElements)
    {
    
    // Filter required element based on specific condition
    
    String elementName = iterateElement.getText().trim();
    
    
    If(elementName.equalIgnoreCase(requiredElementName))
    {
     requiredElement= iterateElement;
    break;
    }
    }
    return requiredElement;
    }
    

    Suppose now you have to click on search a sub category Star Wars under Top collection so you have to call function like:

    webElement  webContainer = driver.findElement(By.xpath(“someDiv”));
    
    webElement StarWarsImage= getElement(webContainer, “img”, “Star Wars”);
    
    StarWarsImage.click();
    

    So here you have to define just a container element to cover N elements

    Something special to get text (span) and links (anchor) based elements

    Although above function can work on any type HTML element but here is one for loop and execution complexity will be O(n2). We have a simple solution text based element. Have a look.

    private static webElement getElementByText(String requiredElementName)
        {
    
    By byElement = By.xpath(“//*[.=‘“+requiredElementName+”’]”;
     return driver.findElement(byElement);
    }
    

    How to call this function. Suppose you have to click About Fancy in footer. No need to write separate element for it just call function like

    getElementByText(“About Fancy”).click();
    

    Thanks, hope it will help.

    Note: All function and post written over mobile so ignore typo and syntax issue. Moreover It is an approach can be used as prototype



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2