51Testing软件测试论坛

 找回密码
 (注-册)加入51Testing

QQ登录

只需一步,快速开始

微信登录,快人一步

查看: 2153|回复: 2

熟练掌握Selenium工具核心功能总纲(一)

[复制链接]
  • TA的每日心情
    无聊
    前天 09:12
  • 签到天数: 918 天

    连续签到: 3 天

    [LV.10]测试总司令

    发表于 2021-9-16 11:57:17 | 显示全部楼层 |阅读模式
    一、Selenium版本区别
      起初这个开源项目2004年是使用js实现的,由原来的(js的核心库selenium core、selenium RC、selenium IDE):selenium1<支持录制>、webdriver<另一伙人开发的>,再是两者合并selenium2、继而selenium3、到现在selenium4
      selenium2:具有来自webdriver清晰的面向对象API,以最佳的方式与浏览器进行交互,支持多种浏览器和多语言绑定;
      selenium3:浏览器交互基JSON-wire协议,因此需要对API进行编码和解码;
      selenium4:它遵循W3C标准协议,驱动程序和浏览器之间的通信遵循标准程序,不需要对API进行编码和解码,因此直接进行通信。
      二、Selenium工具的基本使用
      1、元素定位的八大方法
      其中linkText及partialLinkText方法只能是在a标签内才可使用该方法,也可以是被包含在a标签的超链接,例如:
    1.  <a class="_yb_vxdx4" href="https://mail.yahoo.com/?pspid=2023538075&activity=ybar-mail" data-ylk="slk:Mail;elm:btn;sec:ybar;subsec:mailprev;itc:0;tar:mail.yahoo.com;" id="ybarMailLink" aria-label="Check your mail" aria-haspopup="true" aria-expanded="true" data-redirect-params="pspid=[[pspid]]&activity=ybar-mail" data-rapid_p="24" data-9y="1">  
    2.   <span class="ybar-icon-sprite _yb_mu95s _yb_1yf3n">Sign in</span>     
    3.   <span class="_yb_152j2 _yb_2al7h">Mail</span>
    4.   </a>
    复制代码
    · By.linkText("Mail")
      · By.partialLinkText("Sign")
      其中tagName和className,这两个可能极少使用,因为少有一个标签名只在html使用一次或者class样式只引用一次;so,你懂得,几乎用不上。如上
    1. By.className("_yb_vxdx4")
    2.   By.tagName("a")
    复制代码
     · 所以优先使用定位页面元素的方法顺序为:id > name > cssSelector > xpath
      · 基本情况是:selenium中定位页面元素完成UI自动化,那么掌握xpath就是核心技术。
      2、WebDriver/Selenium的原理剖析:
      在环境变量中(system32目录),执行脚本,系统能找到chromedriver并启动,通过chromedriver服务去驱动浏览器执行打开url、操作页面元素的操作;然后返回给脚本的状态
    1. 先了解selenium的发展历程,selenium1原来是个JavaScript库,后引入selenium RC即Server && Client Librarise,而后是selenium2,
    2.   又融入了一个WebDriver核心库,所以selenium2合并之后又被称为WebDriver,至于为什么它能支持不同的脚本语言,因为它遵守json wire protocol,
    3.   是以json格式的数据进行传递(脚本与浏览器)交互;所以我们能理解的原理是:开发脚本支持多种语言,调用WebDriver对应的api驱动浏览器并进行页面元素操作,
    4.   脚本(client)与浏览器(server)之间基于json wire protocol进行数据传递并响应;那么就不要管它后面的selenium3、selenium4,没用到这些版本的特性就与这个版本无关。
    复制代码
     如果chromedriver不在系统变量中<放在system32这个目录中>,创建的driver对象能找到这个服务,需要使用System.setProperty方法
    1. System.setProperty("webdriver.chrome.driver","chromedriver.exe路径");
    复制代码
     3、webdriver的核心方法和属性,是webdriver对象,譬如:WebDriver driver=new ChromeDriver()
      访问网址:get()、navigate().to()

    4、webelement的核心方法和属性
      · 状态判断is开头的方法,如isSelected()
      · 元素操作,如发送指定:sendKeys(),清除文本:clear(),退出/关闭浏览器:quit()/close(),点击:click()
      · 获取标签的属性:getAttribute("")
      · 获取标签的文本值:getText()

    5、form表单操作、frame和iframe的定位及frame的切入和切出:
      关键方法:switchTo()
      6、checkbox和radiobutton的定位技巧
      这里可以演示一个关于radiobutton的案例:逐一选择单选按钮,dom如下:
    1.  <html>
    2.   <title></title>
    3.   <body>
    4.   <div align="center" id="radio-btn-example">
    5.   <fieldset>
    6.   <legend>Radio Button 示例</legend>
    7.   <label for="apple"> <input id="appleradio" value="apple"
    8.   name="fruit" type="radio"> 苹果<br />
    9.   </label> <label for="orange"> <input id="orangeradio" value="orange"
    10.   name="fruit" type="radio"> 桔子<br />
    11.   </label> <label for="peach"> <input id="peachradio" value="peach"
    12.   name="fruit" type="radio"> 桃子<br />
    13.   </label>
    14.   </fieldset>
    15.   </div>
    16.   </body>
    17.   </html>
    复制代码
    以上有三个单选按钮,挨个点击一遍:
    1. findElement(By.id("appleradio")).click();
    2.   findElement(By.id("orangeradio")).click();
    3.   findElement(By.id("peachradio")).click();
    复制代码
    上面的写法没有什么不对,假使如果某个radio是默认选项呢?那怎么确定是你选择的呢?所以,我们可以找出所有input标签://input[@type='radio' and @name='fruit']
    1. List<WebElement> eles=driver.findElements(By.xpath("//input[@type='radio' and @name='fruit']));
    2.   for(WebElement el:eles){
    3.       // 判断元素是否被选中,否则不点击了
    4.       if(!el.isSelected()){
    5.           el.click();
    6.           System.out.prinln("判断是否被选择中:"+el.isSelected());
    7.       }
    8.   }
    9.   // 上面是高级for的遍历方法,下面是个普通for循环
    10.   for(int i=0;i<eles.size();i++){
    11.       if(eles.get(i).isSelected()){
    12.           eles.get(i).click();
    13.           System.out.prinln("判断是否被选择中:"+el.isSelected());
    14.       }
    15.   }
    复制代码
    复选框。input标签属性type=checkbox:
    1. <html>
    2.   <title>复选框</title>
    3.   <body>
    4.   <div align="center" id="checkbox-example">
    5.   <fieldset>
    6.   <legend>Checkbox 示例</legend>
    7.   <label for="apple"> <input id="applecheck" value="apple"
    8.   name="fruit" type="checkbox"> 苹果<br />
    9.   </label> <label for="orange"> <input id="orangecheck" value="orange"
    10.   name="fruit" type="checkbox"> 桔子<br />
    11.   </label> <label for="peach"> <input id="peachcheck" value="peach"
    12.   name="fruit" type="checkbox"> 桃子<br />
    13.   </label><label for="bananer"> <input id="bananercheck" value="bananer"
    14.   name="fruit" type="checkbox"> 香蕉<br />
    15.   </label>
    16.   </fieldset>
    17.   </div>
    18.   </body>
    19.   </html>
    复制代码
    复选框操作类似单选按钮,可以通过查找id唯一元素点击:
    1. findElement(By.id("applecheck")).click();
    2.   findElement(By.id("bananercheck")).click();
    3.   findElement(By.id("orangecheck")).click();
    复制代码
    假使input标签可以指定默认勾选<在input标签中设置checked即为默认选中>,那么元素操作它的时候,可能是取消,所以可以加个条件判断是否勾选,如果勾选则不选或取消,按需求实现:
      先通过元素查找所有元素:xpath://input[@type='checkbox' and @name='fruit']
    1.  driver.get(System.getProperty("user.dir") + "/drivers/checkbox.html");
    2.   // 找出所有复选框元素
    3.   List<WebElement> elements = driver.findElements(By.xpath("//input[@type='checkbox' and @name='fruit']"));
    4.   // 遍历复选框元素
    5.   for (WebElement ele : elements) {
    6.   // 判断是否已选择
    7.       if (ele.isSelected()) {
    8.           System.out.println(ele.getAttribute("value") + ",是默认选择的");
    9.       } else {
    10.           ele.click();
    11.           System.out.println(ele.getAttribute("value") + ",是否选中:"+ ele.isSelected());
    12.           }
    13.   }
    复制代码
    7、使用select类实现下拉列表定位、多选列表框
      dom元素示例:
    1.  <html>
    2.   <title></title>
    3.   <body>
    4.   <script>
    5.   function showAlert() {
    6.   document.getElementById("multiple-select-example").multiple=true;
    7.   var value = document.getElementById("multiple-select-example");
    8.   if (value.value == "orange") {
    9.   alert("选择了:橘子");
    10.   } else if (value.value == "apple") {
    11.   alert("选择了:苹果");
    12.   } else if (value.value == "banner") {
    13.   alert("选择了:香蕉");
    14.                  
    15.   }else if (value.value == "peach") {
    16.   alert("选择了:桃子");
    17.                   }else {
    18.   alert("请选择");
    19.   }
    20.   }
    21.   </script>
    22.   <div align="center">
    23.   <select id="multiple-select-example" multiple="" size="4"
    24.   name="multiple-select-example">
    25.   <option value="apple">苹果</option>
    26.   <option value="orange">桔子</option>
    27.   <option value="peach">桃子</option>
    28.   <option value="banner">香蕉</option>
    29.   </select> <input id="alertbtn" class="btn-style" value="Alert"
    30.   onclick="showAlert()" type="submit">
    31.   </div>
    32.   </body>
    33.   </html>
    复制代码
     解释一下上面的代码:多选框使用select标签,为什么证明选择的内容可以被正确选中提交,添加了input标签定义type属性为submit,写了js用于获取select标签选中的内容。
      假如我们知道如何xpath写表达式,如://option[@value='peach'],这样就可以选中桃子:
    1.  // 或者放置系统system32目录下作为环境变量
    2.   System.setProperty("webdriver.chrome.driver",
    3.                   "drivers/chromedriver.exe");
    4.   WebDriver driver = new ChromeDriver();
    5.   driver.get(System.getProperty("user.dir") + "/drivers/gupiao.html");
    6.   driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
    7.   driver.manage().window().maximize();
    8.   driver.findElement(By.xpath("//option[@value='peach']")).click();
    9.   Thread.sleep(2000);
    10.   driver.findElement(By.id("alertbtn")).click();
    11.   Thread.sleep(2000);
    12.   Alert alert = driver.switchTo().alert();
    13.   alert.accept();
    14.   driver.quit();
    复制代码
    思考:
      但是有一个问题,即是多选框,那么就不止选择一个,如何实现选择多个呢?在按键操作是可以通过shift可以实现,那么selenium呢?实际是可以操作多次;
    1. driver.findElement(By.xpath("//option[@value='peach']")).click();
    2.   driver.findElement(By.xpath("//option[@value='banner']")).click();
    复制代码
    这里介绍一个selenium工具中的Select类来实现:
    1.  WebElement element=driver.findElement(By.id("multiple-select-example"));
    2.   Select sel=new Select(element);
    3.   // 根据标签属性值选择
    4.   sel.selectByValue("peach");
    5.   Thread.sleep(2000);
    6.   // 根据索引
    7.   sel.selectByIndex(1);
    8.   Thread.sleep(2000);
    9.   // 根据标签text文本
    10.   sel.selectByVisibleText("香蕉");
    11.   List<WebElement> selOptions=sel.getAllSelectedOptions();
    12.   for(WebElement el:selOptions){
    13.     // 输出选择的option文本
    14.           System.out.println(el.getText());
    15.   }
    16.   Thread.sleep(2000);
    17.   // 取消选择
    18.   sel.deselectAll();
    复制代码












    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?(注-册)加入51Testing

    x
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2021-6-9 14:08
  • 签到天数: 1 天

    连续签到: 1 天

    [LV.1]测试小兵

    发表于 2021-9-18 15:15:19 | 显示全部楼层
    啊,就没了?感觉有些意犹未尽的味道
    回复 支持 反对

    使用道具 举报

  • TA的每日心情
    无聊
    前天 09:12
  • 签到天数: 918 天

    连续签到: 3 天

    [LV.10]测试总司令

     楼主| 发表于 2021-9-18 15:15:47 | 显示全部楼层
    千里 发表于 2021-9-18 15:15
    啊,就没了?感觉有些意犹未尽的味道

    别急 后面还会有更新!
    回复 支持 反对

    使用道具 举报

    本版积分规则

    关闭

    站长推荐上一条 /1 下一条

    小黑屋|手机版|Archiver|51Testing软件测试网 ( 沪ICP备05003035号 关于我们

    GMT+8, 2024-3-29 02:27 , Processed in 0.068944 second(s), 24 queries .

    Powered by Discuz! X3.2

    © 2001-2024 Comsenz Inc.

    快速回复 返回顶部 返回列表