Atributos y selectores

Clase 3 de 15 • Curso de Automatización de Pruebas con Puppeteer

Resumen

La barra de búsqueda que menciona el profesor y que él comenta que se puede obtener con las teclas Cmd + F o Ctrl + F.
Más adelante el video aunque no se ve lo que escribe directamente en la barra el profesor va describiendo lo que escribe y se ve en el resultado de la búsqueda en la pantalla.

Lo primero que escribe es: div span

Juan Hernandez

student•

Deberian corregir el tema de la pantalla en el momento en que el hombre muestra como diseñar los Xpath

Anthony Ismael Manotoa Moreno

student•

Hola :)

Muchas gracias por tu reporte, estamos trabajando para solucionarlo lo más pronto posible ;)

También, mientras tanto, te dejo un comentario en el que se muestra lo que pasó en pantalla y no se pudo apreciar: https://platzi.com/comentario/3268450/

Jorge Emilio Granados Guzmán

student•

UMM NO

Rolando Tarqui Benito

student•

HTML tienen Etiquetas y estos pueden tener atributos estándar y a partir de estos atributos se crean propiedades del DOM. Propiedad =/= Atributos.

El selector permite seleccionar algunos elementos/nodos del DOM

CSS selectors

Universal: *
Tipo: imput
Clase: classname
Atributo: [attr] [attr=value] [attr|=value] [attr*=value] etc...
Grouping selectors div, span
Combinadores
- Combinador de hermanos adyacentes
- Combinador general de hermanos: p ~ span el 2do elemento sigue al 1ro. ambos comparten al mismo padre
- Combinador de hijo: ul > li Selecciona los elementos que son hijos del 1ro
- Combinador de descendientes: div span descendientes del 1er elemento
- Psudo clases; a : link
- Psoudo elementos: p::first-line

Xpath selector

Jorge Emilio Granados Guzmán

student•

GRACIAS CHICO

Jhoana España Urresty

student•

Esto no lo vimos en el Curso de Manipulación del DOM :(

Andy Pérez

student•

Hay partes del video que explica algo como si estuviera viendo otra pantalla o una información que no aparece en el video. A la final, como principiante no entendí.

Eduardo Rafael Romero Bernal

student•

Las Etiquetas HTML poseen atributos estándares, y no estándares

Atributos estándares: id, class, style y title. Atributos NO estándares: El resto...

Héctor Emmanuel Ortiz Pineda

student•

No estándares: Los que define el desarrollador.

Nicolas Mansilla

student•

En el minuto 12:10 cuando mostras las funciones de Xpath hay un typo, donde dice la funcion "starts-width" seria starts-with

primqt n/a

student•

desearia que el profesor hubiera puesto aunque sea un pdf con las diapositivas de la clase

Juan Castro

teacher•

Siempre los puedes encontrar en la primer clase del curso que quieras tomar, mira: https://static.platzi.com/media/public/uploads/2-slides_23b1cb97-bddc-42d3-aeb1-f9134a9b9fb9.pdf

Catalina Marin

company_admin•

se puede mencionar en la evaluación del curso, para futuras mejoras del mismo o de otros

Antonio Hernandez

student•

![](

Jorge Luis Bojorges Leyva

student•

En el minuto 9:10 cuando explicas los ejemplos de selectores, creo que recortaron tu pantalla ¿Nos podrías compartir captura que escribiste?

Omar Daniel Centeno

student•

Hola

Te dejo una captura de pantalla de la barra de búsqueda que menciona el profesor y que él comenta que se puede obtener con las teclas Cmd + F o Ctrl + F.

Más adelante el video aunque no se ve lo que escribe directamente en la barra el profesor va describiendo lo que escribe y se ve en el resultado de la búsqueda en la pantalla.

Lo primero que escribe es: div span.

Puedes probar tu mismo en tu navegador.

Saludos

Anthony Ismael Manotoa Moreno

student•

Hola 😃

Muchas gracias por tu reporte, estamos trabajando para solucionarlo lo más pronto posible 😉

Igual todo lo que sucedió es justo lo que nos comenta Omar 💚

John Alexander Pardo Gonzalez

student•

No es clara la explicacion por que no se muestra que esta pasando en la pantalla, ni cuando dice que señala algo con el mause

Alfredo Olmedo

student•

Las proiedades y los atributos estan Relacionados pero No son lo mismo.

En HTML, los atributos y las propiedades son elementos esenciales que afectan la estructura, el comportamiento y la apariencia de una página web. Aquí está una breve explicación de cada uno:

Atributos HTML:
- Los atributos son valores adicionales que se agregan a las etiquetas HTML para configurar o personalizar los elementos.
- Se definen directamente en el código HTML y se utilizan para ajustar el comportamiento de los elementos.
- Ejemplos comunes de atributos:
  - src en la etiqueta <img> para especificar la fuente de una imagen.
  - href en la etiqueta <a> para definir la URL de un enlace.
  - class en cualquier etiqueta para aplicar estilos CSS a elementos con propiedades en común.
  - alt en la etiqueta <img> para proporcionar un texto alternativo en caso de que la imagen no se pueda mostrar.
Propiedades:
- Las propiedades son características específicas de un elemento que se pueden acceder y modificar mediante JavaScript o CSS.
- A diferencia de los atributos, las propiedades no se definen directamente en el código HTML, sino que se manipulan a través de scripts o estilos.
- Ejemplos de propiedades:
  - innerHTML: Contenido HTML dentro de un elemento.
  - style: Estilos CSS aplicados al elemento.
  - value: Valor de un campo de entrada (por ejemplo, <input>).

En resumen, los atributos son parte integral de las etiquetas HTML y se utilizan para configurar elementos, mientras que las propiedades son características que se pueden manipular dinámicamente mediante JavaScript o CSS. Ambos son fundamentales para construir páginas web efectivas y funcionales 1 2.

guillermo jose berbesi gonzalez

student•

Y si el atributo no es estandar, como imprimimos el contenido

Rodwel Polanco Martinez

student•

Cabe destacar en mi experiencia es mejor usar CSS selectors. Ya que son mas flexibles y rapidos, Xpath en cambio es muy rigido y lento.

Gustavo Carrillo

student•

css vs x path selectors