Webdriver处理页面元素的方式

Webdriver执行JavaScript代码的方式

　　WebDriver driver = new ChromeDriver();

　　JavascriptExecutor jse = (JavascriptExecutor)driver;  

　　1.直接传入JavaScript代码

　　　　jse.executeScript("window.open('" + String.format(detailsUrl,urlParam[0],urlParam[1],urlParam[2],urlParam[4],urlParam[3] ) + "')");  

　　2.传入WebElement执行JS

　　　　WebElement webElement = webDriver.findElement(By.id("tab_2"));
　　　　jse.executeScript("arguments[0].click();", webElement);

 WebDriver获取页面元素

　　id -->findElement(By.id(“id”))

　　class_name -->findElement(By.className("className"))

　　linkText -->findElement(By.linkText("Inbox"))

　　tagName -->findElement(By.tagName(“html的类别信息如button”))

　　css --> 1）绝对路径 在DOM中的具体位置

　　　　　　　　　　findElement(by.cssSelector(“html body div form input”))

　　　　　　　 　　  或findElement(by.cssSelector(“html>body>div>form>input”))

　　　　　　2）相对路径

        　　　　　　   driver.findElement(By.cssSelector("input"));第一个input元素。

　　　　　　　　　　driver.findElement(By.cssSelector("input.login")); html标签.class的属性值

　　　　　　3）相对Id选择器

　　　　　　　　　　driver.findElement(By.cssSelector("input#username"));html标签#id

　　　　　　　　　　driver.findElement(By.cssSelector("#username"));只是#id

　　　　　　4）属性

　　　　　　　　　　driver.findElement(By.cssSelector("input[name=username]"));使用name属性

　　　　　　　　　　driver.findElement(By.cssSelector("img[alt='Previous']"));使用alt属性

　　　　　　　　　　driver.findElements(By.cssSelector("img[alt]"));通过属性名称查找，页面所有img含有alt属性的标签

　　　　　　　　　　driver.findElement(By.cssSelector("input[type='submit'][value='Login']"));联合多个属性查询

　　　　　　　　　　driver.findElements(By.cssSelector("img:not([alt])"));使用伪类

　　　　　　5）部分属性 (对于页面上有动态变化的属性的元素是非常有用的)

　　　　　　　　　　driver.findElement(By.cssSelector(Input[id ^ =‘ ctrl’]));匹配到id头部 如ctrl_12

　　　　　　　　　　driver.findElement(By.cssSelector(Input[id ^ =‘ ctrl’]));匹配到id尾部 如a_ctrl

　　　　　　　　　　driver.findElement(By.cssSelector(Input[id *=‘ ctrl’]));匹配到id中间如1_ctrl_12

　　高级CSS

　　　　　　1）查询子元素

　　　　　　　　　　WebElement userName =  driver.findElement(By.cssSelector("form#loginForm > input"));

　　　　　　　　　　WebElement userName = driver.findEleme(By.cssSelector("form#loginForm :nth-child(2)"));

　　　　　　　　　　:first-child 定位表单第一个子元素

　　　　　　　　　　:last-child 定位表单最后一个子元素

　　　　　　　　　　:nth-child(2) 定位表单中第二个子元素

　　　　　　2）使用伪类

　　　　　　　　　　driver.findElement(By.cssSelector("input:focus")); 也可使用hover active

　　　　　　　　　　:enable  input:enable 定位属性为enable的input元素

　　　　　　　　　　:disable  input:disable 定位属性为disable的input元素

　　　　　　　　　　:checked input:checked 定位有多选框属性为checked的元素

　　　　　　3）查询兄弟元素

　　　　　　　　　　driver.findElement(By.cssSelector("#nv a + b")); 定位到a 再定位到和它相邻的b

　　Xpath（可以向前向后查询DOM结构，css只能向前）

　　　　　　1）绝对路径

