使用 WebDriver 定位页面元素

Created: November-22, 2018

要与网页中的 WebElements 交互，首先我们需要确定元素的位置。

By 是 selenium 中提供的关键字。

你可以找到元素 By ..

按 ID
按类名
按 TagName
按名称
通过链接文本
通过部分链接文本
通过 CSS Selector
通过 XPath
使用 JavaScript

请考虑以下脚本示例

<form name="loginForm">
Login Username: <input id="username" name="login" type="text" />
Password: <input id="password" name="password" type="password" />
<input name="login" type="submit" value="Login" />

在上面的代码中，用户名和密码是使用 id 设置的。现在，你将识别具有 id 的元素。

driver.findElement(By.id(username));

driver.findElement(By.id(password));

由于 selenium 支持 7 种不同的语言，因此本文档为你提供了在所有语言中定位元素的想法。

按 ID

如何使用 ID 查找元素的示例：

<div id="coolestWidgetEvah">...</div>

Java       -  WebElement element = driver.findElement(By.id("coolestWidgetEvah"));
C#         -  IWebElement element = driver.FindElement(By.Id("coolestWidgetEvah"));
Python     -  element = driver.find_element_by_id("coolestWidgetEvah")
Ruby       -  element = driver.find_element(:id, "coolestWidgetEvah")
JavaScript/Protractor -  var elm = element(by.id("coolestWidgetEvah"));

按类名

如何使用类名查找元素的示例：

<div class="cheese"><span>Cheddar</span></div>

Java       -  WebElement element = driver.findElement(By.className("cheese"));
C#         -  IWebElement element = driver.FindElement(By.ClassName("cheese"));
Python     -  element = driver.find_element_by_class_name("cheese")
Ruby       -  cheeses = driver.find_elements(:class, "cheese")
JavaScript/Protractor -  var elm = element(by.className("cheese"));

按标签名称

如何使用标记名称查找元素的示例：

<iframe src="..."></iframe>

Java       -  WebElement element = driver.findElement(By.tagName("iframe"));
C#         -  IWebElement element = driver.FindElement(By.TagName("iframe"));
Python     -  element = driver.find_element_by_tag_name("iframe")
Ruby       -  frame = driver.find_element(:tag_name, "iframe")
JavaScript/Protractor -  var elm = element(by.tagName("iframe"));

按名字

如何使用名称查找元素的示例：

<input name="cheese" type="text"/>

Java       -  WebElement element = driver.findElement(By.name("cheese"));
C#         -  IWebElement element = driver.FindElement(By.Name("cheese"));
Python     -  element = driver.find_element_by_name("cheese")
Ruby       -  cheese = driver.find_element(:name, "cheese")
JavaScript/Protractor -  var elm = element(by.name("cheese"));

通过链接文本

如何使用链接文本查找元素的示例：

<a href="http://www.google.com/search?q=cheese">cheese</a>>

Java       -  WebElement element = driver.findElement(By.linkText("cheese"));
C#         -  IWebElement element = driver.FindElement(By.LinkText("cheese"));
Python     -  element = driver.find_element_by_link_text("cheese")
Ruby       -  cheese = driver.find_element(:link, "cheese")
JavaScript/Protractor -  var elm = element(by.linkText("cheese"));

通过部分链接文本

如何使用部分链接文本查找元素的示例：

<a href="http://www.google.com/search?q=cheese">search for cheese</a>>

Java       -  WebElement element = driver.findElement(By.partialLinkText("cheese"));
C#         -  IWebElement element = driver.FindElement(By.PartialLinkText("cheese"));
Python     -  element = driver.find_element_by_partial_link_text("cheese")
Ruby       -  cheese = driver.find_element(:partial_link_text, "cheese")
JavaScript/Protractor -  var elm = element(by.partialLinkText("cheese"));

通过 CSS 选择器

如何使用 CSS 选择器查找元素的示例：

<div id="food" class="dairy">milk</span>

Java       -  WebElement element = driver.findElement(By.cssSelector("#food.dairy")); //# is used to indicate id and . is used for classname.
C#         -  IWebElement element = driver.FindElement(By.CssSelector("#food.dairy"));
Python     -  element = driver.find_element_by_css_selector("#food.dairy")
Ruby       -  cheese = driver.find_element(:css, "#food span.dairy.aged")
JavaScript/Protractor -  var elm = element(by.css("#food.dairy"));

这是一篇关于创建 CSS 选择器的文章： http ： //www.w3schools.com/cssref/css_selectors.asp

通过 XPath

如何使用 XPath 查找元素的示例：

<input type="text" name="example" />

Java       -  WebElement element = driver.findElement(By.xpath("//input"));
C#         -  IWebElement element = driver.FindElement(By.XPath("//input"));
Python     -  element = driver.find_element_by_xpath("//input")
Ruby       -  inputs = driver.find_elements(:xpath, "//input")
JavaScript/Protractor -  var elm = element(by.xpath("//input"));

这是一篇关于 XPath 的文章： http ： //www.w3schools.com/xsl/xpath_intro.asp

使用 JavaScript

你可以执行任意 javascript 来查找元素，只要返回 DOM 元素，它就会自动转换为 WebElement 对象。

加载 jQuery 的页面上的简单示例：

Java       -  WebElement element = (WebElement) 
((JavascriptExecutor)driver).executeScript("return $('.cheese')[0]");

C#         -  IWebElement element = (IWebElement)
((IJavaScriptExecutor)driver).ExecuteScript("return $('.cheese')[0]");

Python     -  element = driver.execute_script("return $('.cheese')[0]");
Ruby       -  element = driver.execute_script("return $('.cheese')[0]")
JavaScript/Protractor -

请注意：如果你的特定 WebDriver 不支持 JavaScript，则此方法将不起作用，例如 SimpleBrowser 。