Índice del contenido

• ¿Qué son los comandos Cypress?
• Comandos de interacción de la interfaz de usuario proporcionados por Cypress
• Comando de clic derecho Cypress
• Comando de doble clic de Cypress
• Comando de clic Cypress
• Comando Cypress Trigger
• Comando tipo Cypress
• Comando Seleccionar Cypress
• Comando Cypress Check
• Comando claro de ciprés
• ¿Son asíncronos los comandos Cypress?
• Comandos personalizados de Cypress
• Encadenamiento de comandos de aserción en Cypress
• Sobrescribir comandos de Cypress existentes
• Comandos encadenables de Cypress
• Comando personalizado principal en Cypress
• Comando personalizado infantil en Cypress
• Comando personalizado dual en Cypress
• Comandos personalizados de Cypress con ejemplo
• Comandos de importación de Cypress
• IntelliSense de comando personalizado de Cypress

¿Qué son los comandos Cypress?

Cypress nos proporciona API y métodos para interactuar con la interfaz de usuario de la aplicación. Se conocen como Comandos Cypress y ayudan con la interacción de la aplicación web. Todos los comandos que están disponibles tienen métodos incorporados y solo los invocaremos en nuestros casos de prueba. Los comandos de Cypress simularán una acción similar a la de un usuario que intenta realizar operaciones en la aplicación.

Comandos de interacción de la interfaz de usuario proporcionados por Cypress

Hay diferentes comandos proporcionados por Cypress que interactúan con la interfaz de usuario. Examinaremos la lista de todos los comandos en detalle.

• .hacer clic()
• .dblclick ()
• .botón derecho del ratón()
• .escribe()
• .claro()
• .cheque()
• .uncheck ()
• .Seleccione()
• .desencadenar()

Comando de clic Cypress

.hacer clic() - Este comando es para clic cualquier elemento del DOM.

Las siguientes son las sintaxis para hacer clic en el comando

.click() 

.click(options) 

.click(position) 

.click(position, options) 

.click(xCoordinate, yCoordinate) 

.click(xCoordinate, yCoordinate, options) 

Como puede ver arriba, el clic acepta parámetros como opciones, posición, y coordenadas.

Opciones

Las posibles opciones que se pueden pasar a hacer clic son

posiciones

Los diferentes tipos de posiciones que se pueden pasar a .click () son

• centrotu préstamo estudiantil)
• izquierda
• Derecho
• parte superior
• arriba a la izquierda
• parte superior derecha
• fondo
• abajo a la izquierda
• abajo a la derecha

Ejemplo

cy.get('btn').click() //haciendo clic en el botón cy.get('btn').click({ force: true }) //haciendo clic en el botón pasando la opción 'force' como true cy. get('btn').click('bottomRight') // haciendo clic en el botón en la posición inferior derecha cy.get('btn').click(10, 70, { force: true }) // haciendo clic en el botón con valor de posición y fuerza verdadera

Comando de doble clic de Cypress

Se puede lograr un doble clic usando dblclick() sintaxis en Cypress.

Sintaxis

.dblclick()
.dblclick(position)
.dblclick(x, y)
.dblclick(options)
.dblclick(position, options)
.dblclick(x, y, options)

Opciones

.dblclick() acepta todas las opciones que son aceptadas por .click(). Puede encontrar las opciones en la sección anterior.

posiciones

Todas las posiciones posibles que se especifican en .click() también están disponibles para dblclick(). La lista de puestos se puede encontrar en la sección anterior.

Ejemplo

cy.get('button').dblclick() // Haga doble clic en el botón cy.focused().dblclick() // Haga doble clic en el elemento con foco cy.contains('Home').dblclick() // Doble clic haga clic en el primer elemento que contiene 'Home' cy.get('button').dblclick('top') // Haga doble clic en el botón en la posición superior cy.get('button').dblclick(30, 10) // Haga doble clic en las coordenadas de 30 y 10

Comando de clic derecho Cypress

Este comando Cypress, hace clic derecho en el elemento DOM .rightclick() El comando no abrirá los menús contextuales del navegador..rightclick() se utiliza para probar el manejo de eventos relacionados con el clic derecho en la aplicación, como contextmenu.

Sintaxis

.rightclick()
.rightclick(position)
.rightclick(options)
.rightclick(position, options)
.rightclick(x, y)
.rightclick(x, y, options)