　　　　　　　　　　driver.findElement(By.xpath("html/body/div/div/form/input"));//如果发生结构改变则找不到　　　

　　　　　　2）相对路径

　　　　　　　　　　driver.findElement(By.xpath("//input"));//假设在DOM中的第一个

　　　　　　3）使用索引

　　　　　　　　　　driver.findElement(By.xpath("//input[2]"));//找第二个input元素

　　　　　　4）属性值

　　　　　　　　　　driver.findElement(By.xpath("//input[@id='username']"));//使用id属性匹配

　　　　　　　　　　driver.findElement(By.xpath("img[@alt='Previous']"));//使用alt属性

　　　　　　　　　　driver.findElement(By.xpath ("//input[@type='submit'][@value='Login']"));//联合多个属性

　　　　　　　　　　WebElement previousButton = driver.findElement (By.xpath("//input[@type='submit'and @value='Login']"));//使用and联合查询

　　　　　　　　　　WebElement previousButton = driver.findElement (By.xpath("//input[@type='submit'or @value='Login']"));//使用or选择查询

　　　　　　5）属性名称

　　　　　　　　　　List imagesWithAlt = driver.findElements (By.xpath ("img[@alt]"));//使用属性名称  img中带有alt属性的元素

　　　　　　6）部分属性值

　　　　　　　　　　starts-with()  --> driver.findElement(By.XPath(“input[starts-with(@id,’ctrl’)]”));

　　　　　　　　　　ends-with()  -->driver.findElement(By.XPath(“input[ends-with(@id,’ctrl’)]”));

　　　　　　　　　　contains()  --> starts-with() driver.findElement(By.XPath(“input[contains(@id,’ctrl’)]”));

　　　　　　7）使用值匹配任意元素属性值

　　　　　　　　　　driver.findElement(By.xpath("//input[@*='username']"));任意属性名称为username的元素

　　　　　　8）定位父元素或者兄弟元素

　　　　　　　　　　<section class="AutoTest">haha   

　　　　　　　　　　　　<a title="testp"  href="#">  testa</a>   

　　　　　　　　　　　　<div style="#">WEB Auto Test !    </div>

　　　　　　　　　　</section>

　　　　　　　　　　WebElement elementNames =driver.findElement(By.xpath("//a[@title='testp']")); 

　　　　　　　　　　System.out.println("elementNames.getText()"+elementNames.getText());

      　　　　　　　　WebElement elementNamess =driver.findElement(By.xpath("//a[@title='testp']/parent::section")); 

　　　　　　　　　　System.out.println("elementNamess.getText()"+elementNamess.getText());

　　　　　　　　　　WebElement elementName = driver.findElement(By.xpath("//a[@title='testp']/parent::section/div")); 

　　　　　　　　　　System.out.println("elementName.getText()"+elementName.getText());　　　　　　　　　

　　　　　　　　　　运行结果如下：

　　　　　　　　　　elementNames.getText()testa
　　　　　　　　　　elementNamess.getText()haha testa
　　　　　　　　　　WEB Auto Test !
　　　　　　　　　　elementName.getText()WEB Auto Test !

　　　　　　　　　　首先我们通过By.xpath("//a[@title='testp']"定位到节点a链接，
　　　　　　　　　　然后我们又通过parent::section定位到他父节点<section|> ,
　　　　　　　　     又通过//a[@title='testp']/parent::section/div定位到了section的子节点 <div>

findElement将会查询整个DOM 最终返回第一个找到的匹配的元素

findElement可以查询子类，缩写为

driver.findElement(By.id("div1")).findElement(By.linkText("top"));

查找一个元素                 查找这个元素下的子类top

当findElement找不到元素时。抛出NoSuchElementFoundException

findElements()方法返回所有匹配定位策略的WebElement的集合，我们可以使用Java中List类来创建WebElements的实例，实现查找多个元素：

List links = driver.findElements(By.cssSelector("#nv a"));