Modelo de objeto de página, comúnmente conocido como POM, es un patrón popular en cualquier marco de automatización. El modelo de objetos de página 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 la reducción de la duplicación de código y el aumento de la capacidad de mantenimiento y la legibilidad. Cypress nos brinda la flexibilidad de incorporar el modelo de objetos de página en el script de prueba. En este artículo, veremos cómo crear un modelo de objeto de página en escalón de ciprés paso a paso con ejemplos.

Tabla de contenido:

• ¿Qué es el modelo de objetos de página?
• Arquitectura del marco del modelo de objeto de página
• Ventajas de usar el modelo de objetos de página en Cypress
• Modelo de objeto de página paso a paso Cypress con ejemplo
• Acceder a los objetos de página en el archivo de especificaciones
• ¿Cómo usar accesorios como fuente de datos de prueba en el modelo de objetos de página en Cypress?
• Acceder a los valores del archivo JSON en el archivo del caso de prueba
• Preguntas frecuentes

¿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

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 marco de modelo de objeto de página La arquitectura es una arquitectura comprobada que se puede personalizar con métodos simples. Hoy en día, casi todas las empresas siguen metodologías ágiles, que implican integración, desarrollo y pruebas continuas. 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 significativo patrón de diseño en el mantenimiento del marco de prueba de automatización a medida que el código crece con nuevas funciones.

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 prueba. Clase 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.

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

1. Los métodos son reutilizables 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 comprenderá cómo crear un modelo de objeto de página en Cypress con ejemplos en tiempo real que podemos implementar en los proyectos. Comprenderemos la configuración básica y el proceso paso a paso para crear un modelo de objeto de página.

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

1. Navegue hasta https://admin-demo.nopcommerce.com/ página 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 Objeto de página bajo el integración carpeta. En esta carpeta, puede crear archivos de objeto de página para cualquier módulo.

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

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

clase Página de inicio de sesión { }

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.

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

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(nombre de usuario) { cy.get('[id=Correo electrónico]').clear() cy.get('[id=Correo electrónico]').type(nombre de usuario); devolver esto}

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

  enterEmail(nombre de usuario) { cy.get('[id=Correo electrónico]') .clear() .type(nombre de usuario); devolver esto}

Te habrás dado cuenta return this en la línea 9. así indicando que el ingrese correo electrónico El método pertenece al particular Página de inicio de sesión clase. Básicamente, así 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 contraseña y acceso en el type() mando.

enterPassword(pswd) { cy.get('[id=Contraseña]') .clear() .type(pswd) devolver esto }

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.

 enviar() { cy.get('[tipo=enviar]').click() }

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.

exportar página de inicio de sesión predeterminada

¡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.

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.

importar la página de inicio de sesión desde "../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("Suite de prueba Cypress POM", función () { })

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

it("Iniciar sesión con credenciales válidas", función () { })

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 nueva palabra clave. Con la variable declarada, podemos acceder fácilmente a los métodos desde el archivo de objeto Page.

                                               const inicio de sesión = nueva página de inicio de sesión ();

Note: 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.

/// import LoginPage from "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { it("Iniciar sesión con credenciales válidas", 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 el 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

/// importar LoginPage desde "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { it("Iniciar sesión con credenciales válidas", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('[email protected]'); }) })

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

/// importar LoginPage desde "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { it("Iniciar sesión con credenciales válidas", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('[email protected]'); 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.

/// importar LoginPage desde "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { it("Iniciar sesión con credenciales válidas", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('[email protected]'); login.enterPassword('admin'); iniciar sesión.enviar(); }) })

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.

/// importar LoginPage desde "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { it("Iniciar sesión con credenciales válidas", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('[email protected]'); login.enterPassword('admin'); iniciar sesión.enviar(); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }) })

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.

¡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 { navegar() { cy.visit('https://admin-demo.nopcommerce.com/') } enterEmail() { return cy.get('[id=Email]') } enterPassword() { return cy.get('[id=Contraseña]') } enviar() { return cy.get('[tipo=enviar]') } } exportar página de inicio de sesión predeterminada

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.

Archivo de especificaciones: POMDemo.spec.js

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

/// importar LoginPage desde "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { it("Iniciar sesión con credenciales válidas", function () { const login = new LoginPage(); login.navigate(); login.enterEmail().clear() login.enterEmail().tipo('[email protected]'); login.enterPassword().clear() login.enterPassword().type('admin'); iniciar sesión.enviar().hacer clic(); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });

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 nuestras type(), estamos pasando el nombre de usuario propuesta de.

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 ciprés para mantener los datos seguros y no expuestos. Deberíamos tratar de 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 están expuestos. Este método también es uno de los procedimientos que debemos seguir en el patrón de objeto de página.

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'.

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

{ "nombre de usuario" : "[email protected]", "contraseña": "admin", "adminUrl": "https://admin-demo.nopcommerce.com/admin/" }

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 así 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 credenciales.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 así.

/// import LoginPage from "./PageObject/LoginPage" describe("Cypress POM Test Suite", function () { before(function () { cy.fixture('credentials').then(function (testdata) { this.testdata = testdata }) }) it("Iniciar sesión con credenciales válidas", 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

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

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.

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.