WHAT AN AUTOMATION TOOL OUGHT TO BE? A QUICK CHALLENGE ROUND 2

Hi Friends,

This is the my round 2 challenge for “what an automation tool ought to be series”. The incumbment is Selenium and I am trying to challenge Sahi Pro with some really tough problem statements (read challenges).

Why the hell I am actually even trying this. I somehow got into this for a stupid reason.. I am and will remain a Selenium fan. Hope you have read my Round 1 blog – which has the reasons for this very challenge. If not please click on the below URL

https://atablogs.agiletestingalliance.org/agile-testing-alliance-news/what-an-automation-tool-ought-to-be-a-quick-challenge-round-1/

Ironies of life keep on happening and my belief system is being shaken up while I am challenging Sahi Pro.. as you will understand when you read more below..

 

Here is the Round 2 Challenge for Sahi Pro – “Handling customized dropdowns”

Handling customized elements need more efforts when using Selenium. I am throwing this to Sahi Pro.

Below is the exact challenge on handling customized dropdown in selenium.

The challenge looks simple but it needs more attention as we need to really look more into source code/HTML.

Challenge Steps:

  1. Enter URL https://semantic-ui.com/modules/dropdown.html/ in your browser
  2. Click on Skills dropdown
  3. Select ‘CSS’ from dropdown
  4. Select ‘HTML’ from dropdown
  5. Select ‘Ember’ from dropdown

 

Key work I had to do when I was trying to automate this using Selenium Webdriver:

#  Locating correct element

#  Identifying the element properly and implementing the correct approach to handle the dropdown

 

In the first look of element, every one would say this is the dropdown and in selenium webdriver it can be handled using Select class, so I wrote the script and used Select class to automate the problem statement. I could not solve this as when I ran the script I got an exception that element is not visible

So I started looking into the html source code and found that select element is actually hidden.

Attached reference image below which shows that select tag display property is ‘none’ it means all it’s contents are hidden on the page. So I thought it might be enabled after clicking on skills dropdown, but still hidden.

 

So I started to look further then found that this is the customized dropdown and options of the dropdown are constructed in div tag list. By default div list property is also hidden(‘none’) but once clicked on the dropdown the list apperaed on the page, property changes now from ‘none’ to ‘block’. So now we can select the values in dropdown without Select class because there is no Select tag that needs to be handled (div list need to be handled).

Select class as I now remember, we use when handling only Select tag of html. But this is when I could research and come to this conclusion.

Below is the reference image, in red section there is actual div list and when hovering in the source it higlights the values on the page as highlighted in yellow, in green section we can see that display property is block not none.

 

In Selenium we will all agree that some times we have to check the display properties of the element and we can check inside Computed section > display property. And, if it’s none then we have to look for some other alternative as we did for above problem.

Below is the working code/script in Selenium Java for your reference: I am feeling happy to solve this after spending some time..

 

Here is the script from Selenium/Java

package scripts;
import java.util.concurrent.TimeUnit;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
public class SemanticUIDropdown {
	public static void main(String[] args) {
		// step 1
		WebDriver driver;
		System.setProperty("webdriver.chrome.driver", "src\\test\\resources\\drivers\\chromedriver.exe");
		driver = new ChromeDriver();	
		driver.manage().window().maximize();
		driver.manage().timeouts().implicitlyWait(15, TimeUnit.SECONDS);
		driver.get("https://semantic-ui.com/modules/dropdown.html");
		
		// step 2
		WebElement element = driver.findElement(By.xpath("//*[@id=\"example\"]/div[4]/div/div[2]/div[4]/div[1]/div[8]/div"));
		/*Select select = new Select(element);
		select.selectByVisibleText("CSS");*/
		element.click();
		// step 3
		WebElement cssElement = driver.findElement(By.xpath("//*[@id=\"example\"]/div[4]/div/div[2]/div[4]/div[1]/div[8]/div/div[2]/div[1]"));
		cssElement.click();
		// step 4
		WebElement htmlElement = driver.findElement(By.xpath("//*[@id=\"example\"]/div[4]/div/div[2]/div[4]/div[1]/div[8]/div/div[2]/div[5]"));
		htmlElement.click();
		// step 5	
		WebElement emberElement = driver.findElement(By.xpath("//*[@id=\"example\"]/div[4]/div/div[2]/div[4]/div[1]/div[8]/div/div[2]/div[4]"));
		emberElement.click();

		// step 6
		driver.quit();
	}

}

Onto Sahi Pro now.. I am sure Sahi Pro will also fail first time and then I have to be smart enough to make it do what I want – I am used to that in Selenium 😊

But to my contrary belief, when I tried to automate using Sahi Pro it was literally a cake walk. I did not have to do any thing much. It was pretty much click and automate..

Please see the recorded script below.

 

Here is the script from Sahi Pro

_navigateTo("https://semantic-ui.com/modules/dropdown.html");
_call(window.scrollTo(0, 1200)); 
_wait(2000);
_click(_div("ui fluid dropdown selection multiple"));
_click(_div("CSS"));
_setSelected(_select("skills"), ["CSS"]);
_click(_div("HTML"));
_setSelected(_select("skills"), ["CSS","HTML"]);
_click(_div("Ember"));
_setSelected(_select("skills"), ["CSS","HTML","Ember"]);

Screenshot from Sahi Pro editor is below:

Later on I realized that the _setSelected statements that are recorded can be removed since it was not a direct interaction by the user, leaving only the code below:

_navigateTo("https://semantic-ui.com/modules/dropdown.html");
_call(window.scrollTo(0, 1200)); 
_wait(2000);
_click(_div("ui fluid dropdown selection multiple"));
_click(_div("CSS"));
_click(_div("HTML"));
_click(_div("Ember"));

Screen shot below..

The code snippet and the steps involved took me once again by surprise. First of all I am trying to throw the most difficult challenges to Sahi Pro and the ease with which it is handling is unbelievable.

End result actually is only 7 lines of code and not more than 10 minutes of automation effort – Phew….


This is in fact a big surprise for  me because the amount of time and  efforts I spent in solving this so called issue when using Selenium WebDriver – involved me to find if element is hidden or not, if hidden which is the correct element or target element on which we have to apply actions – Obviously for the selelenium fan in  me got Very Happy in solving this.. As always me fellow selenium coders will agree – given a difficult problem when you find a solution how happy we all feel.

But the question I am not able to answer yet is – was it really a problem at all. Or the problem actually was with Selenium.

As Sahi Pro handled all these so called issues (non issues for Sahi Pro actucally)

This second difficult round was  actually not difficult for Sahi Pro at all… and it goes to Sahi Pro

I am a selenium fan and would remain forever – so I am requesting you all to help me throw BIGGER challenges to Sahi Pro . So if you have any challenges in your mind, please share with me I will be happy show case the selenium Superiority…..

By the way if you want to try out things and throw your own challenges to Sahi Pro, you can download the free trial version from the following URL:

https://crm.sahipro.com/pay/index.php/registration/register

May the force be with Selenium fans like me.. lets keep challenging 😊

You can check more about Selenium and Sahi Pro on the following URL’s respectively

https://www.seleniumhq.org/

https://sahipro.com/

I would also try to create a video and upload it soon. The last challenge that I had posted also I want to upload a video for that too. Pending.. will share soon.

 

Leave a Reply