使用 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 。