[跟着官方文档学Selenium][学习笔记][六][WebDriver的元素]

网友投稿 909 2022-05-29

交互

用于操纵表单的高级指令集。

仅有五种基本命令可用于元素的操作:

点击(适用于任何元素)

发送键位(仅适用于文本字段和内容可编辑元素)

清除(仅适用于文本字段和内容可编辑元素)

[跟着官方文档学Selenium][学习笔记][六][WebDriver的元素]

提交(仅适用于表单元素)

选择(参见选择列表元素)

附加验证

这些方法的设计目的是尽量模拟用户体验,所以,与Actions接口不同,在指定制定操作之前,会尝试执行两件事。

1,如果它确定元素在视图之外,则会将元素滚动到视图中,特别是将元素底部与视图底部对齐。

2, 确保元素在执行操作之前是可交互的。这可能意味着滚动不成功,或者该元素没有以其他方式显示。确定某个元素是否显示在页面上太难了无法直接在webdriver规范中定义,因此Selenium发送一个带有JavaScript原子的执行命令,检查是否有可能阻止该元素显示。如果确定某个元素不在视图中,不显示,不可键盘交互,或不可指针交互,则返回一个元素不可交互错误。

点击

元素点击命令执行在元素中央。如果元素中央由于某些元素被遮挡,Selenium将返回一个元素点击中断错误。

发送键位

元素发送键位命令将录入提供的键位到可编辑的元素。通常,这意味着元素是具有文本类型的表单的输入元素或具有内容可编辑属性的元素。如果不可编辑,则返回无效元素状态错误。以下是WebDriver支持的按键列表。

