51Testing软件测试论坛

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

QQ登录

只需一步,快速开始

微信登录,快人一步

手机号码,快捷登录

查看: 1434|回复: 1
打印 上一主题 下一主题

【转帖】WebDriver拾级而上(03) – 定位页面元素

[复制链接]

该用户从未签到

跳转到指定楼层
1#
发表于 2017-7-13 13:22:14 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式
本帖最后由 悠悠小仙仙 于 2017-7-13 13:26 编辑

selenium-webdriver提供了强大的元素定位方法,支持以下三种方法:
单个对象的定位方法多个对象的定位方法层级定位
注意:
selenium-webdriver通过findElement()\findElements()等find方法调用”By”对象来定位和查询元素。By类只是提供查询的方式进行分类。findElement返回一个元素对象否则抛出异常,findElements返回符合条件的元素 List,如果不存在符合条件的就返回一个空的list。
一、定位单个元素A.使用className进行定位
当所定位的元素具有class属性的时候我们可以通过classname来定位该元素。
例:下面的例子定位页面上class为”username”的li。
CODE:
  1. WebElement element = driver.findElement(By.className("username"));
  2. System.out.println(element.getTagName());
复制代码
输出结果:Li
B.使用id属性定位
例:
CODE:
<input id="passport_user" type="text" value="" title="用户名/邮箱" name="passport_user">
CODE:
  1. WebElement element = dr.findElement(By.id("passport_user"));
  2. System.out.println(element.getAttribute("title"));
复制代码
输出结果:用户名/邮箱
C.使用name属性定位
例:
CODE:
  1. <input id="passport_user" type="text" value="" title="用户名/邮箱" name="passport_user">
复制代码
CODE:
  1. WebElement e = dr.findElement(By.name("passport_user"));
复制代码
D.使用css属性定位
例:
CODE:
  1. <input id="passport_user" type="text" value="" title="用户名/邮箱" name="passport_user">
复制代码
CODE:
  1. WebElement e1 = dr.findElement(By.cssSelector("#passport_user"));
复制代码
详解:
1.css之后代选择器CODE:
  1. <p>
  2.     <em>location1</em>
  3. </p>
  4. <ol>
  5.      <li><em>location2</em></li>
  6. </ol>
复制代码
可以通过css=p em这个可以选中文本为location1的em元素
css=ol em这个可以选中文本为location2的em元素
css后代选择器和xpath中//div//a一样:取得所有div下面所有的a节点。这个是忽略了父子节点CODE:
  1. <div>
  2.     <p><em>location1</em></p>
  3. </div>
  4. <div>
  5. <ol>
  6.     <li><strong><em>location2</em></strong></li>
  7.     <li><em>location3</em></li>
  8.     <li><em>location4</em></li>
  9. </ol>
  10. </div>
复制代码
可以通过css=p>em来定位location1
css之父子节点选择器给后代选择器加了一个限制,类似xpath中//div/p/em:所有div下的子元素p的子元素em。
css=li+li em来定位location3,location4的em
css=li+strong+em来定位文本为location2的em
2.css之id选择器
CODE:
  1. <input id="location1" type="button"/>
  2. <input id="location2" type="radio"/>
复制代码
通过css=#location1来定位type为button的按钮
通过css=#location2来定位type为radio的单选框
3.css之类选择器
CODE:
  1. <input class="location1" type="button" value="确定"/>
  2. <input class="location2" type="button" value="取消"/>
复制代码
通过css=input.location1来选择value值为确定的按钮
通过css=input.location2来选择value值为取消的按钮
4.css之属性选择器
CODE:
  1. <input class="location1" type="button" value="确定"/>
  2. <input class="location2" type="button" />
复制代码
通过css=[class=location1]可以定位第一个按钮
通过css=[class~=1]可以定位第一个按钮
通过css=[value=”确定”]可以定位第一个按钮
通过css=input[class=”location”]可以定位第二个按钮
E.按标记(tag)名称查找
元素的DOM标记名称
CODE:
  1. <iframe src="..."></iframe>
