No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Trabajando con inputs

15/23
Recursos

¿Cómo trabajar con los inputs de texto en HTML?

Dominar los inputs de texto en HTML es una habilidad esencial para cualquier desarrollador o tester, especialmente al crear formularios interactivos. En este tutorial, desglosamos cómo trabajar con ellos usando Cypress, una herramienta que facilita la interacción con elementos web en pruebas automatizadas. Aprende a escribir y limpiar textos en campos de entrada para mejorar tus flujos de trabajo de testing.

¿Cómo iniciar una prueba con Cypress?

Antes de sumergirnos en los detalles de los inputs, es importante entender cómo se inicia una prueba con Cypress. Aquí hacemos un repaso rápido:

  • Preparar la página de prueba: Asegúrate de tener acceso al formulario que deseas probar. En nuestro caso, usamos una página de demo conocida como "practice form".
  • Configurar la prueba: Usa el mismo setup básico para interactuar con varios elementos e identifica los campos a probar.

Ejemplo de una prueba básica en Cypress

describe('Demo QA Form Test', () => {
  it('Filling firstname and lastname fields', () => {
    cy.visit('url_del_formulario');
    cy.get('#firstName').type('Javier');
    cy.get('#lastName').type('Fuentes');
  });
});

¿Por qué son importantes los IDs únicos?

Para asegurar un flujo de pruebas efectivo, recomienda siempre al equipo de desarrollo que incluya identificadores únicos en los elementos HTML. Esto simplifica el proceso de selección de elementos durante las pruebas.

¿Cómo escribir texto en un input?

Para escribir texto en un input en Cypress, utilizamos el comando type.

cy.get('#firstName').type('Javier');

¿Qué pasa si el texto se concatena?

Al repetir la escritura en un campo sin limpiarlo, el texto se concatena. Esto puede ser un problema al automatizar pruebas, ya que podrías querer iniciar con un campo vacío.

¿Cómo limpiar el contenido de un input?

Existen varias formas de limpiar el contenido de un input:

  1. Usar comandos dentro de type: Puedes usar comandos como selectAll y backspace para borrar el texto actual de un input.

    cy.get('#firstName').type('{selectall}{backspace}');
    
  2. Usar el comando clear: Cypress ofrece un comando específico para limpiar inputs.

    cy.get('#firstName').clear();
    

Ambas opciones son válidas y se pueden elegir según la sintaxis con la que te sientas más cómodo.

¿Por qué es esencial experimentar con diferentes comandos?

Experimentar con diferentes comandos y métodos es crucial para encontrar la manera más eficiente de trabajar en tus proyectos de testing. Cypress ofrece distintas herramientas y metodologías que puedes adaptar a tus necesidades particulares.

La práctica y la habilidad de adaptarte te ayudarán a enfrentar diferentes escenarios de prueba. Recuerda, siempre hay más por aprender y experimentar. ¡Adelante, sigue explorando y ampliando tus conocimientos!

Aportes 4

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Lista de algunos comandos para usar con el type:

{backspace} Borra el personaje a la izquierda del cursor.
{del} Borra el personaje a la derecha del cursor.
{downarrow} Mueve el cursor hacia abajo.
{end}	Mueve el cursor al final de la línea.
{enter} Teclea la tecla Intro.
{esc}	Teclea la tecla Escape.
{home} Mueve el cursor al principio de la línea.
{insert} Inserta un personaje a la derecha del cursor.
{leftarrow} Mueve el cursor a la izquierda.
{movetoend} Desplaza el cursor al final del elemento mecanizable.
{movetostart} Desplaza el cursor al inicio del elemento mecanizable.
{pagedown} Se desplaza hacia abajo.
{pageup}  Se desplaza hacia arriba.
{rightarrow} Mueve el cursor a la derecha.
{selectall} Selecciona todo el texto creando un selection range.
{uparrow}	Mueve el cursor hacia arriba.

En un proyecto de la empresa, este selector no me permitia usar el clear(), me toco usar todo este comando type()

cy.get(’[data-testid=“ModeEditOutlineIcon”]’)
.type(’{selectall}{backspace}value{enter}’)
```js it.only("Input type text", ()=>{ cy.visit("/automation-practice-form") cy.get("#firstName").type("Mario") cy.get("#lastName").type("Fuentes") cy.get("#firstName").type("Mario") cy.get("#firstName").type("{selectAll}{backspace}") cy.get("#firstName").type("Otro nombre") cy.get("#firstName").clear() ```it.only("Input type text", ()=>{        cy.visit("/automation-practice-form")        cy.get("#firstName").type("Mario")        cy.get("#lastName").type("Fuentes")         cy.get("#firstName").type("Mario")         cy.get("#firstName").type("{selectAll}{backspace}")        cy.get("#firstName").type("Otro nombre")        cy.get("#firstName").clear()
tengo este mensaje de error me podrian ayudar.. gracias ![](https://static.platzi.com/media/user_upload/image-fa30731f-1ced-4c16-acd1-790051bd100e.jpg)