Opciones

Como vimos anteriormente, todas las opciones aceptadas por .click() El comando se puede configurar con .rightclick() comando también.

posiciones

Todas las posiciones posibles que se pueden pasar al .rightclick() es igual que el .click() mencionado anteriormente.

Ejemplo

cy.get('.welcome').rightclick() // Haga clic derecho en .welcome cy.focused().rightclick() // Haga clic derecho en el elemento con foco cy.contains('January').rightclick() / / Haga clic derecho en el primer elemento que contiene 'Enero' cy.get('button').dblclick('topRight') // Haga doble clic en el botón en la posición superior derecha cy.get('button').dblclick(80, 20 ) // Haga doble clic en las coordenadas de 80 y 20

Comando tipo Cypress

.type() comando ingresa valor en un elemento DOM.

Sintaxis

.type(text)
.type(text, options)

Argumentos

.type() acepta una cadena como argumento. Los valores pasados ​​a .type() puede incluir cualquiera de las secuencias de caracteres especiales que se indican a continuación.

Opciones

Podemos pasar los objetos como opciones para modificar el comportamiento predeterminado de .type()

Ejemplo

Veamos ejemplos de .type() comando

cy.get('textarea').type('Hola') // ingresa el valor en el área de texto cy.get('body').type('{shift}') //habilita la tecla shift cy.get ('cuerpo').type('{rightarrow}') //escriba evento flecha derecha 

Comando claro de ciprés

El comando Borrar borrará los valores en el área de entrada o en el campo de texto.

Sintaxis

La sintaxis del comando clear es la siguiente.

.clear()
.clear(options)

Opciones

Examinaremos las opciones que se pueden pasar al .clear() mando.

Ejemplo

Veamos los ejemplos para un comando claro

cy.get('[type="text"]').clear() // Limpiar la entrada del tipo de texto cy.get('textarea').type('Bienvenido!').clear() // Borrar textarea cy .focused().clear() // Borrar entrada/área de texto enfocada

Comando Cypress Check

El comando de verificación marcará o, en palabras más simples, marcará las casillas de verificación o los botones de opción. Puede desmarcar las casillas de verificación o los botones de opción utilizando el .uncheck() mando.

Sintaxis

Entenderemos la sintaxis del comando check en Cypress.

//Syntax for check command
.check()
.check(value)
.check(options)
.check(values, options)

//Syntax for uncheck command
.uncheck()
.uncheck(value)
.uncheck(options)
.uncheck(values, options)

Opciones

Las posibles opciones que se pueden pasar para marcar / desmarcar comandos son las mismas opciones que el comando borrar enumerado anteriormente

Ejemplo

Veremos el ejemplo de cómo podemos usar los comandos de marcar y desmarcar.

cy.get('[type="checkbox"]').check() // Comprobar el elemento de la casilla de verificación cy.get('[type="radio"]').first().check() // Comprobar la primera radio element cy.get('[type="radio"]').check('Male') //Marque el elemento de radio que tiene Male cy.get('[type="checkbox"]').uncheck() / /Desmarque el elemento de casilla de verificación cy.get('[type="radio"]').uncheck() //Desmarque el primer elemento de radio cy.get('[type="checkbox"]').uncheck('Desayuno') // Desmarque el elemento de desayuno

Comando Seleccionar Cypress

El comando seleccionar Cypress le permite seleccionar elementos dentro de un etiqueta.

Sintaxis

La siguiente es la sintaxis para el comando de selección

.select(value)
.select(values)
.select(value, options)
.select(values, options)

Opciones

Podemos pasar las opciones para modificar el comportamiento predeterminado del comando de selección.

Ejemplo

Veamos ejemplos para el comando select

cy.get('select').select('butterfly') // Selecciona la opción 'butterfly' cy.get('select').select(0) // selecciona el elemento con índice 0 cy.get('select ').select(['parrot', 'peacock']) //selecciona la opción loro y pavo real

Comando Cypress Trigger

El comando Trigger ayuda a activar cualquier evento en el elemento.

Sintaxis

Examinaremos la sintaxis para acceder al comando de activación.

.trigger(eventName)
.trigger(eventName, position)
.trigger(eventName, x, y)
.trigger(eventName, position, options)
.trigger(eventName, options)
.trigger(eventName, x, y, options)

Optión

