Migrando Pruebas de Cypress a Playwright con Copilot

Cuando recibimos una solicitud para migrar las pruebas de Cypress a Playwright, esperábamos un proceso de reescritura largo y tedioso.Sorprendentemente, con la ayuda de GitHub Copilot, logramos iniciar la migración de Cypress a Playwright en solo un par de días y mantener nuestra tubería de CI en funcionamiento todo el tiempo sin interrumpir ningún proceso de prueba.En este artículo, compartiré cómo abordamos esta migración, las lecciones que aprendimos en el camino y cómo la migración de código asistida por IA puede reducir drásticamente la carga manual de las transiciones de framework.Contexto del ProyectoEl proyecto era una plataforma de salud compleja con mucho en funcionamiento en segundo plano. Nuestra configuración de pruebas incluía:Pruebas de extremo a extremo (E2E) e integraciónUna arquitectura TAF personalizada con configuraciones, desmontajes y creación de entidadesConfiguraciones de múltiples entornosDatos dinámicos y lógica de navegación profundaEn total, teníamos 148 pruebas de E2E ejecutándose en Cypress, todas funcionando bien, pero la organización quería estandarizar las herramientas de QA entre equipos, lo que significaba una cosa: migración a Playwright.¿Por qué usar GitHub Copilot para la migración?Cuando llegó la solicitud de migración, vi una oportunidad para experimentar con la automatización de pruebas de GitHub Copilot. En lugar de reescribir manualmente cientos de archivos de prueba, quería ver hasta dónde podíamos llevar la asistencia de IA para automatizar la conversión de sintaxis de Cypress a Playwright.Y, honestamente, funcionó mucho mejor de lo esperado.GitHub Copilot manejó la mayor parte de la traducción repetitiva (selectores, comandos, manejo async, etc.), permitiéndonos enfocarnos en los ajustes de infraestructura y la fineza.En 1-2 días, ya teníamos un prototipo funcional del framework de automatización de pruebas de Playwright.Dos Advertencias ClaveSiempre Verifica el Código Generado por IAAunque la migración de código asistida por IA acelera las cosas, debes revisar cada línea. Las migraciones de infraestructura pueden introducir fácilmente errores sutiles o regresiones de rendimiento. Piensa en Copilot como tu compañero programador, no como un piloto automático.Mantén el Antiguo Framework en Funcionamiento hasta el FinalNunca bloquees lanzamientos o regresiones durante la migración. Mantén tus pruebas de Cypress corriendo en CI hasta que los conjuntos correspondientes estén completamente estables en Playwright. Una vez que un conjunto esté migrado y validado, elimínalo de Cypress y cambia CI para ejecutarlo en Playwright.Este despliegue gradual asegura cero tiempo de inactividad y cobertura de pruebas continua a lo largo del proceso.Flujo de Trabajo para Migrar de Cypress a PlaywrightUna vez que el trabajo preliminar fue claro, pasamos a la migración práctica. A continuación se muestra el flujo de trabajo que nos ayudó a ejecutar ambos frameworks en paralelo, mantener la estabilidad del CI y comenzar a migrar pruebas de manera incremental, sin bloquear lanzamientos en curso.1. Inicializa Playwright y Crea la Estructura de CarpetaEl primer paso fue inicializar Playwright y crear una estructura de carpeta limpia y aislada. Queríamos que ambos frameworks coexistieran en el mismo repositorio, para poder ejecutarlos simultáneamente durante la transición.Esa configuración nos permitió:Migrar gradualmenteComparar resultados y tiempos entre Cypress y PlaywrightMantener las tuberías de CI en funcionamiento para ambosEjemplo de inicialización:Aquí está la estructura de carpetas propuesta que utilizamos para Playwright:├── cypress/ │ ├── app/ │ ├── downloads/ │ ├── e2e/ │ ├── fixtures/ │ ├── screenshots/ │ ├── support/ │ └── videos/ ├── playwright/ │ ├── app/ │ │ ├── components/ │ │ ├── fixtures/ │ │ └── pageobjects/ │ ├── constants/ │ ├── helpers/ │ ├── reports/ │ ├── test-results/ │ └── tests/ ├── .gitignore ├── package.json ├── playwright.config.ts ├── smoke.config.ts ├── tsconfig.json 2. Configura Archivos `tsconfig` Separados para Cada FrameworkUno de los problemas iniciales que enfrentamos fueron los conflictos de TypeScript; ambos frameworks definen nombres de métodos similares (`expect`, `request`, etc.), y compartir un solo `tsconfig.json` llevó a errores de compilación.La solución fue simple: dividir las configuraciones de TypeScript. Esta estructura asegura que cada framework inicialice sus propias definiciones de tipo y evite colisiones de tipo:├── tsconfig.json ├── tsconfig.cypress.json ├── tsconfig.playwright.json tsconfig.json PrincipalAñadir la opción `composite` para soportar referencias de proyectos.tsconfig.jsonjson { "compilerOptions": { "composite": true } } tsconfig.cypress.jsonjson { "extends": "./tsconfig.json", "compilerOptions": { "types": ["cypress", "@testing-library/cypress", "node"], "isolatedModules": false }, "include": ["cypress/**/*.ts"] } tsconfig.playwright.jsonjson { "extends": "./tsconfig.json", "compilerOptions": { "types": ["node", "@playwright/test"] }, "include": ["playwright/**/*.ts", "playwright.config.ts"] } Con esta separación en su lugar, ambos frameworks pudieron coexistir pacíficamente en un repositorio — sin más conflictos de compilador y sin riesgo de inicializar accidentalmente métodos compartidos dos veces.3. Crea un Prompt para Automatizar la Migración con GitHub CopilotUna vez que Playwright estuvo inicializado y el proyecto estructurado, era hora de dejar que GitHub Copilot ayudara con la parte pesada.Para hacer esto, creamos un prompt personalizado que define cómo debería comportarse Copilot al reescribir pruebas de Cypress a Playwright. El prompt le dice al agente qué hacer, cómo hacerlo y qué ignorar, proporcionando resultados consistentes en todas las migraciones.Cómo Añadir el PromptDentro de tu repositorio de GitHub, abre el ícono de engranaje ⚙️ en Copilot Chat y crea un nuevo prompt. El archivo se guardará automáticamente en: `./github/prompts/`Puedes nombrarlo algo como `migrate_tests.md`.Ejemplo de prompt:--- mode: agent --- Eres un Generador de Pruebas de Playwright, un experto en automatización de navegadores y pruebas de extremo a extremo. Tu especialidad es crear pruebas de Playwright robustas y confiables que simulan de manera precisa las interacciones del usuario y validan el comportamiento de la aplicación. Tu tarea es ayudar a migrar pruebas existentes de Cypress a pruebas de Playwright. Las pruebas de Cypress, el objeto de página, los componentes y los archivos de helpers se proporcionan como entrada, y necesitas generar código de prueba equivalente en Playwright. Devuelve TODO el código migrado al chat. Al generar el código de prueba de Playwright o cualquier objeto de página, asegúrate de que:

