ITPUB论坛-中国最专业的IT技术社区

 找回密码
 注册
查看: 367|回复: 7

Tutorial #13 – Handling Drop-downs

[复制链接]
认证徽章
论坛徽章:
986
紫蜘蛛
日期:2015-10-15 13:48:52紫蜘蛛
日期:2015-09-22 15:53:22紫蜘蛛
日期:2015-10-15 14:47:47紫蜘蛛
日期:2015-10-15 14:48:45紫蜘蛛
日期:2015-10-15 14:45:48九尾狐狸
日期:2015-10-15 13:50:37九尾狐狸
日期:2015-10-15 14:47:47九尾狐狸
日期:2015-10-15 14:45:48九尾狐狸
日期:2015-10-15 14:48:45九尾狐狸
日期:2015-09-22 15:53:22
发表于 2017-6-16 09:08 | 显示全部楼层 |阅读模式
Usage of Selenium Select Class for Handling Dropdown Elements on a Web Page – Selenium Tutorial #13

In the previous tutorial, we studied about the various types of assert statements available in Java based unit testing framework and their applications with specimens. Re-iterating the fact that being an “Automation Test Engineer”, assertions play a very decisive and significant role in developing test scripts.

Moving ahead with the few upcoming tutorials in the Selenium series, we would concentrate on handling the various types of web elements available on the web pages. Therefore, in this tutorial, we would consider “dropdowns” and exercise their handling strategies.
Before moving towards problem statement and its resolution, let us take a moment to introduce and create an understanding regarding the application under test. As a sample, we have created a dummy HTML page consisting of multiple and assorted web elements.
The elementary web elements those constitute the web page are:
  • Hyperlink
  • Button
  • Dropdown

Please take a reference of the following webpage aforementioned above:
Selenium-select-class-1.jpg
What You Will Learn:



认证徽章
论坛徽章:
986
紫蜘蛛
日期:2015-10-15 13:48:52紫蜘蛛
日期:2015-09-22 15:53:22紫蜘蛛
日期:2015-10-15 14:47:47紫蜘蛛
日期:2015-10-15 14:48:45紫蜘蛛
日期:2015-10-15 14:45:48九尾狐狸
日期:2015-10-15 13:50:37九尾狐狸
日期:2015-10-15 14:47:47九尾狐狸
日期:2015-10-15 14:45:48九尾狐狸
日期:2015-10-15 14:48:45九尾狐狸
日期:2015-09-22 15:53:22
发表于 2017-6-16 09:11 | 显示全部楼层
Explanation of Application under Test
We have designed the web page in a way to include a few fundamental types of web elements.
  • Hyperlink: The two hyperlinks namely “Google” and “abodeQA” have been provided that re-directs the user to “https://www.google.co.in/” and “http://www.abodeqa.com/” respectively on the click event.
  • Dropdown: The three dropdowns have been created for selecting colors, fruits and animals with a value already set to default.
  • Button: A “try it” button has been created to show up the pop up box having Ok and Cancel button upon click event.

Subsequent is the HTML code used to create the above mentioned webpage:
  1. <!DOCTYPE html>
  2. <html>
  3. <head><title> Testing Select Class </title>
  4. <body>
  5. <div id="header">
  6. <ul id="linkTabs">
  7. <li>
  8. <a href="https://www.google.co.in/">Google</a>
  9. </li>
  10. <li>
  11. <a href="http://abodeqa.wordpress.com/">abodeQA</a>
  12. </li>
  13. </ul>
  14. </div>
  15. <div class="header_spacer"></div>
  16. <div id="container">
  17. <div id="content" style="padding-left: 185px;">
  18. <table id="selectTable">
  19. <tbody>
  20. <tr>
  21. <td>
  22. <div>
  23. <select id="SelectID_One">
  24. <option value="redvalue">Red</option>
  25. <option value="greenvalue">Green</option>
  26. <option value="yellowvalue">Yellow</option>
  27. <option value="greyvalue">Grey</option>
  28. </select>
  29. </div>
  30. </td>
  31. <td>
  32. <div>
  33. <select id="SelectID_Two">
  34. <option value="applevalue">Apple</option>
  35. <option value="orangevalue">Orange</option>
  36. <option value="mangovalue">Mango</option>
  37. <option value="limevalue">Lime</option>
  38. </select>
  39. </div>
  40. </td>
  41. <td>
  42. <div>
  43. <select id="SelectID_Three">
  44. <option value="selectValue">Select</option>
  45. <option value="elephantvalue">Elephant</option>
  46. <option value="mousevalue">Mouse</option>
  47. <option value="dogvalue">Dog</option>
  48. </select>
  49. </div>
  50. </td>
  51. </tr>
  52. <tr>
  53. <td>
  54. <!DOCTYPE html>
  55. <html>
  56. <body>
  57. <p>Click the button to display a confirm box.</p>
  58. <button onclick="myFunction()">Try it</button>
  59. <script>
  60. function myFunction()
  61. {
  62. confirm("Press a button!");
  63. }
  64. </script>
  65. </body>
  66. </html>
  67. </td>
  68. </tr>
  69. </tbody>
  70. </table>
  71. </div>
  72. </div>
  73. </body>
  74. </html>
