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