Emulando dispositivos

Curso de Cypress Avanzado

Introducción al curso

Presentación del curso

Instalación de recursos

Cookies y Localstorage

Local Storage

Emulando dispositivos

Instalando plugins

Usando xpaths

Flaky tests

¿Qué son los Flaky Tests?

Interceptando Network Requests

Interceptando request

Buenas prácticas

Patrones de diseño: Page Object Model

Custom commands

Variables de entorno

Cypress.env

Visual testing

Seguridad

Seguridad en Cypress

Navegación entre pestañas del mismo sitio

Navegar entre diferentes dominios en diferentes tests

Navegar entre diferentes dominios en diferentes tests y compartir información entre ambas páginas

Data Driven Test

Cypress fixtures

BDD

Configuración de plugins y steps dinámicos

Shared Step Definitions

Data Driven Test por medio de Scenarios Outline

Reportes

Múltiples reportes

Allure report

Docker

Cypress con docker container

Dashboard

Usando dashboard de Cypress

Alternativas gratuitas al Dashboard de Cypress

CI/CD

Jenkins

Final

Cypress Scenario recorder plugin

No tienes acceso a esta clase

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

Si ya tienes una cuenta,

Recursos

Aportes 4

Preguntas 0

Ordenar por:

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

Iván Ceballos Vega

hace 2 años

El array de devices que usa el profesor en esta clase es el siguiente:

const DEVICES = [
    { viewport: "macbook-15", type: "desktop" },
    { viewport: "ipad-2", type: "mobile" },
    { viewport: [1280, 720], type: "desktop" },
    { viewport: [375, 667], type: "mobile" },
];

Carlos Rubio Gallego

hace 2 años

Otra manera de realizar las validaciones es así:

DEVICES.forEach((device) => {
		const { viewport, type } = device
		const [width, height] = Array.isArray(viewport) ? viewport : [viewport]

		it(`Validando device ${viewport}`, () => {
			cy.viewport(width, height)
			cy.visit('/')

			if (type === 'mobile') {
				cy.contains('Safari').should('not.be.visible')
			} else {
				cy.contains('Safari').should('be.visible')
			}
		})
	})

Mario Alexander Vargas Celis

hace 3 meses

```js const dispositivos =[ {viewport: "macbook-15", type: "desktop"}, {viewport: "ipad-2", type: "mobile"}, {viewport: [1280, 720], type: "desktop"}, {viewport: [375, 667], type: "mobile"}, ]; describe('Dispositivos moviles', ()=>{ /*it('Usando el viewport',()=>{ cy.viewport(1280, 720); cy.visit('/'); cy.contains('Safari').should("exist"); }); it('Usando el viewport movil',()=>{ cy.viewport(375, 667); cy.visit('/'); cy.contains('Safari').should("not.be.visible"); }); it('Usando el viewport desktop preset',()=>{ cy.viewport("macbook-15"); cy.visit('/'); cy.contains('Safari').should("exist"); }); it('Usando el viewport movil preset',()=>{ cy.viewport("iphone-6+"); cy.visit('/'); cy.contains('Safari').should("exist"); });*/ dispositivos.forEach(device=>{ it(`Prueba con el viewport ${device.viewport}`, () => { if (Cypress._.isArray(device.viewport)) { cy.viewport(device.viewport[0], device.viewport[1]); } else { cy.viewport(device.viewport); } cy.visit('/'); if(device.type === 'desktop') { cy.contains("Safari").should("exist"); }else{ cy.contains("Safari").should("not.be.visible"); } }); }); }); ```const dispositivos =\[ {viewport: "macbook-15", type: "desktop"}, {viewport: "ipad-2", type: "mobile"}, {viewport: \[1280, 720], type: "desktop"}, {viewport: \[375, 667], type: "mobile"},]; describe('Dispositivos moviles', ()=>{ /\*it('Usando el viewport',()=>{ cy.viewport(1280, 720); cy.visit('/'); cy.contains('Safari').should("exist"); }); it('Usando el viewport movil',()=>{ cy.viewport(375, 667); cy.visit('/'); cy.contains('Safari').should("not.be.visible"); }); it('Usando el viewport desktop preset',()=>{ cy.viewport("macbook-15"); cy.visit('/'); cy.contains('Safari').should("exist"); }); it('Usando el viewport movil preset',()=>{ cy.viewport("iphone-6+"); cy.visit('/'); cy.contains('Safari').should("exist"); });\*/ dispositivos.forEach(device=>{ it(`Prueba con el viewport ${device.viewport}`, () => { if (Cypress.\_.isArray(device.viewport)) { cy.viewport(device.viewport\[0], device.viewport\[1]); } else { cy.viewport(device.viewport); } cy.visit('/'); if(device.type === 'desktop') { cy.contains("Safari").should("exist"); }else{ cy.contains("Safari").should("not.be.visible"); } }); });});

Gradiweb SAS

hace 9 meses

Aquí tienes una solución potencial para gestionar entornos diversos en un contexto con numerosas pruebas: const devicesDesktop = \[ { viewport: \[1400, 900], type: "desktop" }, { viewport: \[1920, 1080], type: "desktop" }]; const devicesMobile = \[ { viewport: \[428, 926], type: "mobile" },]; describe('template spec', () => { beforeEach(() => { cy.session("session", () => { cy.visit('/'); cy.get('#password').type('Gradiweb', { delay: 100, log: false }).type('{enter}'); }); }); devicesDesktop.forEach(device => { context('desktop test', () => { it(`passes ${device.viewport} - ${device.type}`, () => { cy.viewport(device.viewport\[0], device.viewport\[1]); cy.visit('/'); }); }); }); devicesMobile.forEach(device => { context('mobile test', () => { it(`passes ${device.viewport} - ${device.type}`, () => { cy.viewport(device.viewport\[0], device.viewport\[1]); cy.visit('/'); }); }); });});