复制代码


使用道具 举报

回复
认证徽章
论坛徽章:
986
紫蜘蛛
日期:2015-10-15 13:48:52紫蜘蛛
日期:2015-09-22 15:53:22紫蜘蛛
日期:2015-10-15 14:47:47紫蜘蛛
日期:2015-10-15 14:48:45紫蜘蛛
日期:2015-10-15 14:45:48九尾狐狸
日期:2015-10-15 13:50:37九尾狐狸
日期:2015-10-15 14:47:47九尾狐狸
日期:2015-10-15 14:45:48九尾狐狸
日期:2015-10-15 14:48:45九尾狐狸
日期:2015-09-22 15:53:22
发表于 2017-6-16 09:12 | 显示全部楼层
Scenario to be automated
  • Launch the web browser and open the webpage
  • Click on the “Google” hyperlink
  • Navigate back to the original web page
  • Select the “Green” in color dropdown
  • Select the “Orange” in the fruit dropdown
  • Select the “Elephant” in the animal dropdown


使用道具 举报

回复
认证徽章
论坛徽章:
986
紫蜘蛛
日期:2015-10-15 13:48:52紫蜘蛛
日期:2015-09-22 15:53:22紫蜘蛛
日期:2015-10-15 14:47:47紫蜘蛛
日期:2015-10-15 14:48:45紫蜘蛛
日期:2015-10-15 14:45:48九尾狐狸
日期:2015-10-15 13:50:37九尾狐狸
日期:2015-10-15 14:47:47九尾狐狸
日期:2015-10-15 14:45:48九尾狐狸
日期:2015-10-15 14:48:45九尾狐狸
日期:2015-09-22 15:53:22
发表于 2017-6-16 09:18 | 显示全部楼层
WebDriver Code using Selenium Select Class
Please take a note that, for script creation, we would be using “Learning_Selenium” project created in the former tutorial.
Step 1: Create a new java class named as “HandlingDropDown” under the “Learning_Selenium” project.
Step 2: Copy and paste the below code in the “HandlingDropDown.java” class.
Below is the test script that is equivalent to the above mentioned scenario:
  1. import static org.junit.Assert.*;
  2. import org.junit.After;
  3. import org.junit.Before;
  4. import org.junit.Test;
  5. import org.openqa.selenium.By;
  6. import org.openqa.selenium.WebDriver;
  7. import org.openqa.selenium.firefox.FirefoxDriver;
  8. import org.openqa.selenium.support.ui.Select;

  9. /**
  10. * class description
  11. */

  12. public class HandlingDropDown {
  13.        WebDriver driver;

  14.        /**
  15.         * Set up browser settings and open the application
  16.         */

  17.        @Before
  18.        public void setUp() {
  19.               driver=new FirefoxDriver();
  20. // Opened the application
  21.               driver.get("file:///F:/Work/Blogs/testingstuff/DemoWebAlert.html");
  22.               driver.manage().window().maximize();
  23.        }

  24.        /**
  25.         * Test to select the dropdown values
  26.         * @throws InterruptedException
  27.         */

  28.        @Test
  29.        public void testSelectFunctionality() throws InterruptedException {

  30. // Go to google
  31.               driver.findElement(By.linkText("Google")).click();

  32. // navigate back to previous webpage
  33.               driver.navigate().back();
  34.               Thread.sleep(5000);

  35. // select the first operator using "select by value"
  36.               Select selectByValue = new Select(driver.findElement(By.id("SelectID_One")));
  37.               selectByValue.selectByValue("greenvalue");
  38.               Thread.sleep(5000);

  39. // select the second dropdown using "select by visible text"
  40.               Select selectByVisibleText = new Select (driver.findElement(By.id("SelectID_Two")));
  41.               selectByVisibleText.selectByVisibleText("Lime");
  42.               Thread.sleep(5000);            
  43. // select the third dropdown using "select by index"
  44.               Select selectByIndex = new Select(driver.findElement(By.id("SelectID_Three")));
  45.               selectByIndex.selectByIndex(2);
  46.               Thread.sleep(5000);      
  47.        }

  48.        /**
  49.         * Tear down the setup after test completes
  50.         */

  51.        @After
  52.        public void tearDown() {
  53.               driver.quit();
  54.        }
  55. }
