O que é DOM em Selenium WebDriver? Estrutura e Forma Completa

Por: Krishna Degrau Krishna Degrau
Hours Atualização do

⚡ Resumo Inteligente

O Modelo de Objeto de Documento expõe uma página HTML para JavaScript como uma árvore de objetos, permitindo que scripts e Selenium O WebDriver lê, localiza e modifica qualquer elemento da página enquanto o navegador está em execução.

  • 🔘 Formulário completo: DOM significa Document Object Model (Modelo de Objeto de Documento), uma interface padronizada pela W3C para documentos HTML e XML.
  • ☑️ Estrutura da árvore: Cada tag se torna um nó, de modo que html, head, body, article e p formam uma hierarquia pai-filho.
  • ✅ Três objetos: A janela envolve a aba, o documento marca a raiz da árvore e o elemento representa cada tag individual.
  • 🧪 Métodos principais: getElementById, querySelector e querySelectorAll recuperam nós; innerHTML lê e reescreve o conteúdo deles.
  • 🛠️ Depuração: As ferramentas de desenvolvedor do navegador expõem a árvore analisada, e as edições feitas ali duram apenas até a página ser recarregada.
  • 📊 Eventos: Ações como clicar e carregar mensagens de transmissão que os atributos onclick ou addEventListener podem interceptar.
Saiba Mais

O que é DOM em Selenium Estrutura e forma completa do WebDriver

O que é DOM em Selenium WebDriver?

DOM in Selenium WebDriver é um componente essencial do desenvolvimento web usando HTML5 e JavaScript. A forma completa de DOM é Document Object Model. DOM não é um conceito de ciência da computação. É um conjunto simples de interfaces padronizadas entre desenvolvedores web para acessar e manipular documentos em HTML ou XML usando JavaRoteiro.

