¿Qué es DOM en Selenium WebDriver: estructura, forma completa

Por: Krishna rungta Krishna rungta
Hours Actualizado

¿Qué es DOM en Selenium ¿Conductor web?

DOM in Selenium WebDriver es un componente esencial del desarrollo web utilizando HTML5 y JavaScript. La forma completa de DOM es Document Object Model. DOM no es un concepto de la ciencia informática. Es un conjunto simple de interfaces estandarizadas entre los desarrolladores web para acceder y manipular documentos en HTML o XML utilizando JavaGuión.

Estos estándares ayudan a los desarrolladores a crear una página web sin preocuparse por los detalles de implementación. Algunas de las organizaciones involucradas en la estandarización de estas interfaces son Mozilla, Apple, Microsoft, Google, Adobe, etc. Sin embargo, es el W3C el que formaliza un estándar y lo publica – ver aquí (https://dom.spec.whatwg.org/).

Este tutorial tiene como objetivo cubrir los conceptos básicos de la estructura del documento HTML y cómo manipularlo utilizando JavaGuión. En este tutorial abordaremos los siguientes temas:

Comprender la estructura DOM

Necesitará comprender la estructura DOM si está creando un sitio web que implique secuencias de comandos utilizando JavaGuión. Comprender el DOM es aún más importante si está realizando alguna o todas las siguientes tareas complicadas en su sitio web:

  1. Desarrollar contenido que se actualice continuamente sin actualizar toda la página, como el precio actual de todas las acciones en la cartera de su usuario.
  2. Desarrollar interacciones avanzadas con el usuario, como agregar o modificar contenido dinámicamente, como la capacidad de agregar más acciones a su cartera.
  3. Desarrollar contenido que sea personalizable por el usuario, como la capacidad de cambiar el diseño para que la cartera de fondos mutuos aparezca antes que la cartera de acciones.
  4. Desarrollar contenido adaptable en su sitio web, haciendo que su sitio web se adapte automáticamente a diferentes pantallas de medios, es decir, iPhone, computadora de escritorio, tableta, etc.

Una 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>

¿Cómo se ve en el DOM PARSER de un navegador?

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

¿Cómo se accede al elemento del cuerpo?

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

¿Cómo se dice "Hola mundo"?

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

Finalmente el archivo HTML completo se verá así

Abierto Windows En el Bloc de notas, pega el siguiente contenido. Luego, guarda el archivo como “MyFileNewFile.html” (asegúrate de que el nombre del archivo termine con .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>

Finalmente, simplemente abra el archivo usando cualquiera de sus navegadores preferidos y verá "¡Hola mundo!"

Componentes de DOM en Selenium

A continuación se muestran los componentes principales de DOM. Selenium controlador web:

  • Ventana
  • Comparación de
  • Pestaña

Ventana

Ventana es el objeto que contiene el objeto documento en un DOM. Se sitúa encima de todo.

Para llegar a un objeto de ventana desde un documento determinado

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

En un entorno con pestañas, cada pestaña tiene su propio objeto de ventana. Sin embargo, si uno desea capturar e implementar eventos como window.resizeTo y window.resizeBy, se aplican a toda la ventana y no solo a la pestaña.

Propiedades del objeto de ventana en DOM

ventana.almacenamientolocal – da acceso al almacenamiento local del navegador. El almacenamiento local se puede utilizar para almacenar y recuperar datos de una sesión.

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

abridor de ventana – obtiene la referencia al objeto de ventana que abrió esta ventana (ya sea haciendo clic en un enlace o usando el método window.open)

Métodos útiles de objetos de ventana

ventana.alerta() – muestra un cuadro de diálogo de alerta con un mensaje.

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

Hay muchos eventos útiles que expone el objeto de ventana. Los discutiremos en la sección "Eventos" en Temas avanzados.

Comparación de

El documento marca el comienzo de un árbol DOM. El documento es el primer nodo en un DOM. Tiene varios métodos y propiedades, cuyo alcance se aplica a todo el documento como URL, getElementById, querySelector, etc.

Propiedades del objeto de documento en DOM

Documento.documentURI y la Documento.URL – Ambos devuelven la ubicación actual del documento. Sin embargo, si el documento no es del tipo HTML, Document.URL no funcionará.

Documento.elementoactivo – Este método devuelve el elemento del DOM que está en foco. Esto significa que si un usuario está escribiendo en un cuadro de texto, Document.activeElement devolverá una referencia a ese cuadro de texto.

Titulo del documento – Se utiliza para leer o establecer un título de un documento determinado.

Métodos útiles de objeto de documento

Document.getElementById(ID de cadena) – este es, con diferencia, el método más relevante y útil en la manipulación del DOM. Se utiliza para buscar un elemento en el árbol DOM utilizando su identificador único. La búsqueda distingue entre mayúsculas y minúsculas, es decir, en el siguiente ejemplo, el “ " El elemento no se puede buscar utilizando palabras como IntroDiv o introdiv o 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 (selector de cadena) – este es otro método ampliamente utilizado para seleccionar un elemento más según las reglas del selector CSS (si está familiarizado con la notación $ de jQuery, que a su vez usa este método). No profundizaremos mucho en los selectores CSS. El selector CSS es un conjunto de reglas mediante las cuales puede obtener una lista de elementos similares (según la regla del selector). Hemos utilizado este método antes en la sección "Hola mundo".

Pestaña

Objeto elemento en DOM

Objeto elemento en DOM

Elemento es cualquier objeto representado por un nodo en un árbol DOM de un documento. Como siempre, el objeto Element en sí es solo un contrato de propiedades, métodos y eventos entre un navegador y un documento HTML. Hay tipos especiales de elementos como HTMLElement, SVGElement, XULElement, etc. Nos centraremos únicamente en HTMLElement en este tutorial.

Propiedades del objeto elemento en DOM

elemento.id – Esta propiedad se puede utilizar para establecer o leer "ID" (un identificador único) para un elemento HTML. El ID debe ser único entre los elementos de un árbol DOM. Como se mencionó anteriormente, el método Document.getElementById también utiliza ID para seleccionar un objeto Elemento particular dentro de un árbol DOM.

HTMLElement.contentEditable – La propiedad contentEditable de un elemento determina si el contenido de ese elemento es editable o modificable. Esta propiedad se puede configurar como se muestra en el script a continuación. Esta propiedad también se puede utilizar para determinar si un elemento determinado es editable o no. Pruebe el siguiente script dentro de cualquier cuerpo HTML y notará que puede editar cualquier contenido del cuerpo.

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

Elemento.innerHTML – innerHTML es otra propiedad importante que utilizamos para acceder al contenido HTML dentro de un elemento. También se utiliza para establecer el nuevo contenido HTML del elemento. Se utiliza ampliamente para establecer o cambiar el contenido de los campos de datos. Por ejemplo, si desea que su página web actualice la temperatura de la ciudad de Mumbai cada hora, puede ejecutar el script del siguiente ejemplo 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 útiles de objeto elemento

HTMLElement.desenfoque() & HTMLElement.enfoque() – Los métodos de desenfoque y enfoque se utilizan para quitar o dar foco a un elemento HTML respectivamente. Estos métodos se utilizan más comúnmente para mover el foco de un cursor entre cuadros de texto en una página web de ingreso de datos.

Elemento.querySelectorAll – Este método es similar al método querySelector ya comentado para el objeto de documento. Sin embargo, este método limitará su búsqueda dentro de los descendientes del propio elemento.

Depuración en DOM

herramientas de desarrollo de Google ChromeMozilla Firefox, Internet Explorer (10 o superior) o Safari permiten una fácil depuración directamente dentro del navegador. A veces, diferentes navegadores interpretan el mismo código HTML de manera diferente y es entonces cuando la depuración le ayuda a inspeccionar el DOM tal como lo ha interpretado el motor DOM de ese navegador en particular.

Ahora, digamos que desea cambiar el valor de temperatura de 26oC a 32oC en su último ejemplo. Tomaremos algunos pasos simples para hacerlo. Las capturas de pantalla que se muestran aquí son de Mozilla. Firefox– sin embargo, los pasos son los mismos en todos los demás navegadores.

  1. Abra MyFileNewFile.html (o cualquier nombre que le haya dado a su archivo HTML en los tutoriales anteriores) usando su navegador
  2. Utilice su mouse y haga clic derecho en el valor de temperatura 26oC y haga clic en "Inspeccionar elemento"

    Depuración en DOM

  3. Observe que el elemento donde eligió "Inspeccionar elemento" se muestra resaltado en su navegador (la ventana del depurador generalmente aparece en la parte inferior de la pantalla)

    Depuración en el motor DOM

  4. Abra el elemento haciendo clic en el triángulo inclinado al lado de él.

    Proceso de depuración en DOM

  5. Seleccione lo que desea editar y haga doble clic en él. Obtendrá una opción para cambiar el texto. Siga las instrucciones de la imagen animada que aparece a continuación.

    Depuración en DOM

  6. Observe el cambio en el contenido de su página HTML. Puede cerrar la ventana de depuración ahora.

    Tenga en cuenta que sus cambios solo persistirán durante esta sesión. Tan pronto como vuelva a cargar o actualizar (presione F5) la página, los cambios se revertirán. Esto indica que no cambió la fuente HTML real sino solo la interpretación local de su navegador.

    Como ejercicio divertido, intente hacer lo siguiente: Abrir www.facebook.com en su navegador y use la herramienta de depuración para obtener el siguiente resultado: observe cómo dice "He hackeado Facebook".

Proceso de depuración en DOM

Eventos DOM

¿Qué son los eventos en DOM?

Los eventos son un modelo de programación en el que los incidentes desencadenados por el usuario (o desencadenados por el ciclo de vida de la página del navegador) se transmiten como mensajes. Por ejemplo, cuando una página ha terminado de cargarse, activa el evento window.load y de manera similar, cuando el usuario hace clic en un botón, se activa el evento de clic del elemento .

Estos mensajes pueden ser interceptados por cualquier JavaGuión código y luego se puede tomar una acción definida por el desarrollador. Por ejemplo, supongamos que desea que los números de su página web se actualicen solo cuando el usuario haga clic en un botón. Puede lograrlo mediante cualquiera de los siguientes métodos:

  1. Asignar acción al evento onclick del elemento HTML
  2. Asignar acción al evento de clic usando el 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>

Solución de problemas en DOM

P. ¿Cómo sé si un elemento existe o no?

A. Intente buscar el elemento usando cualquiera de los selectores y verifique si el elemento devuelto es nulo. Vea el ejemplo a continuación:

ARTÍCULOS RELACIONADOS

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

P. Recibo TypeError: document.getElementByID no es una función...

A. Asegúrese de que el nombre del método coincida exactamente con el método API. Como en la pregunta anterior: es getElementById y no getElementByID.

P. ¿Cuál es la diferencia entre niños y childNodes?

A. El método children nos proporciona la colección de todos los elementos dentro del elemento que realiza la llamada. La colección devuelta es del tipo HTMLCollection. Sin embargo, el método childNodes nos proporciona la colección de todos los nodos dentro del elemento que realiza la llamada. Agregue los siguientes scripts a nuestro ejemplo y observe la diferencia:

El método childNodes devuelve 14 elementos

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);

Mientras que el método de los niños devuelve sólo 7 elementos

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. Recibo un error de tipo no detectado: no se puede leer la propiedad 'innerHTML' de undefinido...

A. Asegúrese de que la instancia de HTMLElement en la que está llamando a la propiedad innerHTML se haya establecido después de la declaración inicial. Este error suele ocurrir en el siguiente escenario. Vea cómo se puede evitar el error en el siguiente bloque 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';
}

Resumen

  • En este tutorial aprendimos qué es un DOM y cómo es un concepto esencial para entenderlo para construir páginas web dinámicas.
  • También abordamos tipos de elementos DOM como Ventana, Documento y Elemento.
  • Aprendimos algunos métodos y propiedades DOM útiles disponibles dentro de cada tipo.
  • Vimos cómo la mayoría de los navegadores ofrecen herramientas de desarrollo para jugar con cualquier página web disponible en Internet, aprendiendo así a depurar y resolver problemas con nuestro propio sitio web.
  • También abordamos brevemente los mecanismos de eventos DOM.
  • Finalmente cubrimos algunos elementos de solución de problemas en DOM.
  • Internet está lleno de recursos sobre DOM. Uno de los mejores y más actualizados materiales de referencia está disponible en la red de desarrolladores de Mozilla. Ver - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model