尋找網頁元素

根據提供的定位器值定位元素。

使用 Selenium 最基本的一個方面是取得元素參考以進行操作。Selenium 提供了許多內建的定位器策略來唯一識別元素。在非常進階的場景中，有很多方法可以使用定位器。為了本文檔的目的，讓我們考慮以下 HTML 片段

<ol id="vegetables">
 <li class="potatoes">…
 <li class="onions">…
 <li class="tomatoes"><span>Tomato is a Vegetable</span>…
</ol>
<ul id="fruits">
  <li class="bananas">…
  <li class="apples">…
  <li class="tomatoes"><span>Tomato is a Fruit</span>…
</ul>

第一個匹配的元素

許多定位器將匹配頁面上的多個元素。單數的 find element 方法將返回給定上下文中找到的第一個元素的參考。

評估整個 DOM

當在驅動程式實例上調用 find element 方法時，它會返回 DOM 中與提供的定位器匹配的第一個元素的參考。此值可以儲存並用於未來的元素操作。在我們上面的 HTML 範例中，有兩個元素的類別名稱為“tomatoes”，因此此方法將返回“vegetables”列表中的元素。

移動程式碼

WebElement vegetable = driver.findElement(By.className("tomatoes"));
  
vegetable = driver.find_element(By.CLASS_NAME, "tomatoes")
  
var vegetable = driver.FindElement(By.ClassName("tomatoes"));
  
      fruits = driver.find_element(id: 'fruits')
      fruit = fruits.find_element(class: 'tomatoes')
在 GitHub 上查看完整範例
const vegetable = await driver.findElement(By.className('tomatoes'));
  

val vegetable: WebElement = driver.findElement(By.className("tomatoes"))

評估 DOM 的子集

與其在整個 DOM 中尋找唯一的定位器，不如將搜尋範圍縮小到另一個已定位元素的範圍內通常更有用。在上面的範例中，有兩個類別名稱為“tomatoes”的元素，要取得第二個元素的參考稍微具有挑戰性。

一種解決方案是定位具有唯一屬性的元素，該屬性是所需元素的祖先，而不是不需要元素的祖先，然後在該物件上調用 find element

移動程式碼

WebElement fruits = driver.findElement(By.id("fruits"));
WebElement fruit = fruits.findElement(By.className("tomatoes"));
  
fruits = driver.find_element(By.ID, "fruits")
fruit = fruits.find_element(By.CLASS_NAME,"tomatoes")
  
IWebElement fruits = driver.FindElement(By.Id("fruits"));
IWebElement fruit = fruits.FindElement(By.ClassName("tomatoes"));
  
      fruits = driver.find_element(id: 'fruits')
      fruit = fruits.find_element(class: 'tomatoes')
在 GitHub 上查看完整範例
const fruits = await driver.findElement(By.id('fruits'));
const fruit = fruits.findElement(By.className('tomatoes'));
  

val fruits = driver.findElement(By.id("fruits"))
val fruit = fruits.findElement(By.className("tomatoes"))

Java 和 C#
WebDriver、WebElement 和 ShadowRoot 類別都實作了 SearchContext 介面，該介面被視為基於角色的介面。基於角色的介面允許您確定特定的驅動程式實作是否支援給定的功能。這些介面定義清晰，並盡力堅持僅具有單一責任角色。

評估 Shadow DOM

Shadow DOM 是一個封裝的 DOM 樹，隱藏在元素內部。隨著 Chromium 瀏覽器 v96 的發布，Selenium 現在可以讓您使用易於使用的 shadow root 方法存取此樹狀結構。注意：這些方法需要 Selenium 4.0 或更高版本。

移動程式碼

WebElement shadowHost = driver.findElement(By.cssSelector("#shadow_host"));
SearchContext shadowRoot = shadowHost.getShadowRoot();
WebElement shadowContent = shadowRoot.findElement(By.cssSelector("#shadow_content"));
shadow_host = driver.find_element(By.CSS_SELECTOR, '#shadow_host')
shadow_root = shadow_host.shadow_root
shadow_content = shadow_root.find_element(By.CSS_SELECTOR, '#shadow_content')
var shadowHost = _driver.FindElement(By.CssSelector("#shadow_host"));
var shadowRoot = shadowHost.GetShadowRoot();
var shadowContent = shadowRoot.FindElement(By.CssSelector("#shadow_content"));
shadow_host = @driver.find_element(css: '#shadow_host')
shadow_root = shadow_host.shadow_root
shadow_content = shadow_root.find_element(css: '#shadow_content')

新增範例

新增範例

最佳化定位器

巢狀查找可能不是最有效的定位策略，因為它需要向瀏覽器發出兩個單獨的命令。

為了稍微提高效能，我們可以使用 CSS 或 XPath 在單個命令中找到此元素。請參閱我們建議的測試實務部分中的定位器策略建議。

對於此範例，我們將使用 CSS 選擇器