El comando Trigger acepta todas las opciones que se mencionan para .clear() mando. Además, hay algunas opciones que podemos configurar que se enumeran a continuación.

Ejemplo

Permítanos diferentes formas de usar .trigger() en el código.

cy.get('a').trigger('mouseover') // Activar el evento mouseover en un enlace cy.get('.target').trigger('mousedown', { button: 0 }) //mousedown activado en button 0 cy.get('button').trigger('mouseup', topRight, { bubbles: false }) //mouseup activado en la posición superiorDerecha con burbuja configurada como falsa

¿Los comandos de Cypress son asincrónicos?

Todos los comandos de Cypress son asincrónicos. Se ponen en cola para su ejecución en un momento posterior y no esperarán a que se completen los comandos. El comando Cypress no hace nada en el momento de su invocación, sino que lo guarda para su ejecución posterior. Puede comprender el comportamiento asincrónico de Cypress esta página

Comandos encadenables de Cypress

En Cypress, podemos usar una serie de comandos para interactuar con elementos en DOM. Es imperativo comprender cómo funciona internamente el encadenamiento de comandos. Si estamos encadenando comandos en una línea en particular, Cypress manejará una promesa basada en la cadena de comandos y producirá un comando basado en el asunto al siguiente comando, hasta que finalice la cadena de comandos o se haya producido un error.

Cypress nos permite hacer clic en un elemento o escribir en elementos usando el .click() or .type() comandos obteniendo los elementos usando cy.get() or cy.contains(). Veamos un ejemplo simple de encadenamiento de comandos.

cy.get('área de texto').type('¿Cómo estás?')

En el ejemplo anterior, cy.get() es un comando de Cypress y .type() es otro comando, donde estamos encadenando el .type() comando en el cy.get() comando, diciéndole que escriba al sujeto que se obtiene de la cy.get() elemento. De manera similar, podemos encadenar todos los comandos que discutimos anteriormente.

Encadenamiento de comandos de aserción en Cypress

Similar a encadenar múltiples comandos usando Cypress, también podemos encadenar afirmaciones con comandos. Las afirmaciones son comandos que le permiten describir el esperado estado o comportamiento de la aplicación. Cypress esperará hasta que los elementos alcancen el estado esperado y la prueba fallará si las afirmaciones no pasan. Veremos cómo podemos usar comandos de encadenamiento para afirmar un elemento.

cy.get('button').should('be.disabled') //esperar si el botón debe estar deshabilitado cy.get('form').should('have.class', 'form-vertical') / /esperar si el formulario debe tener la clase 'form-vertical' cy.get('input').should('not.have.value', 'Name') // afirmar si la entrada no debe tener el valor 'Name '

Como se mencionó anteriormente, estamos usando el cy.get() comando y encadenarlo con el .should() comando de aserción para esperar el comportamiento basado en el resultado. De esta manera, podemos usar la cadena comandos de aserción en Cypress.

Comandos personalizados de Cypress

Cypress nos proporciona API para crear comandos basados ​​en nuestros requisitos. El comando personalizado de Cypress es similar a los comandos predeterminados que ya existen, excepto que es usuario definido. Con los comandos personalizados, podemos jugar con los comandos y encadenarlos según nuestro caso de uso. Los comandos personalizados de Cypress son útiles en nuestro flujo de trabajo si necesita reutilizarlos una y otra vez en las pruebas.

Veamos la sintaxis para crear un nuevo comando personalizado en Cypress.

Cypress.Commands.add(name, callbackFn)
Cypress.Commands.add(name, options, callbackFn)
Cypress.Commands.overwrite(name, callbackFn)

donde los argumentos son los siguientes

nombre - El nombre del comando en cadena que queremos agregar o sobrescribir

devolución de llamadaFn - Esta función toma un argumento pasado al comando

opciones - Pase cualquier objeto de opciones para definir el comportamiento del comando

Note : las opciones solo se admiten para los comandos de adición y no es compatible con los comandos de sobrescritura

Las opciones que prevSubject acepta son los siguientes

• false - ignorar materias anteriores (comando de los padres)
• true - aceptar las materias anteriores (comando infantil)
• optional - indique si desea comenzar una nueva cadena o usar una cadena existente (comando dual)

Comando personalizado principal en Cypress

