¿Cómo puedo identificar un selector DOM o XPath para usarlos en un generador de flujo de trabajo de GUI de valor controlado de CloudWatch?
Estoy intentando crear un valor controlado en Amazon CloudWatch mediante el generador de flujo de trabajo de GUI. Recibo errores que indican que he seleccionado un elemento DOM incorrecto, por lo que necesito encontrar un selector DOM o XPath.
Breve descripción
Si seleccionó un elemento DOM incorrecto al crear un valor controlado con el generador de flujo de trabajo de GUI, es posible que se produzcan los siguientes errores:
- «Error: el nodo no está visible o no es un elemento HTML».
- «No se obtuvo ningún resultado de la prueba. Error: la navegación falló porque el navegador se desconectó».
- «Error de tiempo de espera: esperando al selector».
- «Error de tiempo de espera: esperando a XPath».
Resolución
Identificación del tipo de selector correcto
El generador de flujo de trabajo de GUI tiene cinco acciones. El tipo de selector requerido depende de la acción y de la versión ejecutable que utilice.
Las versiones ejecutables usan Node.js y Puppeteer, y la acción Comprobar texto usa el selector XPath. Las siguientes acciones utilizan el selector DOM:
- Hacer clic
- Comprobar selector
- Texto de entrada
- Hacer clic con navegación
Para las versiones ejecutables que utilizan Python y Selenium WebDriver, todas las acciones utilizan el selector XPath.
Identificación del selector correcto
Selectores DOM
Para encontrar un atributo único para el DOM, haga lo siguiente:
- Abra el menú contextual (clic con el botón derecho) del elemento (como un botón, campo de entrada, div, lapso o h1).
- Elija Inspeccionar elemento (Mozilla Firefox) o Inspeccionar (Google Chrome).
- Anote el atributo único del DOM que puede usar para identificar su elemento (como id, class o name).
Si el DOM no tiene un atributo único, utilice uno de los siguientes métodos para buscar el elemento:
- Utilice selectores descendientes para hacer coincidir los elementos en función de la ruta o el atributo determinados. Debe utilizar la ruta exacta. Por ejemplo, para encontrar <div class='new' id='newId'> <a href="/test1">test1</a> <a href="/test2">test2</a> <a href="/test3">test3</a> </div>, utilice div.new > a:first-child.
- Utilice los selectores de atributos para hacer coincidir los elementos en función de la presencia o el valor de un atributo determinado. Por ejemplo, para encontrar <div class="user-panel main" id="userId"> <input name="login"/> </div>, utilice div.user-panel.main input[name='login'].
También puede obtener un selector DOM único para su elemento DOM mediante el modo de desarrollador del navegador web.
Chrome:
- Abra el menú contextual (clic con el botón derecho) del elemento y, a continuación, seleccione Inspeccionar.
- En la pestaña Elementos, abra el menú contextual (clic con el botón derecho) de la línea resaltada.
- Elija Copiar y, a continuación, seleccione Copiar selector.
Firefox:
- Abra el menú contextual (clic con el botón derecho) del elemento y, a continuación, seleccione Inspeccionar elementos.
- En la pestaña Inspector, abra el menú contextual (clic con el botón derecho) de la línea resaltada.
- Elija Copiar y, a continuación, elija Selector CSS.
Nota: Si hay varias instancias del selector en el documento HTML, el valor controlado selecciona el primer elemento de la matriz devuelta. Evite seleccionar elementos que contengan el atributo CSS display:none;. Estos elementos son invisibles y hacen que el selector falle.
Selectores XPath
Puede obtener un selector XPath único para su elemento DOM mediante el modo de desarrollador del navegador web.
Chrome:
- Abra el menú contextual (clic con el botón derecho) del elemento y, a continuación, seleccione Inspeccionar.
- En la pestaña Elementos, abra el menú contextual (clic con el botón derecho) de la línea resaltada.
- Elija Copiar y, a continuación, elija Copiar XPath.
Firefox:
- Abra el menú contextual (clic con el botón derecho) del elemento y, a continuación, seleccione Inspeccionar elementos.
- En la pestaña Inspector, abra el menú contextual (clic con el botón derecho) de la línea resaltada.
- Elija Copiar y, a continuación, elija XPath.
Nota: Antes de añadir el selector XPath que ha copiado al valor controlado, elimine el prefijo «//». El valor controlado añade el prefijo «//» al código de forma predeterminada.
Probar el nuevo selector y confirmar que es correcto
Abrir el modo Consola en el navegador de Internet
Chrome:
- En la parte superior derecha del navegador, seleccione Personalizar.
- Expanda la opción Más herramientas y, a continuación, seleccione Herramientas para desarrolladores.
- Con DevTools abierto en el navegador, seleccione el panel Consola.
Firefox:
- En la parte superior derecha del navegador, seleccione Abrir menú.
- Elija Desarrollador web y, a continuación, Consola web.
Nota: En algunas versiones de Firefox, el menú Desarrollador web se encuentra en el menú Herramientas.
Probar el selector DOM
La sintaxis para probar la consulta del selector DOM en la consola del navegador es: document.querySelectorAll("[AttributeName='AttributeValue']"). Por ejemplo, si tiene un elemento div con id='username', use el siguiente patrón: document.querySelectorAll("[name='username']").
Probar el selector XPath
La sintaxis para probar la consulta de XPath en la consola del navegador es: $x("XPATH_QUERY"). Por ejemplo, si tiene un elemento div con id='welcome' que contiene un elemento h1, use el siguiente patrón: $x("//div[@id='welcome']//h1). Al añadir esta ruta al valor controlado, omita el prefijo «//».
Añadir el nuevo selector al valor controlado de CloudWatch
- Abra la consola de CloudWatch.
- En Sintéticos, elija Valores controlados.
- Elija Crear valor controlado.
- Elija Usar un esquema y, a continuación, Generador de flujo de trabajo de GUI.
- Consulte el ejemplo de Generador de flujo de trabajo de GUI para completar un esquema que utilice el selector recién creado.
Vídeos relacionados
Contenido relevante
- OFICIAL DE AWSActualizada hace un año
- OFICIAL DE AWSActualizada hace 4 meses
- OFICIAL DE AWSActualizada hace 2 años
- OFICIAL DE AWSActualizada hace 3 años