移動程式碼

WebElement fruit = driver.findElement(By.cssSelector("#fruits .tomatoes"));
  
fruit = driver.find_element(By.CSS_SELECTOR,"#fruits .tomatoes")
  
var fruit = driver.FindElement(By.CssSelector("#fruits .tomatoes"));
  
      fruit = driver.find_element(css: '#fruits .tomatoes')
在 GitHub 上查看完整範例
const fruit = await driver.findElement(By.css('#fruits .tomatoes'));
  

val fruit = driver.findElement(By.cssSelector("#fruits .tomatoes"))

所有匹配的元素

在許多使用案例中，需要取得與定位器匹配的所有元素的參考，而不僅僅是第一個元素。複數的 find elements 方法返回元素參考的集合。如果沒有匹配項，則返回空列表。在這種情況下，所有水果和蔬菜列表項目的參考將在集合中返回。

移動程式碼

List<WebElement> plants = driver.findElements(By.tagName("li"));
  
plants = driver.find_elements(By.TAG_NAME, "li")
  
IReadOnlyList<IWebElement> plants = driver.FindElements(By.TagName("li"));
  
      plants = driver.find_elements(tag_name: 'li')
在 GitHub 上查看完整範例
const plants = await driver.findElements(By.tagName('li'));
  

val plants: List<WebElement> = driver.findElements(By.tagName("li"))

取得元素

通常，您會取得元素集合，但想要使用特定元素，這意味著您需要迭代集合並識別您想要的元素。

移動程式碼

List<WebElement> elements = driver.findElements(By.tagName("li"));

for (WebElement element : elements) {
    System.out.println("Paragraph text:" + element.getText());
}
  
from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Firefox()

    # Navigate to Url
driver.get("https://www.example.com")

    # Get all the elements available with tag name 'p'
elements = driver.find_elements(By.TAG_NAME, 'p')

for e in elements:
    print(e.text)
  
using OpenQA.Selenium;
using OpenQA.Selenium.Firefox;
using System.Collections.Generic;

namespace FindElementsExample {
 class FindElementsExample {
  public static void Main(string[] args) {
   IWebDriver driver = new FirefoxDriver();
   try {
    // Navigate to Url
    driver.Navigate().GoToUrl("https://example.com");

    // Get all the elements available with tag name 'p'
    IList < IWebElement > elements = driver.FindElements(By.TagName("p"));
    foreach(IWebElement e in elements) {
     System.Console.WriteLine(e.Text);
    }

   } finally {
    driver.Quit();
   }
  }
 }
}
  
      elements = driver.find_elements(:tag_name,'p')
         elements.each { |e| puts e.text }
在 GitHub 上查看完整範例
const {Builder, By} = require('selenium-webdriver');
(async function example() {
    let driver = await new Builder().forBrowser('firefox').build();
    try {
        // Navigate to Url
        await driver.get('https://www.example.com');

        // Get all the elements available with tag 'p'
        let elements = await driver.findElements(By.css('p'));
        for(let e of elements) {
            console.log(await e.getText());
        }
    }
    finally {
        await driver.quit();
    }
})();
  

import org.openqa.selenium.By
import org.openqa.selenium.firefox.FirefoxDriver

fun main() {
    val driver = FirefoxDriver()
    try {
        driver.get("https://example.com")
        // Get all the elements available with tag name 'p'
        val elements = driver.findElements(By.tagName("p"))
        for (element in elements) {
            println("Paragraph text:" + element.text)
        }
    } finally {
        driver.quit()
    }
}

從元素中尋找元素

它用於在父元素上下文中尋找匹配的子 WebElement 列表。為了實現這一點，父 WebElement 與 'findElements' 鏈接以存取子元素

移動程式碼

  import org.openqa.selenium.By;
  import org.openqa.selenium.WebDriver;
  import org.openqa.selenium.WebElement;
  import org.openqa.selenium.chrome.ChromeDriver;
  import java.util.List;

  public class findElementsFromElement {
      public static void main(String[] args) {
          WebDriver driver = new ChromeDriver();
          try {
              driver.get("https://example.com");

              // Get element with tag name 'div'
              WebElement element = driver.findElement(By.tagName("div"));

              // Get all the elements available with tag name 'p'
              List<WebElement> elements = element.findElements(By.tagName("p"));
              for (WebElement e : elements) {
                  System.out.println(e.getText());
              }
          } finally {
              driver.quit();
          }
      }
  }
  
from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("https://www.example.com")
##get elements from parent element using TAG_NAME

    # Get element with tag name 'div'
element = driver.find_element(By.TAG_NAME, 'div')

    # Get all the elements available with tag name 'p'
elements = element.find_elements(By.TAG_NAME, 'p')
for e in elements:
    print(e.text)

##get elements from parent element using XPATH
##NOTE: in order to utilize XPATH from current element, you must add "." to beginning of path

    # Get first element of tag 'ul'