La estructura de la prueba sigue la misma estructura que las pruebas de Cypress. Crea un fixture global para la configuración y desmontaje y reutilízalo en las pruebas. Todas las interacciones del usuario (clics, escritura, navegación) se traducen con precisión a la sintaxis de Playwright en objetos de página y archivos de prueba. Las aserciones en Cypress se convierten en aserciones equivalentes de Playwright. Ignora las partes de espionaje y simulación de red de las pruebas de Cypress. Comenta todos los métodos con esperas (por ejemplo, cy.wait) en el código de Playwright. No utilices métodos get en los objetos de página; utiliza métodos directos en su lugar backbackItem = () =&gt; this.page.locator('[id="item_4_title_link"]');

Por qué Esto AyudaEste tipo de prompt estructurado permite que GitHub Copilot se comporte más como un asistente de migración especializado, no como un generador de código de propósito general.Con el contexto y las reglas adecuadas, Copilot puede automáticamente:Reescribir grandes bloques de pruebas de Cypress a sintaxis de PlaywrightMantener consistencia en la estructura de carpetas y pruebas Reducir el tiempo de conversión manual en un 70-80%Esencialmente, estás creando tu propia cadena de herramientas de migración de IA, adaptada a la estructura y convenciones de tu proyecto.4. Selecciona Modo de Agente y Ejecuta la Migración Paso a PasoUna vez que el prompt estuvo listo, el siguiente paso fue ejecutar realmente la migración con GitHub Copilot en modo de agente. En esta fase, dejamos que el modelo de IA procesara cada archivo—objetos de página, componentes, helpers y finalmente las pruebas—uno por uno.Para esta tarea, utilizamos el modelo GPT-4.1, que ofrece las transformaciones de código más consistentes y conscientes del contexto.Cómo Iniciar la Migración1. Abre Copilot Chat en VS Code2. Usa / para seleccionar el archivo de prompt que creaste anteriormente3. Usa # para seleccionar un archivo específico (por ejemplo, una prueba de Cypress o un objeto de página) que deseas migrarCopilot ahora aplicará tu prompt de migración y generará una versión compatible con Playwright del archivo directamente en el chat.Ejemplo de la migración del objeto de página inventoryPagets Cypress import { ItemComponent } from "../components/item.component"; import Common from "./common"; class InventoryPage extends Common { item = new ItemComponent(); backbackItem = () => cy.get("#item_4_title_link"); backbackAddItemButton = () => cy.getByTestId("add-to-cart-sauce-labs-backpack"); bikeLightsAddItemButton = () => cy.getByTestId("add-to-cart-sauce-labs-bike-light"); backbackRemoveItemButton = () => cy.getByTestId("remove-sauce-labs-backpack"); shoppingCartLogo = () => cy.get("#shopping_cart_container"); clickBackbackAddItemButton = () => this.backbackAddItemButton().click(); clickBikeLightsAddItemButton = () => this.bikeLightsAddItemButton().click(); clickBackbackRemoveItemButton = () => this.backbackRemoveItemButton().click(); assertCartLogoItems = (itemsNum: number) => this.shoppingCartLogo().should("have.text", itemsNum); } export default new InventoryPage(); ts Playwright import { Page, Locator, expect } from "@playwright/test"; import Common from "./common"; class InventoryPage extends Common { constructor(page: Page) { super(page); this.item = new ItemComponent(page); } // Locators backbackItem(): Locator { return this.page.locator("#item_4_title_link"); } backbackAddItemButton(): Locator { return this.page.getByTestId("add-to-cart-sauce-labs-backpack"); } bikeLightsAddItemButton(): Locator { return this.page.getByTestId("add-to-cart-sauce-labs-bike-light"); } backbackRemoveItemButton(): Locator { return this.page.getByTestId("remove-sauce-labs-backpack"); } shoppingCartLogo(): Locator { return this.page.locator("#shopping_cart_container"); } // Actions async clickBackbackAddItemButton(): Promise { await this.backbackAddItemButton().click(); } async clickBikeLightsAddItemButton(): Promise { await this.bikeLightsAddItemButton().click(); } async clickBackbackRemoveItemButton(): Promise { await this.backbackRemoveItemButton().click(); } async assertCartLogoItems(itemsNum: number): Promise { await expect(this.shoppingCartLogo()).toHaveText(String(itemsNum)); } } export default InventoryPage; Ajustando el Comportamiento del AgenteNo te preocupes si la primera salida no es perfecta. Según nuestra experiencia, el agente de IA generalmente obtiene del 60 al 70 % del código correcto en el primer intento. La clave es mantener el contexto de conversación activo; sigue refinando el mismo hilo de chat pidiendo correcciones o ajustes. A medida que haces esto, Copilot comienza a aprender los patrones de tu proyecto y produce código más preciso y reutilizable.Esencialmente, cuanto más iteraciones hagas en el mismo chat, mejor se vuelve la calidad de la migración.Orden de Migración: Archivos Primero, Luego PruebasPara mantener las dependencias consistentes y evitar referencias faltantes, sigue este orden:1. Genera archivos que no son de prueba primero:Objetos de PáginaComponentesArchivos de AyudaConstantes2. Una vez que todos los archivos de soporte estén generados y verificados, agrega la carpeta #app al contexto del chat, luego migra los archivos de prueba en sí.Paso de VerificaciónCuando se genera una prueba de Playwright:1. Revisa el código: confirma que los locators de página, los pasos de prueba y las aserciones sean correctos.2. Ejecuta la prueba utilizando tu CLI de Playwright para asegurarte de que se ejecute correctamente.3. Corrige pequeños errores de sintaxis o desajustes de fixtures si Copilot malinterpretó un comando de Cypress.Al verificar después de cada archivo, mantienes la migración estable e incremental, evitando depuraciones a gran escala más adelante.Ejemplo de la prueba inventoryPage migrada que está pasando con éxito:ts Cypress import inventoryPage from "cypress/app/pageobjects/inventoryPage"; import loginPage from "cypress/app/pageobjects/loginPage"; import { itemsNames } from "../../fixtures/data.json"; describe("Pruebas de InventoryPage", () => { beforeEach(() => { loginPage.loginWithValidData(); }); it("El usuario debería añadir un ítem al carrito", () => { inventoryPage.item.itemByName("Bike Light").should("have.text", itemsNames.bikeLight); inventoryPage.item.addToCartByName("Bike Light"); inventoryPage.assertCartLogoItems(1); }); it("El usuario debería eliminar un ítem del carrito", () => { inventoryPage.backbackItem().should("have.text", itemsNames.backpackItemName); inventoryPage.clickBackbackAddItemButton(); inventoryPage.assertCartLogoItems(1); inventoryPage.clickBackbackRemoveItemButton(); inventoryPage.shoppingCartLogo().should("not.have.text"); }); it("El usuario debería añadir múltiples ítems al carrito", () => { inventoryPage.backbackItem().should("have.text", itemsNames.backpackItemName); inventoryPage.clickBackbackAddItemButton(); inventoryPage.assertCartLogoItems(1); inventoryPage.clickBikeLightsAddItemButton(); inventoryPage.assertCartLogoItems(2); }); }); ts Playwright import { test, expect } from "../fixtures/test.fixture"; import { itemsNames } from "../../constants/data.json"; // Pruebas de InventoryPage migradas de Cypress a Playwright test.describe("Pruebas de InventoryPage", () => { test.beforeEach(async ({ pageManager }) => { await pageManager.loginPage.loginWithValidData(); }); test("El usuario debería añadir un ítem al carrito", async ({ pageManager }) => { await expect( pageManager.inventoryPage.item.itemByName(itemsNames.bikeLight)).toHaveText(itemsNames.bikeLight); await pageManager.inventoryPage.item.addToCartByName(itemsNames.bikeLight); await pageManager.inventoryPage.assertCartLogoItems(1); }); test("El usuario debería eliminar un ítem del carrito", async ({ pageManager }) => { await expect( pageManager.inventoryPage.backbackItem()).toHaveText(itemsNames.backpackItemName); await pageManager.inventoryPage.clickBackbackAddItemButton(); await pageManager.inventoryPage.assertCartLogoItems(1); await pageManager.inventoryPage.clickBackbackRemoveItemButton(); await expect(pageManager.inventoryPage.shoppingCartLogo()).not.toHaveText(/\d/); // No debería tener ningún texto numérico }); test("El usuario debería añadir múltiples ítems al carrito", async ({ pageManager }) => { await expect(pageManager.inventoryPage.backbackItem()).toHaveText(itemsNames.backpackItemName); await pageManager.inventoryPage.clickBackbackAddItemButton(); await pageManager.inventoryPage.assertCartLogoItems(1); await pageManager.inventoryPage.clickBikeLightsAddItemButton(); await pageManager.inventoryPage.assertCartLogoItems(2); }); }); 5. Estructura Final del Repositorio Después de la MigraciónUna vez que la migración se completó, nuestro repositorio alcanzó un estado dual estable: funcionando completamente tanto Cypress como Playwright lado a lado. Esta estructura nos permitió:Deprecación gradual de los conjuntos de pruebas de Cypress a medida que eran reemplazadosMantener operacional las tuberías de CI/CD para ambos frameworksMantener una arquitectura limpia y modularA continuación se muestra la estructura final después de completar el flujo de trabajo de migración.Estructura Final de Carpetas├── .env ├── .gitignore ├── readme.md ├── package.json ├── playwright.config.ts ├── smoke.config.ts ├── tsconfig.cypress.json ├── tsconfig.playwright.json ├── tsconfig.json ├── .github/ │ ├── prompts/ │ └── workflows/ ├── cypress/ │ ├── app/ │ ├── downloads/ │ ├── e2e/ │ ├── fixtures/ │ ├── screenshots/ │ ├── support/ │ └── videos/ ├── playwright/ │ ├── app/ │ ├── constants/ │ ├── helpers/ │ ├── reports/ │ ├── test-results/ │ └── tests/ Notas sobre la Estructura.github/prompts/ — contiene tus prompts de migración de Copilot. Mantener estos versionados te permite actualizarlos o reutilizarlos para futuras migraciones de framework o refactorizaciones..github/workflows/ — contiene tus definiciones de CI/CD. Puedes ejecutar trabajos de Playwright y Cypress en paralelo hasta la completa deprecación del viejo framework.La carpeta playwright/ — ahora actúa como la fuente principal de automatización en adelante. Espeja la estructura de la implementación anterior de Cypress para facilitar la incorporación y asegurar consistencia.tsconfig.playwright.json y tsconfig.cypress.json — permanecen separadas para un aislamiento completo de tipos, evitando conflictos durante las compilaciones.Esta estructura no solo apoyó una transición suave, sino que también posicionó al proyecto para una escalabilidad futura, flexibilidad de CI y propiedad modular de pruebas entre equipos.Consejos Prácticos y Lecciones AprendidasDespués de migrar casi 150 pruebas con Copilot y Playwright, aquí hay algunas lecciones clave y consejos del mundo real que hicieron el proceso más fluido (y nos ahorraron algunos dolores de cabeza).Consejos Generales Relacionados con IALa IA miente — a menudo de manera convincente. Siempre verifica cada línea de código que genera la IA. Nunca confíes en ella ciegamente, especialmente durante las migraciones de infraestructura.Adhiérete a convenciones de nombres consistentes.Mantén nombres de variables y métodos idénticos entre frameworks; esto ayuda al Agente de IA a migrar el código con más precisión y te facilita encontrarlos e importarlos más tarde.Reconstruye las importaciones manualmente.Copilot tiende a arruinar las rutas de importación. A menudo es más rápido eliminarlas y volver a importarlas manualmente, o configurar importaciones globales como: import x from "playwright/foo/bar";