Veremos cómo agregar un comando personalizado principal en Cypress. El comando principal siempre comenzará una nueva cadena de comandos, aunque haya encadenado un comando anterior. El comando previamente encadenado será ignorado y siempre se encadenará un comando nuevo. Algunos de los comandos de los padres son cy.visit(), cy.get(), cy.request(),cy.exec(), cy.route()

Ejemplo

Veremos un ejemplo de cómo escribir un comando personalizado principal en Cypress

Cypress.Commands.add('clickLink', (label) => { cy.get('a').contains(label).click() }) //haciendo clic en el enlace "Comprar ahora" cy.clickLink('Comprar Ahora')

En el ejemplo anterior, 'hacer clic en enlace'es el nombre de nuestro comando personalizado. Buscará el Label. En la línea 2, el comando obtiene 'a', y busque el enlace que contiene la etiqueta y haga clic en el elemento. cy.clickLink() ejecutará la acción en el archivo de prueba y hace clic en el botón "COMPRAR AHORA"Enlace".

Comando personalizado infantil en Cypress

Los comandos secundarios personalizados en Cypress están encadenados a un comando principal u otro comando secundario. El asunto del comando anterior se cederá a la función de devolución de llamada.

Algunos de los comandos de Cypress que se pueden encadenar como comando secundario son .click(), .trigger(), .should(), .find(), .as()

Ejemplo

Veremos un ejemplo sobre cómo encadenar un comando personalizado secundario