element = driver.find_element(By.XPATH, '//ul')

    # get children of tag 'ul' with tag 'li'
elements  = driver.find_elements(By.XPATH, './/li')
for e in elements:
    print(e.text)
  
using OpenQA.Selenium;
using OpenQA.Selenium.Chrome;
using System.Collections.Generic;

namespace FindElementsFromElement {
 class FindElementsFromElement {
  public static void Main(string[] args) {
   IWebDriver driver = new ChromeDriver();
   try {
    driver.Navigate().GoToUrl("https://example.com");

    // Get element with tag name 'div'
    IWebElement element = driver.FindElement(By.TagName("div"));

    // Get all the elements available with tag name 'p'
    IList < IWebElement > elements = element.FindElements(By.TagName("p"));
    foreach(IWebElement e in elements) {
     System.Console.WriteLine(e.Text);
    }
   } finally {
    driver.Quit();
   }
  }
 }
}
  
      element = driver.find_element(:tag_name,'div')
         elements = element.find_elements(:tag_name,'p')
         elements.each { |e| puts e.text }
在 GitHub 上查看完整範例
  const {Builder, By} = require('selenium-webdriver');

  (async function example() {
      let driver = new Builder()
          .forBrowser('chrome')
          .build();

      await driver.get('https://www.example.com');

      // Get element with tag name 'div'
      let element = driver.findElement(By.css("div"));

      // Get all the elements available with tag name 'p'
      let elements = await element.findElements(By.css("p"));
      for(let e of elements) {
          console.log(await e.getText());
      }
  })();
  

  import org.openqa.selenium.By
  import org.openqa.selenium.chrome.ChromeDriver

  fun main() {
      val driver = ChromeDriver()
      try {
          driver.get("https://example.com")

          // Get element with tag name 'div'
          val element = driver.findElement(By.tagName("div"))

          // Get all the elements available with tag name 'p'
          val elements = element.findElements(By.tagName("p"))
          for (e in elements) {
              println(e.text)
          }
      } finally {
          driver.quit()
      }
  }

取得作用中元素

它用於追蹤（或）尋找在目前瀏覽上下文中具有焦點的 DOM 元素。

移動程式碼

  import org.openqa.selenium.*;
  import org.openqa.selenium.chrome.ChromeDriver;

  public class activeElementTest {
    public static void main(String[] args) {
      WebDriver driver = new ChromeDriver();
      try {
        driver.get("http://www.google.com");
        driver.findElement(By.cssSelector("[name='q']")).sendKeys("webElement");

        // Get attribute of current active element
        String attr = driver.switchTo().activeElement().getAttribute("title");
        System.out.println(attr);
      } finally {
        driver.quit();
      }
    }
  }
  
  from selenium import webdriver
  from selenium.webdriver.common.by import By

  driver = webdriver.Chrome()
  driver.get("https://www.google.com")
  driver.find_element(By.CSS_SELECTOR, '[name="q"]').send_keys("webElement")

    # Get attribute of current active element
  attr = driver.switch_to.active_element.get_attribute("title")
  print(attr)
  
    using OpenQA.Selenium;
    using OpenQA.Selenium.Chrome;

    namespace ActiveElement {
     class ActiveElement {
      public static void Main(string[] args) {
       IWebDriver driver = new ChromeDriver();
       try {
        // Navigate to Url
        driver.Navigate().GoToUrl("https://www.google.com");
        driver.FindElement(By.CssSelector("[name='q']")).SendKeys("webElement");

        // Get attribute of current active element
        string attr = driver.SwitchTo().ActiveElement().GetAttribute("title");
        System.Console.WriteLine(attr);
       } finally {
        driver.Quit();
       }
      }
     }
    }
  
      driver.find_element(css: '[name="q"]').send_keys('webElement')
        attr = driver.switch_to.active_element.attribute('title')
在 GitHub 上查看完整範例
  const {Builder, By} = require('selenium-webdriver');

  (async function example() {
      let driver = await new Builder().forBrowser('chrome').build();
      await driver.get('https://www.google.com');
      await  driver.findElement(By.css('[name="q"]')).sendKeys("webElement");

      // Get attribute of current active element
      let attr = await driver.switchTo().activeElement().getAttribute("title");
      console.log(`${attr}`)
  })();
  

  import org.openqa.selenium.By
  import org.openqa.selenium.chrome.ChromeDriver

  fun main() {
      val driver = ChromeDriver()
      try {
          driver.get("https://www.google.com")
          driver.findElement(By.cssSelector("[name='q']")).sendKeys("webElement")

          // Get attribute of current active element
          val attr = driver.switchTo().activeElement().getAttribute("title")
          print(attr)
      } finally {
          driver.quit()
      }
  }
上次修改時間：2024 年 8 月 27 日：新增徽章程式碼並修復 ruby 程式碼範例 (#1897)[部署網站] (eab7aad3b9d)