5

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

3
  • Automate using image comparison tools (Selenium addons, Eggplant...) if the visual part is the most important aspect of the webpage.
    – Prome
    Jan 10, 2020 at 19:18
  • Could you add your testing strategy on the question? The checking strategy is derived from a broader testing strategy. thatsabug.com/blog/… Jan 11, 2020 at 14:19
  • There are many open resources that will help you automate fancy, you don't have to be a programmer for automating. Have you tried Katalon studio? Download and try it and do let me know if you need any help.
    – Azib Khan
    Jan 13, 2020 at 6:43

3 Answers 3

2

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

1

Welcome :)

I'd draw a distinction between two things in this post:

  1. functional testing - you can do it the way you've done it before
  2. UI testing - such a "fancy"/modern/whatever you want to call it should probably be tested in various browsers on both desktop and other devices (tablets, mobile devices, whatnot).

I don't think #2 can be fully automated. Let me show you a real example I faced just a few weeks ago.

One ecommerce platform, I have a bunch of automated checks that make sure a bunch of stuff works on the site. Then I went over the checkout process manually, and the last step contained this in the footer:

enter image description here

I could have run my automated checks hundred times and this would've slipped into production. Sure, not a terrible mistake, but it looks unprofessional. Moreover, I don't even think automation can uncover all of such problems, or if so, writting and maintaining such automated test suites would take more time than go over it manually.

So, in your situation, I think it's better to ask questions like:

  • how do I make sure the site looks and behaves the same in various browsers?
  • what browsers do I need to test it? can I even check automatically that a menu looks differently in IE, in Firefox, in Chrome? how? if you can find a way, go ahead, but I'm sceptical here
  • how do I make sure the site looks and behaves the same on various devices? on various screen sizes?
  • what should be tested automatically and what do I need to test manually?

I can also propose the following approach to find out a more reasonable balance between automation and manual testing: try not to start with automation, test only manually for first couple of days/weeks (depends on how fast the development is in your case), and then automate what you have to do regularly and takes you too much time. I think it's better than diving into automation straight away just to find out half of those automated tests you have done are run only once or twice before you need to rewrite them or retire them completely.

I'd guess that doing it this way will result in automating the most important aspects of the site (a tiny subset of the elements on the site)/most important flows through the app, leaving you with the need to test manually some corner cases and unexpected issues like the one I showed in the picture above.

2
  • Hi the question is more about how to find the automation elements , what all to automate , what not to , etc . I can't think of any ways where I can cover everything in the page . For instance , I might have a list for 10 items in each category . How do I go around accessing all the 100 elements and all .
    – PDHide
    Jan 11, 2020 at 7:15
  • @PDHide: "what all to automate , what not to" sure, that's what I'm also answering in my answer. And I don't think "how to access all elements" should be answered when the question is not correct in the first place.
    – pavelsaman
    Jan 11, 2020 at 17:23
1

The answer by Muzzamil is excellent, to add it or to make it more simple :

1. Think of why you feel this as a challenge?

Your answer: The answer you stated was that there are too many elements in a single page and finding locator or tests for each element would be hectic or time-consuming

A counter perspective: If it is hard for you to find the locator and automate the page, then it would have been more time consuming for the developers to build such a page.

2. So think how did developers achieve building such a page in short period of time?

The answer is that , they reuses the componenet . Consider the fancy website, the below locator gives the component for the menu frame.

[class*="submenu-dropdown"] [class=inner]

You can use the same logic in your automation scripts. Find the common locators that are being reused in different sections like header ,sub-menus, etc and iterate over each element and get the element using text or index.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.