Cypress.Commands.add('forceClick', {prevSubject: 'element'}, (asunto, opciones) => { // ajustar el asunto existente y hacer algo con él cy.wrap(asunto).click({force:true }) }) //acceder a forceClick en el archivo de prueba cy.get("[data-test='panel-VALUES']").forceClick();

En el ejemplo anterior, estamos nombrando nuestro comando personalizado como 'ForceClick'. Pasamos el argumento prevSubject al elemento y envolvemos el sujeto existente. Con cy.wrap(), estamos forzando a hacer clic en el tema. Luego, en el archivo de prueba, accedemos al comando personalizado, 'ForceClick' en un cy.get() mando.

Comandos personalizados duales en Cypress

Los comandos personalizados duales son híbridos entre un comando principal y uno secundario. Puede comenzar una nueva cadena de comandos o encadenar un comando existente. Los comandos duales son útiles si queremos que nuestro comando funcione de diferentes maneras con o sin el sujeto existente.

Algunos de los comandos que se pueden usar para comandos duales son cy.contains(), cy.screenshot(), cy.scrollTo(), cy.wait()

Ejemplo

Veamos un ejemplo de cómo usar comandos personalizados duales

Cypress.Commands.add('getButton', { prevSubject: 'opcional' }, (asunto) => { if (asunto) { cy.get(asunto).get('btn').its('botón'); } más { cy.get('btn').its('botón'); } })

En algunos casos, necesitaremos obtener el botón del texto usando getButton que adquirirá todo el botón del elemento. Ahora podemos usar getButton para encadenar el con el elemento padre o encadenar el elemento hijo, donde puede invocar los elementos del padre.

Puesto que el prevSubject es opcional, podemos pasar el sujeto como argumento o invocar el comando sin el sujeto en el archivo de prueba como se muestra a continuación

cy.getButton() // sin el asunto cy.get('#loginBtn').getButton() // con el asunto

Sobrescritura de comandos Cypress existentes

Podemos sobrescribir los comandos Cypress ya existentes y modificar el comportamiento para evitar crear otro comando que intente utilizar el comando original al final.

Algunos de los comandos originales de Cypress que se pueden sobrescribir son cy.visit(), cy.type(), cy.screenshot(), cy.contains()

Ejemplo

Veamos un ejemplo de cómo podemos sobrescribir el Cypress existente mando.

Cypress.Commands.overwrite('contains', (originalFn, subject, filter, text, options = {}) => { // determinar si se pasó un argumento de filtro if (typeof text === 'object') { options = texto texto = filtro filtro = indefinido } opciones.matchCase = false return originalFn(asunto, filtro, texto, opciones) } )

Como vimos anteriormente, estamos usando el Cypress.Commands.sobrescribir para modificar el comando Cypress existente. Estamos nombrando nuestro comando personalizado como contains y estamos pasando argumentos para determinar si el argumento del filtro ha pasado.

Comandos de importación de Cypress

En esta sección, entenderemos cómo importar comandos Cypress.

Debemos crear nuestros comandos personalizados Cypress en el cypress / support / commands.js expediente. Agregaremos los comandos personalizados en el archivo command.js e importaremos en nuestro archivo de caso de prueba para usarlo.

Comandos personalizados de Cypress con ejemplo

Entenderemos cómo crear un comando personalizado y usarlo en nuestro archivo de especificaciones con un ejemplo en tiempo real.

Como vimos anteriormente, tenemos que agregar nuevos comandos personalizados debajo del comandos.js expediente. En ese archivo, agreguemos un comando personalizado para una función de inicio de sesión

Cypress.Commands.add("login", (nombre de usuario, contraseña) => { //agregar un nuevo comando llamado login cy.get('[id=Email]').clear(); cy.get('[id =Correo electrónico]').type(nombre de usuario); cy.get('[id=Contraseña]').clear(); cy.get('[id=Contraseña]').type(contraseña); cy.get( '[tipo=enviar]').clic(); });

En el código anterior, estamos nombrando nuestro comando personalizado como Inicie sesión. Dentro del comando personalizado, hemos agregado los pasos para borrar el campo de nombre de usuario e ingresar un valor en el campo de texto. De manera similar, estamos limpiando el campo y agregando la contraseña en el campo de contraseña. Más tarde, haremos clic en el botón enviar. Este es un comando personalizado simple que acepta dos argumentos: nombre de usuario y contraseña. Pasaremos el valor del nombre de usuario y la contraseña en nuestro archivo de especificaciones.

Ahora creemos un archivo de especificaciones llamado customCommand.spec.js en la carpeta de integración. Nuestro archivo de especificaciones contendrá el siguiente código

describe("Ejemplo de comandos personalizados", () => { it("debe iniciar sesión usando los comandos personalizados", () => { cy.visit("https://admin-demo.nopcommerce.com/"); cy .acceso("[email protected]", "admin"); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });

Como vimos anteriormente, estamos accediendo a nuestro comando personalizado como cy.login() , donde estamos pasando los valores de nombre de usuario y contraseña.

Comandos personalizados Cypress IntelliSense

IntelliSense proporciona sugerencias de código inteligente en el IDE o editor de código directamente mientras escribimos las pruebas. Ayuda al mostrar una ventana emergente que muestra la definición del comando, un enlace a la página de documentación y ejemplos de código. Si usamos cualquier editor de código moderno como Visual Studio Code o IntellJ, IntelliSense será muy útil.

IntelliSense usa TypeScript para comprender y mostrar la sintaxis. Si escribimos comandos personalizados y proporcionamos definiciones de TypeScript para los comandos personalizados, podemos usar las barras diagonales triples para mostrar IntelliSense, incluso si nuestro proyecto solo usa JavaScript.

Para configurar IntelliSense, necesitamos describir el código en cypress / support / index.d.ts archivo.

// definiciones de tipos para el objeto Cypress "cy" /// declarar espacio de nombres Cypress { interfaz Chainable { /** * Iniciar sesión con credenciales * @example * cy.login(nombre de usuario, contraseña) */ inicio de sesión (nombre de usuario: Cadena, contraseña: Cadena): Encadenable } }

Ahora, debemos informar a nuestros archivos de especificaciones que hay algunas definiciones de Typecript en el índice.d.ts expediente. Entonces, al comienzo de nuestro archivo de especificaciones, agregue el siguiente código para permitir que IntelliSense nos brinde sugerencias.

// escriba definiciones para comandos personalizados como "iniciar sesión" // se resolverá en "cypress/support/index.d.ts" //

Como vimos anteriormente, IntelliSense nos proporciona el argumento que proporcionamos en nuestro archivo command.js y ayuda a autocompletar.

Aishwarya Lakshmi

Hola... Soy Aishwarya Lakshmi, completé mi B.Tech y tengo casi más de 2 años de experiencia en el ámbito de las pruebas. Soy un entusiasta de las pruebas y un apasionado de las pruebas y me encanta explorar cosas nuevas en mi campo y compartirlas con mis compañeros. Disfruto escribiendo blogs durante mi tiempo libre de la forma más sencilla pero eficaz. Como tester, me gusta tener las cosas a la perfección, por eso deseo que mis lectores comprendan perfectamente la tecnología. Me mantengo actualizado con las nuevas tecnologías relacionadas con las pruebas y dedico tiempo a comprenderlas. Me complace ayudar a los estudiantes a comprender los conceptos de las pruebas.