复制代码


使用道具 举报

回复
认证徽章
论坛徽章:
986
紫蜘蛛
日期:2015-10-15 13:48:52紫蜘蛛
日期:2015-09-22 15:53:22紫蜘蛛
日期:2015-10-15 14:47:47紫蜘蛛
日期:2015-10-15 14:48:45紫蜘蛛
日期:2015-10-15 14:45:48九尾狐狸
日期:2015-10-15 13:50:37九尾狐狸
日期:2015-10-15 14:47:47九尾狐狸
日期:2015-10-15 14:45:48九尾狐狸
日期:2015-10-15 14:48:45九尾狐狸
日期:2015-09-22 15:53:22
发表于 2017-6-16 09:19 | 显示全部楼层
Code Walkthrough
Import Statements
  • import org.openqa.selenium.support.ui.Select – Import this package prior to the script creation. The package references to the Select class which is required to handle the dropdown.

Object Instantiation for Select class
Select selectByValue = new Select(driver.findElement(By.id(“SelectID_One”)));
We create a reference variable for Select class and instantiate it using Select class and the identifier for the drop down.
The identifier or the locator value for the drop down can be found using the techniques discussed in the initial tutorials (by using Selenium IDE and firebug).
Take a notice that the identifier for a dropdown can be found as below:
Step 1: Most or almost all the dropdowns elements are defined in the <Select> tag having multiple values (values that can be set into the dropdown) that are defined under the <option> tags.
Selenium-select-class-2.jpg
Setting the value in the dropdown using selectByValue()method
selectByValue.selectByValue(“greenvalue”);
In the above java command, we select the value “green” in the drop down using the selectByValue() method and parameterizing it with the text present in the value attribute.
Selenium-select-class-3.jpg
Setting the value in the dropdown using selectByVisibleText() method
selectByValue.selectByVisibleText(“Lime”);
In the above java command, we select the value “Lime” in the drop down using the selectByVisibleText() method and parameterizing it with the text present on the user interface or the text present between the opening and closing <option> tags.
Selenium-select-class-4.jpg
Setting the value in the dropdown using selectByIndex()method
selectByValue.selectByIndex(“2”);
In the above java command, we select the third value in the drop down using the selectByIndex() method and parameterizing it with the index value of the element which is desired to be selected in the dropdown.
Take a note that the index value starts with “0”.

使用道具 举报

