O que é DOM em Selenium WebDriver: Estrutura, Formulário Completo

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. Porém, é o W3C quem formaliza um padrão e o publica – veja aqui (https://dom.spec.whatwg.org/).

Este tutorial tem como objetivo cobrir conceitos básicos da estrutura do documento HTML e como manipulá-lo usando JavaScript. Abordaremos os seguintes tópicos neste tutorial:

Compreendendo a estrutura do DOM
Componentes do DOM em Selenium
Depuração no DOM
Eventos DOM
Solução de problemas no DOM

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 –

Desenvolver conteúdo que se atualize continuamente sem atualizar a página inteira – como o preço atual de todas as ações do portfólio do seu usuário
Desenvolver interações avançadas com o usuário, como adicionar ou modificar conteúdo dinamicamente – como a capacidade de adicionar mais ações ao seu portfólio
Desenvolvimento de conteúdo personalizável pelo usuário – como a capacidade de alterar o layout para que o portfólio de fundos mútuos apareça antes do portfólio de ações
Desenvolver conteúdo responsivo em seu site fazendo com que seu site se adapte a diferentes telas de mídia viz. iPhone, desktop, tablet etc. automaticamente

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

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

ISO

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

Propriedades do objeto de documento no DOM

Documento.documentURI e Documento.URL – Ambos retornam a localização atual do documento. Se, no entanto, o documento não for do tipo HTML, Document.URL não funcionará.

Documento.activeElement – Este método retorna o elemento no DOM que está em foco. Isso significa que se um usuário estiver digitando 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 de DOM. É usado para pesquisar um elemento na árvore DOM usando seu identificador exclusivo. A 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 ou 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 mais um elemento baseado nas regras do seletor CSS (se você estiver familiarizado com a notação $ do jQuery, ele próprio usa este método). Não nos aprofundaremos muito nos seletores CSS. O seletor CSS é um conjunto de regras pelas quais você pode obter uma lista de elementos semelhantes (com base na regra do seletor). Já usamos esse método antes na seção “Hello World”.

Element

Elemento é qualquer objeto representado por um nó na árvore DOM de um documento. Como sempre, o próprio objeto Element é apenas um contrato de propriedades, métodos e eventos entre um navegador e um documento HTML. Existem tipos especiais de elementos como HTMLElement, SVGElement, XULElement etc. Vamos nos concentrar apenas em HTMLElement neste tutorial.

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.

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.

Agora, digamos que você queira alterar o valor da temperatura de 26^oC a 32^oC 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.

Abra MyFileNewFile.html (ou qualquer nome que você deu ao seu arquivo HTML nos tutoriais acima) usando seu navegador
Use o mouse e clique com o botão direito no valor da temperatura 26^oC e clique em “Inspecionar Elemento”
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)
Abra o elemento clicando no triângulo inclinado ao lado dele
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.
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”.

Processo de depuração no DOM

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 então uma ação definida pelo desenvolvedor pode ser executada. Digamos, por exemplo, que você gostaria que os números da sua página da web fossem atualizados apenas quando o usuário clica em um botão. Você pode conseguir isso por qualquer um dos seguintes métodos –

Atribuir ação ao evento onclick do elemento HTML
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

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';
}

Resumo

Neste tutorial aprendemos o que é um DOM e como é um conceito essencial para entender a construção de páginas web dinâmicas.
Também abordamos tipos de elementos DOM como Window, Document e Element.
Aprendemos alguns métodos e propriedades úteis do DOM disponíveis em cada tipo.
Vimos como a maioria dos navegadores oferece ferramentas de desenvolvedor para brincar com qualquer página disponível na Internet – aprendendo assim a depurar e resolver problemas com nosso próprio site.
Também abordamos brevemente os mecanismos de eventos DOM.
Finalmente, cobrimos alguns itens de solução de problemas no DOM.
A Internet está repleta de recursos no DOM. Um dos melhores e mais atualizados materiais de referência está disponível na rede de desenvolvedores da Mozilla. Ver - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model