Blogs

OVERLAY HANDLING, GRAB THE NAMES


 
Automation Scenario :
Go to this page : https://www.bell.ca/Mobility/Smartphones_and_mobile_internet_devices
Grab the name of the products and print the names on the console.
 
Solution:
CP-SAT believes in practice, and the problems are given to prepare you for the exam. If you have not attempted the question on your own, we do recommend that you try to solve the question first before reading any further.
If you run into any issues you can reach out to us via the CPSAT contact us page.
https://cpsat.agiletestingalliance.org/#contact
 
* Please note that this may not be the only solution, there could be potentially other ways to solve the problem, specially the way the locators can be handled, data can be handled etc. The intent here is to help you with a sample solution code.
* This is for reference purposes
_______________________________________________________________________________
Designer has customized the details of the products with an overlay so product details can not be inspect using inspect option.
When we do inspect, it inspects the main element not the nested elements (product details) of the product.

 
Try yourself, when I tried to inspect it highlights the complete product as shown in the above screen (please see the first product). It highlighed complete box.
So we are not able to lnspect the element with inspect option, so we have to look manually for the element by traversing into the html tree structure.
When we looked into the tree structure we found the elemetn of product name and it is highlighted in the orange in the below screen
 

 
Blue one also have product name but it is not the right one because when we hover in the source, it does not highlight the element on the page but when we hover on the orange one it highlights the element on the page as you can see in the yellow box so this one is our target element.
Now, we have the correct locator to locate the element.
There is one more challenge on the page.
Page contains 52 products on the page and if we check the size of the products it returns the count as 52. But, if we print the product names it prints only 12 names as only 12 names are visible on the page.
When we ran the script first time, below was the output from the program
Prodduct 1: iPhone XR
Prodduct 2: Samsung Galaxy S10
Prodduct 3: Samsung Galaxy S10+
Prodduct 4: iPhone XS
Prodduct 5: Samsung Galaxy S10e
Prodduct 6: Huawei P30 Pro
Prodduct 7: Huawei P30
Prodduct 8: Huawei P30 lite
Prodduct 9: Samsung Galaxy A70
Prodduct 10: Samsung Galaxy A50
Prodduct 11: LG G8ThinQ
Prodduct 12: iPhone 8
______________________________________________________________________________
So to get all the 52 product names first we have to check the button ‘View more devices’ is present on the page or not, if yes, click on the button and it will display remaining products.
Now if we will run the same scripts it will return all 52 product names.
Here is the script from Selenium/Java
__________________________________________________________________________________________

package dropdown;
package overlay;
import static org.junit.Assert.*;
import java.util.List;
import java.util.concurrent.TimeUnit;
import org.junit.After;
import org.junit.Before;
import org.junit.Test;
import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;
public class Overlay {
	WebDriver driver;
	@Before
	public void setUp() throws Exception {
		System.setProperty("webdriver.chrome.driver", "src\\test\\resources\\drivers\\chromedriver.exe");
   	 	driver = new ChromeDriver();
       driver.manage().window().maximize();
       driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
	}
	@After
	public void tearDown() throws Exception {
		driver.quit();
	}
	@Test
	public void test() throws Exception {
		 driver.get("https://www.bell.ca/Mobility/Smartphones_and_mobile_internet_devices");
		 List moreButton = driver.findElements(By.xpath("//*[@id=\"productListWithFilters\"]/div[4]/div/button"));
		 if(moreButton.size() > 0) {
			 moreButton.get(0).click();
		 }
		 List productNames = driver.findElements(By.xpath("//*[starts-with(@id,\"div_product_list_item_div_product_list_item_\")]/div[1]/div[2]/a/h3/span[1]"));
		 System.out.println("Product Count : " + productNames.size());
		 int i;
		 int j;
		 for(i=0;i<productNames.size();i++) {
			 j=i+1;
			 System.out.println("Prodduct " + j + ": " + productNames.get(i).getText());
		 }
	}
}


Please note that CPSAT is the number 1 certification in Selenium as it is the only globally recognized certificate which assess practical knowledge by posing similar questions.
CPSAT is now the only globally recognized certificate which not only assesses practical knowledge, but the knowledge can  be assessed in three different streams. Java, C# and Python
 
Happy learning and happy test automation

Leave a Comment