Encontrando Elementos Web

Localizando elementos com base nos valores providenciados pelo localizador.

Um dos aspectos mais fundamentais do uso do Selenium é obter referências de elementos para trabalhar. O Selenium oferece várias estratégias de localizador para identificar exclusivamente um elemento. Há muitas maneiras de usar os localizadores em cenários complexos. Para os propósitos desta documentação, use a página de teste de localizadores do Selenium.

Primeiro Elemento correspondente

Muitos localizadores irão corresponder a vários elementos na página. O método de elemento de localização singular retornará uma referência ao primeiro elemento encontrado dentro de um determinado contexto.

Avaliando o DOM inteiro

Quando o metodo find element é chamado na instância do driver, ele retorna uma referência ao primeiro elemento no DOM que corresponde ao localizador fornecido. Esse valor pode ser guardado e usado para ações futuras do elemento. Na página de teste de localizadores do Selenium, existem dois elementos com o nome de classe information, então este método retorna o primeiro campo de texto.

    driver.get(LOCATORS_PAGE);
      WebElement firstInput = driver.findElement(By.className("information"));
# same examples are shown for the other language bindings:
  #
            driver.Url = LocatorsPage;
              IWebElement firstInput = driver.FindElement(By.ClassName("information"));
      driver.find_element(class: 'tomatoes')
    end
    await driver.get(LOCATORS_PAGE);
      const firstInput = await driver.findElement(By.className('information'));
        driver.get(locatorsPage)
          val firstInput = driver.findElement(By.className("information"))

Avaliando um subconjunto do DOM

Ao em vez de tentar encontrar um localizador unico no DOM inteiro, normalmente é útil restringir a busca ao escopo de outro elemento já localizado.

Uma possível solução seria localizar um ancestral do elemento desejado, então invoque o find element nesse objeto:

    driver.get(LOCATORS_PAGE);
      WebElement form = driver.findElement(By.tagName("form"));
      WebElement input = form.findElement(By.className("information"));
# <ul id="fruits">
  #   <li class="bananas">…
  #   <li class="apples">…
            driver.Url = LocatorsPage;
              IWebElement form = driver.FindElement(By.TagName("form"));
              IWebElement input = form.FindElement(By.ClassName("information"));

    it 'uses an optimized locator' do
      driver.find_element(css: '#fruits .tomatoes')
    await driver.get(LOCATORS_PAGE);
      const form = await driver.findElement(By.tagName('form'));
      const input = await form.findElement(By.className('information'));
        driver.get(locatorsPage)
          val form = driver.findElement(By.tagName("form"))
          val input = form.findElement(By.className("information"))

Java e C#
As classes WebDriver, WebElement e ShadowRoot todas implementam o SearchContext interface, que é considerada uma role-based interface(interface baseada em função). As interfaces baseadas em função permitem determinar se uma determinada implementação de driver suporta um recurso específico. Essas interfaces são claramente definidas e tentam aderir a ter apenas um único papel de responsabilidade.

Evaluating the Shadow DOM

The Shadow DOM is an encapsulated DOM tree hidden inside an element. With the release of v96 in Chromium Browsers, Selenium can now allow you to access this tree with easy-to-use shadow root methods. NOTE: These methods require Selenium 4.0 or greater.

Move Code

WebElement shadowHost = driver.findElement(By.cssSelector("#shadow_host"));
SearchContext shadowRoot = shadowHost.getShadowRoot();
WebElement shadowContent = shadowRoot.findElement(By.cssSelector("#shadow_content"));
    plants = driver.find_elements(By.TAG_NAME, 'li')


def test_evaluating_shadow_dom():
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')

Add Example

Add Example

Localizador otimizado

Uma pesquisa aninhada pode não ser a estratégia de localização mais eficaz, pois requer dois comandos separados a serem emitidos para o navegador.

Para melhorar um pouco o desempenho, podemos usar CSS ou XPath para encontrar esse elemento com um único comando. Veja as sugestões de estratégia do localizador na nossa sessão de Práticas de teste incentivadas.

Para esse exemplo, utilizaremos um seletor CSS:

    driver.get(LOCATORS_PAGE);
      WebElement input = driver.findElement(By.cssSelector("form .information"));