复制代码
CODE:


    1. WebElement frame = driver.findElement(By.tagName("iframe"));
    复制代码
    F.按链接文本查找
    CODE:
    1. <a href="http://www.google.com/search?q=cheese">cheese</a>
    复制代码
    CODE:
    1. WebElement cheese = driver.findElement(By.linkText("cheese"));
    复制代码
    按部分链接文本查找
    CODE:
    1. <a href="http://www.google.com/search?q=cheese">search for cheese</a>
    复制代码
    CODE:
    1. WebElement cheese = driver.findElement(By.partialLinkText("cheese"));
    复制代码
    G.使用 XPATH定位
    例:
    CODE:
    1. <input id="passport_user" type="text" value="" title="用户名/邮箱" name="passport_user">
    复制代码
    CODE:
    1. WebElement element =dr.findElement(By.xpath("//input[@id='passport_user']"));
    复制代码
    parent::返回父节点
    following::返回此节点后面的兄弟节点
    preceding::返回此节点前面的兄弟节点
    CODE:
    1. <div>
    2. <input id="location1" type="button" />
    3. <input type="button" />
    4. </div>
    复制代码
    通过id为location1可以很随意的定位到兄弟节点
    //div/input[@id=’location1′]/following::input
    也可以通过location1很随意的定位到父类节点div。
    //div/input[@id=’location1′]/parent::div。
    也可以通过索引为2的input定位到id为location1的input
    //div/input[2]/preceding-sibling::input
    有几个非常有用的Firefox插件,有助于发现一个元素的XPath:
    XPath Checker – suggests XPath and can be used to test XPath results.
    Firebug – XPath suggestions are just one of the many powerful features of this very useful add-on.
    XPath Checker – 建议XPath并可以用于测试XPath的结果
    Firebug – XPath建议仅仅是这非常有用的插件的许多强有力特征中的一个。
    二、定位多个元素
    CODE:
    1. //定位到所有<input>标签的元素,然后输出他们的id
    2. List<WebElement> element = driver.findElements(By.tagName("input"));
    3. for (WebElement e : element)
    4.     System.out.println(e.getAttribute("id"));
    复制代码
    三、层级定位层级定位的思想是先定位父元素,然后再从父元素中精确定位出其我们需要选取的子元素。
    层级定位一般的应用场景是无法直接定位到需要选取的元素,但是其父元素比较容易定位,通过定位父元素再遍历其子元素选择需要的目标元素,或者需要定位某个元素下所有的子元素。
    下面的代码演示了如何使用层级定位class为”login”的div,然后再取得它下面的所有label,并打印出他们的文本
    CODE:
    1. //定位class为"login"的div,然后再取得它下面的所有label,并打印出他们的值
    2. WebElement element = driver.findElement(By.className("login"));
    3. List<WebElement> el = element.findElements(By.tagName("label"));
    4. for(WebElement e : el)
    5.     System.out.println(e.getText());
    复制代码
    四、使用Javascript你可以执行任何Javascript,以找到一个元素,只要你找到一个DOM元素,它将自动转换为WebElement对
    象。
    CODE:
    1. WebElement element = (WebElement) ((JavascriptExecutor)driver).executeScript("return
    2. $('.cheese')[0]");
    复制代码

本帖子中包含更多资源

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

x
分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏2
回复

使用道具 举报

  • TA的每日心情
    无聊
    2024-9-19 09:07
  • 签到天数: 11 天

    连续签到: 2 天

    [LV.3]测试连长

    2#
    发表于 2017-7-13 17:03:08 | 只看该作者
    页面元素一直定位不出,这样可以回去试试了
    回复 支持 反对

    使用道具 举报

    本版积分规则

    关闭

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

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

    GMT+8, 2024-11-10 22:58 , Processed in 0.066870 second(s), 23 queries .

    Powered by Discuz! X3.2

    © 2001-2024 Comsenz Inc.

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