Esses padrões ajudam os desenvolvedores a construir uma página da web sem se preocupar com detalhes de implementação. Algumas das organizações envolvidas na padronização dessas interfaces são como Mozilla, Apple, Microsoft, Google, Adobe etc. No entanto, é o W3C que formaliza um padrão e o publica – veja aqui (https://dom.spec.whatwg.org/).

As seções abaixo abordam a estrutura do documento, os objetos que o DOM expõe e como inspecioná-los. A Mozilla mantém a referência da API atualizada em Páginas do Modelo de Objeto de Documento (DOM) do MDN.

Cada Selenium O localizador resolve em relação a essa mesma árvore, portanto a estrutura abaixo é o que encontrarElemento() pesquisas.

Compreendendo a estrutura do DOM

Você precisará entender a estrutura do DOM se estiver construindo qualquer site que envolva scripts usando JavaScript. Entender o DOM é ainda mais crítico se você estiver fazendo qualquer uma ou todas as seguintes tarefas complicadas em seu site –

  1. Developing Conteúdo que se atualiza continuamente sem precisar recarregar a página inteira — como o preço atual de todas as ações na carteira do usuário.
  2. Developing Interações avançadas do usuário, como adicionar ou modificar conteúdo dinamicamente – como a capacidade de adicionar mais ações à sua carteira.
  3. Developing Conteúdo personalizável pelo usuário – como a possibilidade de alterar o layout para que a carteira de fundos mútuos apareça antes da carteira de ações.
  4. Developing Conteúdo responsivo em seu site, permitindo que ele se adapte automaticamente a diferentes telas, como iPhone, desktop, tablet etc.

Uma página HTML básica

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
         <head>
            <title>my page title</title>
          </head>
<body>
         <article>
                  <p>
                         my first article
                   </p>
         </article>
        <aside>side bar content</aside>
</body>
</html>

Qual é a aparência do DOM PARSER de um navegador?

html    >     head    >    title
    >    body    >    aside
            >    article    >    p

Como você acessa o elemento body?

<script>
    var body = window.document.body;
</script>

Como se diz “Olá, mundo”?

<script>
    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>

Finalmente, todo o arquivo HTML ficará assim

Abra Windows Notepad e cole o seguinte conteúdo dentro dele. Então salve o arquivo como “MyFileNewFile.html” (certifique-se de que o nome do seu arquivo termine com .html).

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<article><p>my first article</p></article>
<aside>side bar content</aside>
<script>

    var body = document.querySelector("body > article > p").innerHTML = "Hello World!";
			</script>
</body>
</html>

Por fim, basta abrir o arquivo usando qualquer um de seus navegadores preferidos e você verá “Hello World!”

Componentes do DOM em Selenium

Abaixo estão os principais componentes do DOM. Selenium WebDriver:

  • Janela
  • ISO
  • Element

Cada componente está localizado em um nível diferente da árvore, começando pelo mais externo.

Janela

Janela é o objeto que contém o objeto de documento em um DOM. Fica em cima de tudo.

Para chegar a um objeto de janela de um determinado documento

<script>
      var window = document.defaultView;
</script>

Em um ambiente com guias, cada guia possui seu próprio objeto de janela. No entanto, se alguém quiser capturar e implementar eventos como window.resizeTo e window.resizeBy, eles se aplicam à janela inteira e não apenas à guia.

Propriedades do objeto Window no DOM

janela.localStorage – dá acesso ao armazenamento local do navegador. O armazenamento local pode ser usado para armazenar e recuperar dados de uma sessão.

<script>
    window.localStorage.setItem('name','xyz');
	var name = window.localStorage.getItem('name');
</script>

window.opener - obtém a referência ao objeto window que abriu esta janela (clicando em um link ou usando o método window.open)

Métodos úteis de objeto de janela

janela.alert() – exibe uma caixa de diálogo de alerta com uma mensagem.

<script>
		window.alert('say hello');
</script>

Existem muitos eventos úteis que o objeto de janela expõe. Iremos discuti-los na seção “Eventos” em Tópicos Avançados

ARTIGOS RELACIONADOS

ISO

O documento marca o início de uma árvore DOM. O documento é o primeiro nó em um DOM. Ele possui diversos métodos e propriedades, cujo escopo se aplica a todo o documento, como por exemplo: URL, getElementById, querySelector etc.

Propriedades do objeto de documento no DOM

Documento.documentURI e Documento.URL – Ambos retornam a localização atual do documento. No entanto, se o documento não for do tipo Documento HTML.URL não funciona.

Documento.activeElement – Este método retorna o elemento no DOM que está em foco. Isso significa que, se um usuário estiver digitandoping Em uma caixa de texto, Document.activeElement retornará uma referência a essa caixa de texto.

Título do documento – Isto é usado para ler ou definir um título de um determinado documento.

Métodos úteis de objeto de documento

Documento.getElementById (ID da string) – Este é, de longe, o método mais relevante e útil na manipulação do DOM. Ele é usado para localizar um elemento na árvore DOM. usando seu identificador únicoA pesquisa diferencia maiúsculas de minúsculas, ou seja, no exemplo a seguir, o “ O elemento "" não pode ser pesquisado usando palavras como IntroDiv, introdiv ou iNtrodiv, etc.

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head></head>
<body>
<div id='introDiv'></div>
<script>
		var label = Document.getElementById('introDiv');
		label.setInnerHTML('say hello again');
	</script>
</body>
</html>

Document.querySelectorAll (seletor de string) – este é outro método amplamente utilizado para selecionar um ou mais elementos com base em regras do seletor CSS (Se você estiver familiarizado com a notação $ do jQuery, ela própria usa esse método). Não nos aprofundaremos muito em seletores CSS. Um seletor CSS é um conjunto de regras que permite obter uma lista de elementos semelhantes (com base na regra do seletor). Já usamos esse método anteriormente na seção "Olá, Mundo".

Element

O diagrama abaixo mostra como um objeto Element se posiciona dentro da árvore DOM, abaixo do nó do documento.

Objeto Elemento exibido como um nó dentro da hierarquia da árvore DOM.

Objeto Elemento no DOM

Um elemento é qualquer objeto representado por um nó na árvore DOM de um documento. Como sempre, o objeto Elemento em si é apenas um contexto.tracA comunicação entre um navegador e um documento HTML envolve propriedades, métodos e eventos. Existem tipos especiais de elementos, como HTMLElement, SVGElement, XULElement, etc. Neste tutorial, focaremos apenas no HTMLElement.

Propriedades do objeto elemento no DOM

Elemento.id – Esta propriedade pode ser usada para definir ou ler “ID” (um identificador exclusivo) para um elemento HTML. O ID deve ser único entre os elementos de uma árvore DOM. Conforme mencionado antes, o ID também é usado pelo método Document.getElementById para selecionar um objeto Element específico em uma árvore DOM.

HTMLElement.contentEditável – propriedade contentEditable de um elemento determina se o conteúdo desse elemento é editável/modificável. Esta propriedade pode ser definida conforme mostrado no script abaixo. Esta propriedade também pode ser usada para determinar se um determinado elemento é editável ou não. Experimente o seguinte script dentro de qualquer corpo HTML e você notará que pode editar qualquer conteúdo do corpo.

<script>
		document.body.contentEditable = true;
</script>

Elemento.innerHTML – innerHTML é outra propriedade importante que usamos para acessar o conteúdo HTML dentro de um elemento. Também é usado para definir o novo conteúdo HTML do elemento. É amplamente utilizado para definir/alterar o conteúdo dos campos de dados. Digamos, por exemplo, que você queira que sua página atualize a temperatura da cidade de Mumbai a cada hora. Você pode executar o script no exemplo a seguir a cada hora.

<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>my page title</title>
</head>
<body>
<section>
<h1>Mumbai</h1>
<h2>Temperature</h2>
<span id='tempValue'></span><sup>o</sup>C
</section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
			</script>
</body>
</html>

Métodos úteis de objeto elemento

HTMLElement.blur() & HTMLElement.focus() – os métodos de desfoque e foco são usados ​​para remover ou dar foco a um elemento HTML, respectivamente. Esses métodos são mais amplamente usados ​​para mover o foco de um cursor entre caixas de texto em uma página da Web de entrada de dados.

Elemento.querySelectorAll – Este método é semelhante ao método querySelector já discutido para o objeto de documento. Este método, entretanto, limitará sua pesquisa nos descendentes do próprio elemento.

Nota sobre a precisão: O bloco acima foi reproduzido conforme publicado. O código em funcionamento utiliza documento com um d minúsculo e o HTML interno propriedade, não setInnerHTML().

Depuração no DOM

Ferramentas de desenvolvedor de Google Chrome, Mozila Firefox, Internet Explorer (10 ou superior) ou Safari permitem fácil depuração diretamente no navegador. Às vezes, navegadores diferentes interpretam a mesma marcação HTML de maneira diferente e é aí que a depuração ajuda a inspecionar o DOM conforme foi interpretado pelo mecanismo DOM daquele navegador específico.

Nota do navegador: O Internet Explorer foi descontinuado em 2022, portanto, suas Ferramentas de Desenvolvedor agora residem em Microsoft EdgeOs passos abaixo permanecem inalterados; as Ferramentas de Desenvolvedor abrem com F12.

Agora, digamos que você queira alterar o valor da temperatura de 26oC a 32oC no seu último exemplo. Seguiremos alguns passos simples para fazer isso. As capturas de tela mostradas aqui são do Mozilla Firefox– no entanto, as etapas são as mesmas em todos os outros navegadores.

  1. Abra MyFileNewFile.html (ou qualquer nome que você deu ao seu arquivo HTML nos tutoriais acima) usando seu navegador
  2. Use o mouse e clique com o botão direito no valor da temperatura 26oC e clique em “Inspecionar Elemento”

    Clicar com o botão direito do mouse no valor da temperatura e escolher "Inspecionar elemento" no navegador.

  3. Observe que o elemento onde você escolheu “Inspecionar Elemento” é mostrado em destaque no seu navegador (a janela do depurador geralmente aparece na parte inferior da tela)

    Ferramentas de desenvolvedor do navegador destacando o elemento span inspecionado na árvore DOM.

  4. Abra o elemento clicando no triângulo inclinado ao lado dele

    Expandindo o elemento span no inspetor DOM usando a opção de triângulo.

  5. Selecione o que você gostaria de editar e clique duas vezes nele. Você terá a opção de alterar o texto. Faça conforme as instruções na imagem animada abaixo.

    Demonstração animada da edição do valor de texto DOM de 26 para 32 no inspetor.

  6. Observe a mudança no conteúdo da sua página HTML. Você pode fechar a janela de depuração agora.

    Observe que suas alterações serão mantidas apenas nesta sessão. Assim que você recarregar ou atualizar (pressione F5) a página, as alterações serão revertidas. Isso indica que você não alterou a fonte HTML real, mas apenas a interpretação local do seu navegador.

    Como um exercício divertido, tente fazer o seguinte. Abrir www.facebook.com no seu navegador e use a ferramenta de depuração para acompanhar o resultado – observe como diz “Eu hackeei o Facebook”.

O resultado desse exercício é semelhante à captura de tela abaixo.

A página do Facebook foi editada ao vivo no inspetor do navegador para exibir a mensagem "Eu hackeei o Facebook".

A leitura e edição de nós abrangem páginas estáticas. Páginas interativas também reagem às ações do usuário.

Eventos DOM

O que são eventos no DOM?

Eventos são um modelo de programação em que incidentes acionados pelo usuário (ou acionados pelo ciclo de vida da página do navegador) são transmitidos como mensagens. Por exemplo, quando uma página termina de carregar, ela aciona o evento window.load e da mesma forma quando o usuário clica em um botão que o evento de clique do elemento é acionado.

Estas mensagens podem ser interceptadas por qualquer JavaScript código e depois um ação definida pelo desenvolvedor pode ser utilizado. Digamos, por exemplo, que você queira que os números em sua página da web sejam atualizados somente quando o usuário clicar em um botão. Você pode conseguir isso por qualquer um dos seguintes métodos:

  1. Atribuir ação ao evento onclick do elemento HTML
  2. Atribuir ação ao evento click usando o método addEventListener

Método 1

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button onclick='onRefreshClick()'>Refresh</button>
    </section>
<script>
    	document.getElementById('tempValue').innerHTML = '26';

 function onRefreshClick(e) {
   document.getElementById('tempValue').innerHTML = '32';
}
			</script>
</body>
</html>

Método 2

<!DOCTYPE html>
<html>
<head>
    <title>my page title</title>
</head>
<body>
    <section>
        <h1>Mumbai<h1>
        <h2>Temperature</h2>
        <span id='tempValue'></span><sup>o</sup>C
        <br/>
        <br/>
        <button id='btnRefresh'>Refresh</button>
    </section>
<script>
    document.getElementById('tempValue').innerHTML = '26';
    document.getElementById('btnRefresh').addEventListener('click', function(event) {
    document.getElementById('tempValue').innerHTML = '32' },false);
			</script>
</body>
</html>

Solução de problemas no DOM

Nota sobre a API legada: As duas respostas abaixo usam document.write(). Ele ainda é executado, mas uma chamada após o carregamento da página apaga o documento. Prefira console.log() ou innerHTML.

P. Como posso saber se um elemento existe ou não?

A. Tente procurar o elemento usando qualquer seletor e verifique se o elemento retornado é nulo. Veja o exemplo abaixo –

if(document.getElementById("elementIDWhichIsNotPresentInDOM") === null)
{
    //do something
}

P. Recebo TypeError: document.getElementByID não é uma função…

A. Certifique-se de que o nome do método corresponda exatamente ao método API. Como na pergunta acima – é getElementById e não getElementByID.

P. Qual é a diferença entre filhos e childNodes?

A. O método children nos fornece a coleção de todos os elementos dentro do elemento de chamada. A coleção retornada é do tipo HTMLCollection. No entanto, o método childNodes nos fornece a coleção de todos os nós dentro do elemento de chamada. Adicione os seguintes scripts ao nosso exemplo e veja a diferença –

O método childNodes retorna 14 itens

document.write("Using childNodes method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].childNodes.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].childNodes[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].childNodes.length);

Embora o método kids retorne apenas 7 itens

document.write("Using children method")
document.write("<br>");
document.write("<br>");
for(i=0;i<document.getElementsByTagName("section")[0].children.length;i++)
{
    document.write((i+1)+".");
    document.write(document.getElementsByTagName("section")[0].children[i].toString());
    document.write("<br>");
}
document.write("<br>");
document.write("Number of nodes in a section " + document.getElementsByTagName("section")[0].children.length);

P. Recebo TypeError não capturado: não é possível ler a propriedade 'innerHTML' de indefinido…

A. Certifique-se de que a instância de HTMLElement na qual você está chamando a propriedade innerHTML foi definida após a declaração inicial. Este erro geralmente ocorre no cenário a seguir. Veja como o erro pode ser evitado no próximo bloco de código…

var element;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
element.innerHTML = '32';

var element = null;
if(false) //say condition was false
{
    element = document.getElementById('tempValue1');
}
if(element != null)
{
    element.innerHTML = '32';
}

Perguntas Frequentes

Shadow DOM é um recurso do navegador que atribui a um componente sua própria subárvore isolada, evitando vazamento de estilos e scripts. Virtual DOM é uma técnica de biblioteca, usada pelo React e Vue, que compara uma cópia na memória para minimizar atualizações reais.

O WebDriver envia um localizador para o navegador, que percorre a árvore analisada até encontrar uma correspondência e, em seguida, retorna um identificador de WebElement. Localizadores Termos como id, nome, seletor CSS e XPath simplesmente descrevem diferentes regras de pesquisa sobre os mesmos nós.

Use `getElementById` quando o alvo tiver um ID único; é a busca mais rápida e retorna um único nó. Use `querySelector` ou `querySelectorAll` quando a correspondência depender de classes, atributos ou um caminho pai-filho.

O código ainda é executado, mas os navegadores desaconselham essa prática. Chamar `document.write()` após o carregamento da página substitui todo o documento e bloqueia a análise sintática durante o carregamento. Use `console.log()` para... tracing, ou innerHTML para inserir conteúdo.

O DOM modela o conteúdo da página: cabeçalho, corpo e todas as tags. O Modelo de Objeto do Navegador (BOM) abrange o navegador, incluindo o navegador, a tela, a localização e o histórico. O objeto janela é onde ambos se encontram.

O Internet Explorer foi descontinuado em 2022, portanto suas ferramentas de desenvolvedor agora estão localizadas dentro do navegador. Microsoft EdgeO fluxo de trabalho permanece inalterado: pressione F12 ou clique com o botão direito do mouse em um elemento, escolha Inspecionar e edite o nó no painel que se abre.

As ferramentas de aprendizado de máquina avaliam vários atributos de nós simultaneamente, de modo que, quando uma classe ou ID muda, elas encontram novamente o mesmo elemento em vez de falhar. Plataformas de teste com capacidade de autorrecuperação implementam essa funcionalidade com base em consultas DOM comuns.

Copilot O sistema gera rascunhos de ouvintes de eventos, cadeias de querySelector e loops de travessia a partir de um comentário e é confiável em padrões comuns. Sempre teste a sugestão na página real, pois ela não consegue ver sua marcação.

Resuma esta postagem com: