Modelo de objeto de página paso a paso en Cypress con ejemplos

Modelo de objeto de página, comúnmente conocido como POM, es un patrón popular en cualquier marco de automatización. Page Object Model también se puede aplicar en Cypress. Page Object Model tiene muchas ventajas en la creación de un marco para la automatización de pruebas, como reducir la duplicación de código y aumentar la facilidad de mantenimiento y la legibilidad. Cypress nos brinda la flexibilidad de incorporar Page Object Model en el script de prueba. En este artículo, veremos cómo crear un modelo de objeto de página en Cypress paso a paso con ejemplos.

modelo de objetos de página de ciprés
Modelo de objetos de Cypress Page

Tabla de contenido:

¿Qué es el modelo de objetos de página?

El modelo de objetos de página es un patrón de diseño donde los objetos de página están separados de los scripts de prueba de automatización. Las pruebas de automatización nos brindan muchas ventajas que nos benefician en las pruebas; sin embargo, hay algunos resultados como la duplicación de código y un aumento en el riesgo de mantenibilidad a medida que crece el proyecto. Entendamos el significado de POM con un ejemplo.

Considere que tenemos varias páginas en nuestra aplicación, como la página de inicio de sesión, la página de registro y la página de reserva de vuelos.

  • La página de inicio de sesión contiene todos los elementos web de las funciones de inicio de sesión
  • El Registro contiene todos los métodos y elementos web del proceso de registro.
  • Los vuelos del libro contienen los elementos web de la página de reserva de vuelos.

Hay tres casos de prueba, a saber, TC1, TC2 y TC3.

  • TC1 contiene los casos de prueba de inicio de sesión.
  • TC2 contiene casos de prueba de inicio de sesión y registro
  • TC3 contiene casos de prueba de inicio de sesión, registro y reserva de vuelos
Ejemplo sin POM

Ahora, la página de inicio de sesión interactúa con TC1.

La página de registro debe interactuar con TC1 y TC2, y

La página de reserva de vuelos debe interactuar con TC1, TC2 y TC3

Como puede ver, existen funcionalidades comunes entre los tres casos de prueba. En lugar de escribir los métodos y localizadores de inicio de sesión en todos los archivos de casos de prueba, podemos tenerlos por separado y acceder a ellos a través de los archivos. De esta forma, el código no se repite y es fácilmente legible.

Una de las mejores prácticas en codificación es un concepto llamado SECO. Significa No te repitas a ti mismo. Como dice claramente el formulario completo, no debemos repetir las líneas de código una y otra vez. Para superar esto, Modelo de objeto de página juega un papel importante en las mejores prácticas de codificación.

Arquitectura del marco del modelo de objeto de página

La arquitectura del marco del modelo de objetos de página es una arquitectura probada que se puede personalizar con métodos simples. Hoy en día, casi todas las empresas siguen metodologías ágiles, que implican una integración, desarrollo y pruebas continuos. Los probadores de automatización mantienen el marco de prueba para trabajar junto con el proceso de desarrollo con el Modelo de objeto de página. Es un patrón de diseño significativo para mantener el marco de prueba de automatización a medida que el código crece con nuevas características.

El objeto de página es un patrón de diseño que es una clase orientada a objetos que interactúa con las páginas de la aplicación que estamos probando.. El objeto de página consta de Clase de página y Casos de pruebaClase de página consta de métodos y localizadores para interactuar con los elementos web. Creamos clases separadas para cada página de la aplicación. Crearemos métodos individuales para cada funcionalidad y accederemos a ellos en nuestro archivo de especificaciones.

Modelo de objeto de página

Ventajas de usar el modelo de objetos de página en Cypress

  1. Los métodos son Reutilizable en todo el proyecto y fácil de mantener cuando el proyecto crece. Las líneas de código se vuelven menos legible y optimizado
  2. El patrón de objeto de página sugiere que separemos operaciones y flujo que estamos realizando en la interfaz de usuario desde verificación pasos. Cuando seguimos el patrón POM, tendemos a escribir código limpio y fácilmente comprensible.
  3. Con el modelo de objetos de página, objetos y Casos de prueba son independientes entre sí. Podemos llamar a los objetos en cualquier parte del proyecto. De esta manera, si estamos usando diferentes herramientas como TestNG / JUnit para pruebas funcionales o Cucumber para pruebas de aceptación, entonces es fácil accesible.

Modelo de objeto de página paso a paso Cypress con ejemplo

Esta sección entenderá cómo crear un modelo de objeto de página en Cypress con ejemplos en tiempo real que podemos implementar en proyectos. Comprenderemos desde la configuración básica y el proceso paso a paso para crear un modelo de objetos de página.

Analicemos el escenario en el que escribiremos las funciones en este ejemplo.

  1. Navegue hasta https://admin-demo.nopcommerce.com/ sitio web
  2. Ingrese un nombre de usuario y contraseña válidos
  3. Haga clic en el botón Iniciar sesión
  4. Valide la URL si se adjunta con /admin después de iniciar sesión

Crearemos dos archivos: un archivo PageObject y un archivo de especificaciones para este ejemplo. ¡Empecemos!

Paso 1:: Abra nuestro proyecto en código VS. Crea una carpeta llamada PageObject bajo el integración carpeta. En esta carpeta, puede crear archivos de objeto de página para cualquier módulo.

Nueva carpeta denominada PageObject

Paso 2:: Crea un archivo llamado LoginPage.js bajo el PageObject carpeta. En LoginPage.js, escribiremos los métodos que involucran las funcionalidades de inicio de sesión.

Creación de LoginPage.js en la carpeta PageObject

Paso 3:: Comencemos a escribir nuestro primer método de prueba en el LoginPage.js expediente. Primero tenemos que crear una clase que exportaremos en nuestro archivo de especificaciones. Llamaremos a nuestra clase como Página de inicio de sesión

class LoginPage {

}

Basado en nuestro pseudocódigo, nuestro primer paso es navegar a la URL. Llamaremos a nuestro método como navigate(). Dentro de nuestro método de navegación, agregaremos el cy.visit() función de Cypress.

 navigate() {
        cy.visit('https://admin-demo.nopcommerce.com/')
    }

método de navegación

Paso 4:: Ahora, tendremos que ingresar el nombre de usuario en nuestro campo de correo electrónico. Nombraremos nuestro método como ingrese correo electrónico(). Primero, debemos obtener el localizador del campo de correo electrónico y acceder a ellos a través de cy.get() mando. Luego limpiaremos el campo usando el clear() comando y agregue el nombre de usuario usando el type() mando. En nuestro método, pasamos un parámetro nombre de usuario para pasar el valor en el archivo de especificaciones. De esta manera, lo mantendremos genérico para acceder a este método si se requiere una identificación de correo electrónico diferente.

enterEmail(username) {
        cy.get('[id=Email]').clear()
        cy.get('[id=Email]').type(username);
        return this
    }

En lugar de escribir el cy.get() comando dos veces en el código anterior, simplemente podemos repetirlos con el punto operador.

  enterEmail(username) {
        cy.get('[id=Email]')
            .clear()
            .type(username);
        return this
    }

método enterEmail

Te habrás dado cuenta return this en la línea 9. este indicando que el ingrese correo electrónico El método pertenece al particular Página de inicio de sesión clase. Básicamente, este representa la clase.

Paso 5:: Tenemos que crear un método para contraseñas similar a nuestro método enterEmail. Llamaremos a nuestro método de contraseña como enterPassword(). Inicialmente, obtendremos el localizador de la contraseña, borraremos el campo y escribiremos el valor de entrada. Pasaremos un parámetro a nuestro método llamado pswd y acceso en el type() mando.

enterPassword(pswd) {
    cy.get('[id=Password]')
        .clear()
        .type(pswd)
    return this
}
método enterPassword

Paso 6:: Nuestro último método sería hacer clic en el botón de inicio de sesión. Nombraremos nuestro método como submit(). Obtendremos el localizador y daremos clic en el botón usando el click() método de Cypress.

 submit() {
        cy.get('[type=submit]').click()
    }

método de envío

paso 7: Ahora, tenemos que exportar esta clase para usarla en nuestro archivo de especificaciones. Para esto, solo agregamos una línea fuera de nuestra clase, y podemos acceder fácilmente a ella en nuestro archivo de especificaciones.

export default LoginPage

comando de exportación

¡Viva! Hemos creado un archivo de objeto de página para nuestro proyecto. ¡Fue bastante simple y fácil!

Acceder a los objetos de página en el archivo de especificaciones

Ahora pasemos a nuestro archivo de caso de prueba. Tenemos que crear un archivo de especificaciones en nuestra carpeta de integración. Llamaremos a nuestro archivo de especificaciones POMDemo.spec.js.

Creación de archivo POMDemo.spec.js

Paso 1:: Para acceder a nuestros métodos en el archivo LoginPage.js, debemos importar en nuestro archivo de especificaciones. Importamos utilizando la declaración de importación. Deberíamos navegar hasta el archivo LoginPage.js usando ../

En nuestro caso, el camino es ../integration/PageObject/LoginPage. Por lo tanto, la declaración de importación se verá similar a la siguiente.

import LoginPage from "../integration/PageObject/LoginPage"

Paso 2:: Como usamos Mocha, escribiremos nuestro caso de prueba dentro describe() y it() cuadra. describe () representa un Banco de pruebas, y () representa un caso de prueba. Ambos bloques son una función y aceptan un parámetro de cadena que incluye el descripción del examen.

describe("Cypress POM Test Suite", function () {
})

Describe el bloque

Dentro del bloque de descripción, escribiremos nuestro it() agregando la descripción como inicio de sesión con credenciales válidas.

it("Login with valid credentials", function () {
       
    })

bloquea

Paso 3:: Para acceder a nuestros métodos desde nuestro archivo de objeto de página, debemos crear una instancia para nuestra clase de inicio de sesión. Para crear una instancia para la clase de inicio de sesión, debemos declarar una variable y asignarla a nuestro archivo de clase usando el Un nuevo palabra clave. Con la variable declarada, podemos acceder fácilmente a los métodos desde el archivo de objeto Page.

                                               const login = new LoginPage();
Instancia de una clase

Nota:: Con la variable login, podemos acceder a los métodos desde la clase de objeto Page. Cuando empezamos a escribir login. , el vscode enumerará las sugerencias de todos los métodos disponibles en el archivo LoginPage.js. ¡Esto nos ayuda a verificar que hemos exportado e importado nuestra clase correctamente!

Paso 4:: Llamemos a nuestro navigate() método para visitar la URL. Esta es la primera acción en nuestro caso de prueba.

/// <reference types="cypress" />

import LoginPage from "./PageObject/LoginPage"

describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
    });
});

Paso 5:: Debemos ingresar el nombre de usuario en el campo de correo electrónico. Accedemos al enterEmail() con inicie sesión objeto. enterEmail() el método acepta un parámetro nombre de usuario. Por tanto, deberíamos pasar el valor del nombre de usuario como cadena en nuestro archivo de especificaciones

/// <reference types="cypress" />

import LoginPage from "./PageObject/LoginPage"

describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
        login.enterEmail('admin@yourstore.com');
    })
})

Paso 6:: Similar al paso 5, deberíamos llamar a nuestro enterPassword() método pasando la contraseña como parámetro en la cadena.

/// <reference types="cypress" />

import LoginPage from "./PageObject/LoginPage"

describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
        login.enterEmail('admin@yourstore.com');
        login.enterPassword('admin');
    })
})

Paso 7:: A continuación, tenemos que hacer clic en el botón de inicio de sesión. Llamaremos al método submit() de nuestro archivo de objeto de página.

/// <reference types="cypress" />

import LoginPage from "./PageObject/LoginPage"

describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
        login.enterEmail('admin@yourstore.com');
        login.enterPassword('admin');
        login.submit();
    })
})

Paso 8:: Después de iniciar sesión, tenemos que afirmar la URL. Verificaremos si la URL es igual a la URL después de iniciar sesión. Para la afirmación, usaremos el Chai biblioteca de aserción, que está incorporada con Cypress.

/// <reference types="cypress" />

import LoginPage from "./PageObject/LoginPage"

describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
        login.enterEmail('admin@yourstore.com');
        login.enterPassword('admin');
        login.submit();
        cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/')
    })
})

Caso de prueba de inicio de sesión

La imagen de arriba representa el caso de prueba de inicio de sesión. Pudimos escribir un caso de prueba con un modelo de objetos de página con muy pocos pasos simples. Ahora ejecutemos el caso de prueba y veamos el resultado.

Abriremos el corredor de pruebas Cypress y haremos clic en el archivo de especificaciones y ejecutaremos nuestro caso de prueba. Mira esto artículo sobre cómo abrir Cypress Test Runner.

Resultado de la prueba en Cypress

¡Viva! Hemos escrito con éxito un caso de prueba que utiliza el modelo de objetos de página en Cypress. Podemos incorporar este patrón en proyectos en tiempo real. Hay muchas formas en que podemos escribir los métodos en un archivo de objeto de página. Les he mostrado un ejemplo que es estándar y funciona para cualquier proyecto. También puede escribir solo el función de retorno en el archivo de objeto de página y luego haga clic en y tipo directamente en nuestro archivo de especificaciones.

Veremos otro patrón que podemos usar en el proyecto. Este método también funcionará perfectamente bien.

En este tipo, solo devolveremos la función de localizador en nuestro método y realizaremos acciones en el archivo de prueba. Escribiremos código para el mismo escenario que vimos anteriormente.

Objeto de página - LoginPage.js

class LoginPage {
    navigate() {
        cy.visit('https://admin-demo.nopcommerce.com/')
    }

    enterEmail() {
        return cy.get('[id=Email]')
    }

    enterPassword() {
        return cy.get('[id=Password]')

    }

    submit() {
        return cy.get('[type=submit]')
    }
}
export default LoginPage

Como vimos anteriormente, solo escribimos el localizador dentro de nuestra función y lo devolvemos. El retorno representa que el método particular pertenece a la clase LoginPage.js. No estamos agregando ninguna acción en nuestros métodos.

Ejemplo de archivo de objeto de página

Archivo de especificaciones: POMDemo.spec.js

Veremos el ejemplo de cómo acceder a los métodos en el archivo de especificaciones.

/// <reference types="cypress" />

import LoginPage from "./PageObject/LoginPage"

describe("Cypress POM Test Suite", function () {
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
        login.enterEmail().clear()
        login.enterEmail().type('admin@yourstore.com');
        login.enterPassword().clear()
        login.enterPassword().type('admin');
        login.submit().click();
        cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/')
    });
});

Ejemplo de archivo de especificaciones

Aquí, llamamos al método desde el archivo PageObject y realizamos las acciones del caso de prueba. Entonces, primero, llamamos a nuestra variable de referencia inicie sesión y luego agregarlo con el método enterEmail() y finalmente agregando la acción tipo. En nuestro type(), estamos pasando el nombre de usuario VALORAMOS.

Resultado de la prueba

Como puede ver, todos los comandos se han ejecutado y el caso de prueba ha pasado.

Puede elegir el modelo de objeto de página que se adapte a su proyecto y a su opinión. No existe una regla particular para ceñirse a un solo procedimiento.

¿Cómo usar accesorios como fuente de datos de prueba en el modelo de objetos de página en Cypress?

En nuestros ejemplos de modelo de objeto de página, pasamos el valor de nombre de usuario y contraseña directamente en el archivo de objeto de página o directamente en el archivo de caso de prueba. Esta sección comprenderá cómo utilizar accesorios en Cypress para mantener los datos seguros y no expuestos. Deberíamos intentar mantener todas las credenciales y datos en un archivo y acceder a ellos. De esta manera, es fácil de mantener y los datos confidenciales como el nombre de usuario y la contraseña no quedan expuestos. Este método también es uno de los procedimientos que debemos seguir en Page Object Pattern.

Como se discutió anteriormente, El accesorio ayuda a almacenar datos en un archivo JSON o un archivo de Excel, o una biblioteca externa como Apache POI. Usaremos estos datos creando una variable y accederemos a ellos en nuestro archivo de especificaciones. Entendamos con un ejemplo.

Cypress proporciona una carpeta llamada "accesorios. " Crearemos un JSON archivo llamado Cartas credenciales.json en la carpeta 'Accesorios'.

Creación de archivos JSON

Declaremos nuestros valores de nombre de usuario, contraseña y URL que necesitamos validar en un formato JSON en el credentials.json archivo.

{
    "username" : "admin@yourstore.com",
    "password" : "admin",
    "adminUrl" : "https://admin-demo.nopcommerce.com/admin/"
}

Pasar valores en el archivo credentials.json

Acceder a los valores del archivo JSON en el archivo del caso de prueba

Como hemos definido los valores en nuestro archivo JSON, accederemos a ellos en nuestro archivo de caso de prueba usando Partidos de fútbol de Cypress. Accederemos al valor JSON con este palabra clave. Envolvemos la función del aparato en un antes de() bloquear.

describe("Cypress POM Test Suite", function () {
 
before(function () {
        cy.fixture('credentials').then(function (testdata) {
            this.testdata = testdata
        })
})

cy.fixture ('credentials'). then (function (testdata) {this.testdata = testdata}) - esta línea representa que estamos pasando el credentials.json archivo como parámetro para nuestro cy.fixture () mando. Aquí, no estamos obligados a pasar si es un archivo JSON. Simplemente pase el nombre del archivo solo. Más tarde, pasamos datos de prueba como parámetro en la función y acceder al datos de prueba variable usando este.

/// <reference types="cypress" />

import LoginPage from "./PageObject/LoginPage"

describe("Cypress POM Test Suite", function () {

    before(function () {
        cy.fixture('credentials').then(function (testdata) {
            this.testdata = testdata
        })
    })
    it("Login with valid credentials", function () {
        const login = new LoginPage();
        login.navigate();
        login.enterEmail(this.testdata.username)
        login.enterPassword(this.testdata.password)
        login.submit();
        cy.url().should('be.equal', this.testdata.adminUrl)
    });
});

login.enterEmail (this.testdata.username) - Esto obtendrá el valor del nombre de usuario del archivo credentials.json y lo completará en el campo de correo electrónico.

login.enterPassword (this.testdata.password) - Esto obtendrá el valor de la contraseña del archivo credentials.json y lo completará en el campo de contraseña

cy.url (). should ('be.equal', this.testdata.adminUrl) - Esto obtendrá el adminUrl del archivo credentials.json y validará en la aserción

Pasar los datos del archivo JSON al archivo de especificaciones

Ahora, ejecutemos el caso de prueba para obtener el resultado.

Resultado de la prueba

Como podemos ver, los casos de prueba se han ejecutado y han pasado. Este ejemplo le ayudará a escribir un caso de prueba básico basado en datos. Puedes incorporarlo en tu proyecto usando este método. Puede crear nuevos archivos JSON en la carpeta Fixture, agregar valores relacionados con los datos de prueba y acceder a ellos a través de cualquier archivo de prueba.

Preguntas Frecuentes

¿Cypress es compatible con el modelo de objetos de página?

Por supuesto. Cypress ofrece toda la flexibilidad para jugar con páginas y objetos en el repositorio. Es fácil de implementar.

¿Qué modelo de objeto de página debería utilizar de los ejemplos anteriores?

No existe una regla particular para ceñirse a una sola forma de Modelo de objetos de página. Puede utilizar cualquier modelo que se haya comentado anteriormente. Puede personalizar el modelo según su proyecto.

¿Por qué debería usar accesorios en el modelo de objetos de página en Cypress?

Fixture ayuda a almacenar datos confidenciales como nombre de usuario, contraseña y URL en un archivo separado como JSON o Excel. Esto garantiza la seguridad de la aplicación y accede a ellos fácilmente en cualquier archivo del proyecto. Para acceder al archivo JSON, utilizamos accesorios para usarlo en nuestro archivo de especificaciones.

Acerca de Aishwarya Lakshmi

Soy un entusiasta de las pruebas y tengo más de 2 años de experiencia en el dominio de las pruebas. Me apasionan 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 lo que 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.
Conectémonos a través de LinkedIn: https://www.linkedin.com/in/aishwarya-lakshmi-n-46903217a

Frikis Lambda