Problem statement:

Go to the page – https://semantic-ui.com/modules/dropdown.html.

Go to the Skills Dropdown.
1. Find it if it allows multiple selection?
2. Select three options based on text, value and index- Python, Ruby, React.
3. Print all selected options.

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. The URL is 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

……………………………………………………………………………………………………………………………………………………….

As we all know if any Select element exist on the web page then it can be handled using Selenium WebDriver Select class. Select is a class that handles the dropdown if it is constructed in Select tag.

Some designer constructs the dropdown in div tag, so that means we can not handle using Select class if dropdown is constructed in div. Or, sometimes designer customized the dropdown in div with using select, in this case we have to look into the properties of select tag.

Now let’s talk about the problem:

The dropdown Skills is our target element, After the inspections we found that the Select element display property is hidden (even not changed the display property after clicking on the skills field). that means dropdown can not be handled by Select class.

In html design if display property is ‘none’, that means it hides the entire element.

See the below screen the select element display property is none (hidden).

As above screen clearly shows that display property of the element is ‘none’, so it can not be controlled.

When we looked more into the view source, we found the div lists same as dropdown values but display property is hidden same as Select element.

but when we click on dropdown skills, the element got enabled (display property changed from ‘none’ to ‘block’).

Steps to select the values and get the values from multiple selection dropdown;

1. Click on dropdown element first, it will change the property of div from ‘none’ to ‘block’ (means it enables the div list element on the page)
2. Need to create 3 div Webelements to select 3 different values
3. After 3 selection, need webelement of dropdown field to check, how many elements we have selected and what are the selected values

Here is the script from Selenium/Java
__________________________________________________________________________________________

1. package dropdown;
3. import java.util.List;
4. import java.util.concurrent.TimeUnit;
5. import org.junit.After;
6. import org.junit.Before;
7. import org.junit.Test;
8. import org.openqa.selenium.By;
9. import org.openqa.selenium.Keys;
10. import org.openqa.selenium.WebDriver;
11. import org.openqa.selenium.WebElement;
12. import org.openqa.selenium.chrome.ChromeDriver;
14. public class DropdownProblem {
16. WebDriver driver;
18. @Before
19. public void setup() throws Exception{
20. System.setProperty(“webdriver.chrome.driver”, “src\\test\\resources\\drivers\\chromedriver.exe”);
21. driver = new ChromeDriver();
22. driver.manage().window().maximize();
23. driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
25. }
27. @Test
28. public void loginLogout() throws Exception{
29. driver.get(“https://semantic-ui.com/modules/dropdown.html”); //open the application
30. WebElement skillDiv=driver.findElement(By.xpath(“//div[@class=’ui fluid dropdown selection multiple’][1]”));
31. skillDiv.click();
33. driver.findElement(By.xpath(“//*[@id=\”example\”]/div[4]/div/div[2]/div[4]/div[1]/div[8]/div/div[2]/div[2]”)).click();
34. driver.findElement(By.xpath(“//*[@id=\”example\”]/div[4]/div/div[2]/div[4]/div[1]/div[8]/div/div[2]/div[4]”)).click();
35. driver.findElement(By.xpath(“//*[@id=\”example\”]/div[4]/div/div[2]/div[4]/div[1]/div[8]/div/div[2]/div[6]”)).click();
36. skillDiv.sendKeys(Keys.ESCAPE);
38. List selectedElement = driver.findElements(By.xpath(“//*[@id=\”example\”]/div[4]/div/div[2]/div[4]/div[1]/div[8]/div/a[*]”));
39. System.out.println(“Selected Elements count : ” + selectedElement.size());
41. for(int i=0;i< selectedElement.size();i++) {
42. System.out.println(selectedElement.get(i).getText());
43. }
45. Thread.sleep(10000); //Forced so that you can see selection
48. }
50. @After
51. public void cleanup() throws Exception{
53. driver.quit();
54. }
56. }

Mentioned some comments to understand the code better, its very simple once we understand which elemetn is our target element because when we start we understand that select is our target element but actual target element is div.

The designer customizes the dropdown field to make it multiple selection with div lists.

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

For upcoming selenium and Java boot camp programs please visit the given URL : https://cpsat.agiletestingalliance.org/#Events