回复
认证徽章
论坛徽章:
986
紫蜘蛛
日期:2015-10-15 13:48:52紫蜘蛛
日期:2015-09-22 15:53:22紫蜘蛛
日期:2015-10-15 14:47:47紫蜘蛛
日期:2015-10-15 14:48:45紫蜘蛛
日期:2015-10-15 14:45:48九尾狐狸
日期:2015-10-15 13:50:37九尾狐狸
日期:2015-10-15 14:47:47九尾狐狸
日期:2015-10-15 14:45:48九尾狐狸
日期:2015-10-15 14:48:45九尾狐狸
日期:2015-09-22 15:53:22
发表于 2017-6-16 09:20 | 显示全部楼层
Conclusion
In this tutorial, we tried to make you acquainted with the WebDriver’s Select class that is used to handle dropdown elements present on the web page. We also briefed you about the methods that can be used to populate the value in the dropdown.
Here is the article summary:
  • WebDriver’s Select class is used to handle the dropdown elements present on a web page.
  • Prior to the actual scripting, we need to import a package to be able to create a WebDriver script for handling a dropdown and making the Select class accessible.
    • import org.openqa.selenium.support.ui.Select;

  • We create a reference variable for Select class and instantiate it using Select class and the identifier for the drop down.
    • Select selectByValue = new Select(driver.findElement(By.id(“SelectID_One”)));

  • The identifier or the locator value for the drop can be found using Selenium IDE and firebug.
  • Ideally there are three ways to select the desired value in the dropdown amongst the listed one.
    • selectByValue()
    • selectByVisibleText()
    • selectByIndex()

  • The following java command is used to select the “green” color in the dropdown. Take a notice the value in the dropdown is selected using the selectByValue()
    • selectByValue(“greenvalue”);

  • The following java command is used to select the “Lime” fruit in the dropdown. Take a notice the value in the dropdown is selected using the selectByVisibleText()
    • selectByVisibleText(“Lime”);

  • The following java command is used to select the third value amongst all the available options enlisted for the dropdown. Take a notice the value in the dropdown is selected using the selectByIndex()
    • selectByIndex(“2”);


Next Tutorial #14: In the forthcoming tutorial, we would discuss about various types of commands in WebDriver like isSelected(), isEnabled() and isDispalyed() those return a Boolean value against the presence of a specified web element.
Till then, stay tuned and automate the dropdown using WebDriver utility – “Select class”.

使用道具 举报

回复
认证徽章
论坛徽章:
986
紫蜘蛛
日期:2015-10-15 13:48:52紫蜘蛛
日期:2015-09-22 15:53:22紫蜘蛛
日期:2015-10-15 14:47:47紫蜘蛛
日期:2015-10-15 14:48:45紫蜘蛛
日期:2015-10-15 14:45:48九尾狐狸
日期:2015-10-15 13:50:37九尾狐狸
日期:2015-10-15 14:47:47九尾狐狸
日期:2015-10-15 14:45:48九尾狐狸
日期:2015-10-15 14:48:45九尾狐狸
日期:2015-09-22 15:53:22
发表于 2017-6-16 09:21 | 显示全部楼层

使用道具 举报

回复
认证徽章
论坛徽章:
986
紫蜘蛛
日期:2015-10-15 13:48:52紫蜘蛛
日期:2015-09-22 15:53:22紫蜘蛛
日期:2015-10-15 14:47:47紫蜘蛛
日期:2015-10-15 14:48:45紫蜘蛛
日期:2015-10-15 14:45:48九尾狐狸
日期:2015-10-15 13:50:37九尾狐狸
日期:2015-10-15 14:47:47九尾狐狸
日期:2015-10-15 14:45:48九尾狐狸
日期:2015-10-15 14:48:45九尾狐狸
日期:2015-09-22 15:53:22
发表于 2017-7-9 15:23 | 显示全部楼层
good job

使用道具 举报

回复

您需要登录后才可以回帖 登录 | 注册

本版积分规则

TOP技术积分榜 社区积分榜 徽章 电子杂志 团队 统计 虎吧 老博客 知识索引树 读书频道 积分竞拍 文本模式 帮助
  ITPUB首页 | ITPUB论坛 | 数据库技术 | 企业信息化 | 开发技术 | 微软技术 | 软件工程与项目管理 | IBM技术园地 | 行业纵向讨论 | IT招聘 | IT文档 | IT博客
  ChinaUnix | ChinaUnix博客 | ChinaUnix论坛 | SAP ERP系统
CopyRight 1999-2011 itpub.net All Right Reserved. 北京盛拓优讯信息技术有限公司版权所有 联系我们 网站律师 隐私政策 知识产权声明
京ICP备16024965号 北京市公安局海淀分局网监中心备案编号:11010802021510 广播电视节目制作经营许可证:编号(京)字第1149号
  
快速回复 返回顶部 返回列表