import org.openqa.selenium.By; import org.openqa.selenium.Keys; import org.openqa.selenium.WebDriver; import org.openqa.selenium.edge.EdgeDriver; public class HelloSelenium { public static void main(String[] args) { WebDriver webDriver = new EdgeDriver(); try { //输入URL webDriver.get("https://www.baidu.com"); //输入Selenium按下回车键 webDriver.findElement(By.id("kw")).sendKeys("Selenium" + Keys.ENTER); } finally { webDriver.quit(); } } }

清除

元素清除命令重置元素的内容。这要求元素可编辑,且可重置。通常,这意味着元素是具有文本类型的表单的输入元素或具有内容可编辑属性的元素。如果不满足这些条件,将返回无效元素状态错误。

import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.edge.EdgeDriver; public class clear { public static void main(String[] args) { WebDriver webDriver = new EdgeDriver(); try { //导航URL webDriver.get("https://www.baidu.com"); //存储SearchInput元素 WebElement searchInput = webDriver.findElement(By.id("kw")); searchInput.sendKeys("Selenium"); //清除输入的文本 searchInput.clear(); } finally { //webDriver.quit(); } } }

提交

在Selenium4中,不再通过单独的端点以及脚本执行的方法来实现。因此,建议不要使用此方法,而是单击相应的表单提交按钮。

查询器

根据提供的定位值定位元素。

使用Selenium的最基本方面之一是获得要使用的元素引用。Selenium提供了许多内置的定位器策略来唯一地识别元素。在高级方法中,可以通过许多方式使用这些定位器。出于本文档的目的,让我们考虑一下这段HTML代码:

DemoPage

  1. patatoes
  2. onions
  3. Tomato is a vegetable
  • bananas
  • apples
  • Tomato is a fruit

第一个匹配的元素

很多定位器会匹配页面的多个元素。查找单个元素方法将返回给给定上下文中找到的第一个元素的引用。

评估整个DOM

当find element方法被驱动实例调用时,它将返回在DOM中与提供的定位器相匹配的第一个元素。这个值可以被存储或元素操作所使用。在上面的HTML例子中,有两个元素,其中一个叫tomatoes,所以这个方法将返回vegetables列表中的元素。

import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.edge.EdgeDriver; public class Demo1 { public static void main(String[] args) { WebDriver webDriver = new EdgeDriver(); webDriver.get("XXX\\demo1.html"); WebElement vegetable = webDriver.findElement(By.className("tomatoes")); System.out.println(vegetable.getText());//Tomato is a vegetable } }

评估DOM的子集

相比在整个DOM中查找唯一定位器,经常会用到查找的是定位另一个元素。在上面例子中,两个元素的类名都为"tomatoes",要找到第二个的引用有点挑战性。

一种解决方案是查找具有唯一属性的元素,该元素是所需元素的祖先,而不是不需要的元素的祖先,然后在该对象上调用find element。

import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.edge.EdgeDriver; public class Demo2 { public static void main(String[] args) { WebDriver webDriver = new EdgeDriver(); webDriver.get("XXX\\demo1.html"); WebElement fruits = webDriver.findElement(By.id("fruits")); WebElement tomatoes = fruits.findElement(By.className("tomatoes")); String text = tomatoes.getText(); System.out.println(text);//Tomato is a fruit } }

优化定位器

如上例所示,嵌套查找可能不是最有效的位置策略,因为这需要向浏览器发出两个单独的指令。

为了稍微提高性能,我们可以使用CSS或者XPath在单条指令中查找元素。可以观看我们鼓励测试实践部分中的定位器策略建议。

在这个例子中我们将使用CSS Selector

import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.edge.EdgeDriver; public class Demo3 { public static void main(String[] args) { WebDriver webDriver = new EdgeDriver(); webDriver.get("XXX\\demo1.html"); WebElement fruit = webDriver.findElement(By.cssSelector("#fruits .tomatoes")); System.out.println(fruit.getText());//Tomato is a fruit } }

匹配所有元素

需要获取与定位器匹配的所有元素(而不仅仅是第一个元素)的引用有几种用例。复数查找元素方法返回元素引用的集合。如果没有匹配项,则返回空列表。在这种情况下,所有水果和蔬菜列表项的引用将在集合中返回。

import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.edge.EdgeDriver; import java.util.List; public class Demo4 { public static void main(String[] args) { WebDriver webDriver = new EdgeDriver(); webDriver.get("XXX\\demo1.html"); List plants = webDriver.findElements(By.tagName("li")); for (int i = 0; i < plants.size(); i++) { System.out.println("第" + (i + 1) + "个元素为:" + plants.get(i).getText()); } /* * 第1个元素为:potatoes 第2个元素为:onions 第3个元素为:Tomato is a vegetable 第4个元素为:bananas 第5个元素为:apples 第6个元素为:Tomato is a fruit * */ } }

获取元素

通常,你会获得一个元素集合,但希望使用特定元素,这意味着你需要循环访问该集合并确定所需的元素。

import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.edge.EdgeDriver; import java.util.List; public class Demo5 { public static void main(String[] args) { WebDriver webDriver = new EdgeDriver(); webDriver.get("XXX\\demo1.html"); List elements = webDriver.findElements(By.tagName("li")); for (WebElement element : elements) { System.out.println("Paragraph text: " + element.getText()); } /* * Paragraph text: potatoes Paragraph text: onions Paragraph text: Tomato is a vegetable Paragraph text: bananas Paragraph text: apples Paragraph text: Tomato is a fruit * */ } }

从元素中找元素

用于在父元素的上下文中查找匹配的子WebElements的列表。为了实现这一点,父WebElement使用"findElements"链接来访问子元素。

import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.edge.EdgeDriver; import java.util.List; public class findElementsFromElement { public static void main(String[] args) { WebDriver webDriver = new EdgeDriver(); try { webDriver.get("XXX\\example.html"); //通过tagName 'div' 获取元素 WebElement element = webDriver.findElement(By.tagName("div")); //通过tagName 'p' 获取所有可用元素 List elements = element.findElements(By.tagName("p")); for (WebElement e : elements) { System.out.println(e.getText()); } } finally { webDriver.quit(); } } }

获取激活元素

它用于追踪或查找在当前浏览上下文中具有焦点的DOM元素

import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.edge.EdgeDriver; public class activeElementTest { public static void main(String[] args) { WebDriver webDriver = new EdgeDriver(); try { webDriver.get("https://www.baidu.com"); webDriver.findElement(By.cssSelector("#kw")).sendKeys("Selenium"); //获取当前激活元素的属性 String attr = webDriver.switchTo().activeElement().getAttribute("name"); System.out.println(attr);//wd } finally { webDriver.quit(); } } }

信息

你可以查询有关特定元素的许多详细信息

Is Displayed

此方法用于检查链接的元素是否显示在网页上。返回一个布尔值,如果链接的元素显示在当前浏览上下文中就是True,否则为False。

import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.edge.EdgeDriver; public class Demo1 { public static void main(String[] args) { WebDriver webDriver = new EdgeDriver(); webDriver.get("https://www.baidu.com"); boolean kwDisplayed = webDriver.findElement(By.id("kw")).isDisplayed(); if (kwDisplayed) { System.out.println("搜索框已显示"); } else { System.out.println("搜索框没有显示"); } } }

Is Element Selected

此方法确定是否已选择引用的元素。广泛用于复选框,单选按钮,输入元素和选项元素。

返回一个布尔值,如果在当前浏览上下文中已选择引用的元素返回True,否则返回False。

Demo2

Tomato
Apple

import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.edge.EdgeDriver; public class Demo2 { public static void main(String[] args) { WebDriver webDriver = new EdgeDriver(); webDriver.get("XXX\\Demo2.html"); //如果选中元素返回True boolean tomatoSelected = webDriver.findElement(By.name("tomato")).isSelected(); if (tomatoSelected) { System.out.println("西红柿被选中"); } else { System.out.println("西红柿没被选中"); } boolean appleSelected = webDriver.findElement(By.name("apple")).isSelected(); if (appleSelected) { System.out.println("苹果被选中"); } else { System.out.println("苹果没被选中"); } } }

Get Element TagName

此方法用于获取在当前浏览上下文中具有焦点的被引用的元素TagName

import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.edge.EdgeDriver; public class Demo3 { public static void main(String[] args) { WebDriver webDriver = new EdgeDriver(); webDriver.get("https://www.example.com"); String h1Value = webDriver.findElement(By.cssSelector("h1")).getTagName(); System.out.println(h1Value); } }

Get Element Rect

用于获取参考元素的尺寸和坐标

提取的数据主体包含以下详细信息:

元素左上角的X轴位置

元素左上角的Y轴位置

元素高度

元素宽度

import org.openqa.selenium.By; import org.openqa.selenium.Rectangle; import org.openqa.selenium.WebDriver; import org.openqa.selenium.edge.EdgeDriver; public class Demo4 { public static void main(String[] args) { WebDriver webDriver = new EdgeDriver(); webDriver.get("https://www.example.com"); //返回高宽xy四个元素 Rectangle res = webDriver.findElement(By.cssSelector("h1")).getRect(); //Rectangle类提供了获取xy高宽方法 System.out.println(res.getX()); System.out.println(res.getY()); System.out.println(res.getWidth()); System.out.println(res.getHeight()); } }

获取元素CSS值

获取当前浏览上下文中元素的特定计算样式属性的值

import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.edge.EdgeDriver; public class Demo5 { public static void main(String[] args) { WebDriver webDriver = new EdgeDriver(); webDriver.get("https://www.example.com"); String color = webDriver.findElement(By.linkText("More information...")).getCssValue("color"); System.out.println(color);//rgba(56, 72, 143, 1) } }

获取元素文本

获取特定元素渲染后的文本

import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.edge.EdgeDriver; public class Demo6 { public static void main(String[] args) { WebDriver webDriver = new EdgeDriver(); webDriver.get("https://www.example.com"); String text = webDriver.findElement(By.cssSelector("h1")).getText(); System.out.println(text);//Example Domain } }

定位器

在DOM中标识一个或多个特定元素的方法。定位器是一种标识页面上元素的方法。它是传递给查找元素方法的参数。

元素选择策略

在WebDriver中有8种不同的内置元素定位策略:

相对定位器

Selenium 4引入了相对定位器(以前称为友好定位器)。当为所需元素构建定位器并不容易,但很容易在空间上描述元素相对于具有易于构建的定位器的元素位置时,这些定位器非常有用。

相对定位器如何工作的

Selenium使用JavaScript函数getBoundingClientRect()定义页面元素的大小和位置,并且可以用这些信息定位旁边的元素。

相对定位器方法可以将原点(先前定位的元素参考或者其他定位器)用作原点的参数。

让我们以下面的页面为例来理解相对定位器。

可用的相对定位器

如果email的文本域不容易获取,但是密码文本域容易获取,我们可以定位"input"元素在密码元素"上方"

By emailLocator = RelativeLocator.with(By.tagName("input")).above(By.id("password"));

如果密码文本域不容易获取,但是email的文本域容易获取,我们可以定位"input"元素在email元素"下方"

By passwordLocator = RelativeLocator.with(By.tagName("input")).below(By.id("email"));

如果cancel按钮不容易获取,但是submit按钮容易获取,我们可以通过定位submit元素的左边来找到cancel元素

By cancelLocator = RelativeLocator.with(By.tagName("button")).toLeftOf(By.id("submit"));

如果submit按钮不容易获取,但是cancel按钮容易获取,我们可以通过定位cancel元素的右边来找到submit元素

By submitLocator = RelativeLocator.with(By.tagName("button")).toRightOf(By.id("cancel"));

如果相对定位不明显,或者因窗口大小而已,则可以使用near方法识别距离,提供的定位器范围最多50px.一个很好的用例是使用一个表单元素,该元素没有易于构建的定位器,但其关联的输入标签元素具有

By emailLocator = RelativeLocator.with(By.tagName("input")).near(By.id("lbl-email"));

链式相对定位器

需要的话你还可以链接定位器。有时,该元素最容易被识别为一个元素的上/下以及另一个元素的左/右。

By submitLocator = RelativeLocator.with(By.tagName("button")).below(By.id("email").toRightOf(By.id("cancel"));

选择列表

与其他元素相比,选择列表具有特俗的行为。

选择元素可能需要大量样板代码才能自动化。为了减少这种情况并使你的测试更干净,在Selenium的support包中有一个Select类。要使用它需要导入以下语句:

import org.openqa.selenium.support.ui.Select;

然后,能够参考元素进行交互。首先,有多种方法可以从

有三种方法可以从上述元素中选择第一个选项:

import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.edge.EdgeDriver; import org.openqa.selenium.support.ui.Select; public class Demo1 { public static void main(String[] args) { WebDriver webDriver = new EdgeDriver(); webDriver.get("XXX\\demo.html"); WebElement selectElement = webDriver.findElement(By.id("selectElementID")); Select selectObject = new Select(selectElement); //根据下标选择 //selectObject.selectByIndex(1); //根据值的属性选择 //selectObject.selectByValue("value1"); //根据text选择 selectObject.selectByVisibleText("Bread"); } }

然后,可以检视所有被选择的选项:

import org.openqa.selenium.By; import org.openqa.selenium.WebDriver; import org.openqa.selenium.WebElement; import org.openqa.selenium.edge.EdgeDriver; import org.openqa.selenium.support.ui.Select; import java.util.List; public class Demo2 { public static void main(String[] args) { WebDriver webDriver = new EdgeDriver(); webDriver.get("XXX\\demo.html"); WebElement selectElement = webDriver.findElement(By.id("selectElementID")); Select selectObject = new Select(selectElement); //将选项返回到List集合 List allSelectedOptions = selectObject.getAllSelectedOptions(); System.out.println(allSelectedOptions);//tag name: option //返回DOM遍历时找到的第一个option WebElement firstSelectedOption = selectObject.getFirstSelectedOption(); System.out.println("=======\n"+firstSelectedOption.getText());//Milk } }

或者你可能只对元素允许你选择多个选项。可以通过使用以下命令确定你的