Reutiliza el mismo chat para todas las migraciones. <pMantén un solo hilo de chat de Copilot; esto construye contexto y “recuerda” las convenciones de tu proyecto, llevando a mejores resultados.

Descompón las tareas de migración. Genera de 1 a 2 archivos a la vez. Tareas más pequeñas producen salidas más precisas y hacen que la validación manual sea más fácil.

Consejos Específicos de Playwright Nunca crees múltiples instancias del mismo Objeto de Página sin necesidad. Hacer esto puede causar estados inconsistentes o selectores rotos al navegar entre páginas. ¿La solución? Implementa un Administrador de Páginas que mantenga todos los objetos de página accesibles a través de una única instancia.

Aquí hay un ejemplo de configuración mínima:

ts // login.page.ts class LoginPage extends Common { async clickLoginButton(): Promise { await this.loginButton().click(); } } export default LoginPage; //----------------------------------------------------------- //PageManager.ts export class PageManager { readonly loginPage: LoginPage; constructor(page: Page) { this.loginPage = new LoginPage(page); } } //----------------------------------------------------------- //test.fixture.ts export const test = base.extend ({ pageManager: async ({ page }, use) => { const manager = new PageManager(page); await use(manager); }, }); export { expect }; //----------------------------------------------------------- //userLogin.spec.ts test("El usuario debería iniciar sesión con datos válidos", async ({ pageManager }) => { await pageManager.loginPage.clickLoginButton(); }); Otros Consejos TécnicosElimina todos los prefijos “get” de los locators que genera el Agente de IA; utiliza métodos de localización directos en su lugar.No olvides configurar dotenv para variables de entorno y credenciales.Personaliza tu configuración de Playwright para que todos los informes se generen en la carpeta de Playwright, de modo que la raíz de tu proyecto se mantenga limpia:ts reporter: [["html", { open: "never", outputFolder: "./playwright/reports/" }]], outputDir: "./playwright/test-results", EpílogoNo incluí la configuración de ESLint aquí, ya que varía de proyecto a proyecto. La única recomendación universal que puedo hacer es instalar el plugin de ESLint de Playwright para una mejor aplicación de reglas:eslint-plugin-playwrightSi deseas explorar un ejemplo completo de trabajo de esta migración, incluyendo archivos de prompt, tsconfigs y configuración de CI, puedes consultar todo el repositorio aquí:Ejemplo de Repo