def test_basic_finders(driver):
      vegetable = driver.find_element(By.CLASS_NAME, 'tomatoes')
            driver.Url = LocatorsPage;
              IWebElement input = driver.FindElement(By.CssSelector("form .information"));

    # rubocop:disable RSpec/Output
    await driver.get(LOCATORS_PAGE);
      const input = await driver.findElement(By.css('form .information'));
        driver.get(locatorsPage)
          val input = driver.findElement(By.cssSelector("form .information"))

Todos os elementos correspondentes

Existem vários casos de uso para a necessidade de obter referências a todos os elementos que correspondem a um localizador, em vez do que apenas o primeiro. Os métodos plurais find elements retornam uma coleção de referências de elementos. Se não houver correspondências, uma lista vazia será retornada. Nesse caso, referências a todos os elementos input serão devolvidas em uma coleção.

    driver.get(LOCATORS_PAGE);
      List<WebElement> inputs = driver.findElements(By.tagName("input"));
    fruit = fruits.find_element(By.CLASS_NAME, 'tomatoes')
  
            driver.Url = LocatorsPage;
              var inputs = driver.FindElements(By.TagName("input"));
    it 'finds element from element' do
      element = driver.find_element(:tag_name, 'div')
    await driver.get(LOCATORS_PAGE);
      const inputs = await driver.findElements(By.tagName('input'));
        driver.get(locatorsPage)
          val inputs = driver.findElements(By.tagName("input"))

Obter Elemento

Muitas vezes você obterá uma coleção de elementos, mas quer trabalhar apenas com um elemento específico, o que significa que você precisa iterar sobre a coleção e identificar o que você deseja.

    List<WebElement> elements = driver.findElements(By.tagName("p"));
      for (WebElement element : elements) {
        System.out.println("Paragraph text:" + element.getText());
      }

      assert shadow_host.is_displayed()
      assert shadow_content.is_displayed()
            var elements = driver.FindElements(By.TagName("p"));
              foreach (var element in elements)
              {
                  System.Console.WriteLine("Paragraph text:" + element.Text);
              }
      driver.find_element(css: '[name="q"]').send_keys('webElement')
         driver.switch_to.active_element.attribute('title')
       end
    const elements = await driver.findElements(By.tagName('p'));
      for (const element of elements) {
        console.log('Paragraph text:' + await element.getText());
      }
        val elements = driver.findElements(By.tagName("p"))
          for (element in elements) {
              println("Paragraph text:" + element.text)
          }

Localizar Elementos em um Elemento

Ele é usado para localizar a lista de WebElements filhos correspondentes dentro do contexto do elemento pai. Para realizar isso, o WebElement pai é encadeado com o ‘findElements’ para acessar seus elementos filhos.

    WebElement form = driver.findElement(By.tagName("form"));
      List<WebElement> elements = form.findElements(By.tagName("input"));
      for (WebElement e : elements) {
        System.out.println(e.getAttribute("value"));
      }

      elements = driver.find_elements(By.TAG_NAME, 'p')
      for element in elements:
          print(element.text)
            IWebElement form = driver.FindElement(By.TagName("form"));
              var elements = form.FindElements(By.TagName("input"));
              foreach (var e in elements)
              {
                  System.Console.WriteLine(e.GetAttribute("value"));
              }
    const form = await driver.findElement(By.css('form'));
      const elements = await form.findElements(By.css('input'));
      for (const e of elements) {
        console.log(await e.getAttribute('value'));
      }
        val form = driver.findElement(By.tagName("form"))
          val elements = form.findElements(By.tagName("input"))
          for (e in elements) {
              println(e.getAttribute("value"))
          }

Obter elemento ativo

Ele é usado para rastrear (ou) encontrar um elemento DOM que tem o foco no contexto de navegação atual.

    driver.findElement(By.cssSelector("#fname")).sendKeys("webElement");
      String attr = driver.switchTo().activeElement().getAttribute("name");
    driver = webdriver.Chrome()
      driver.get('https://www.example.com')
            driver.FindElement(By.CssSelector("#fname")).SendKeys("webElement");
              string attr = driver.SwitchTo().ActiveElement().GetAttribute("name");
    await driver.findElement(By.css('#fname')).sendKeys('webElement');
      const attr = await driver.switchTo().activeElement().getAttribute('name');
        driver.findElement(By.cssSelector("#fname")).sendKeys("webElement")
          val attr = driver.switchTo().activeElement().getAttribute("name")
Última modificação September 3, 2026: Use hosted locator test page for Finders examples (#2800) (11254076f3)