02 - Playwright - Cómo instalar y ejecutar el script de prueba

Mr. Bones · Septiembre 16, 2023, 07:07:39 PM

Playwright

Primeros pasos con la configuración de Playwright

Requisitos previos:

1 - Instale Visual Studio Code: descargue e instale Visual Studio Code (No tienes permitido ver los links. Registrarse o Entrar a mi cuenta).

2 - Instalar NodeJS: Descargar e instalar No tienes permitido ver los links. Registrarse o Entrar a mi cuenta.

Cómo instalar y ejecutar el script de prueba de Playwright

A continuación en 8 pasos te voy a mostrar como instalarlo para que puedas usarlo:

Paso 1: cree un directorio nuevo (por ejemplo, Playone) en VSCode

Paso 2: abra el directorio en Visual Studio Code. Desde el código VS,

Haga clic en Archivo > Abrir carpeta > Elegir carpeta recién creada (Playone)

Paso 3: desde VS Code, haga clic en Menú Terminal > Haga clic en Nueva Terminal

Paso 4: Ingrese el siguiente comando para iniciar la instalación de Playwright

Código: php

npm init playwright@latest

El comando anterior realiza la siguiente operación:

* Crea paquete.json

* Instala la biblioteca npm

* Configura archivos y carpetas básicos:

Carpeta de pruebas: esta carpeta contiene scripts de prueba reales. De forma predeterminada, se creará un archivo example.spec.ts dentro de esta carpeta.

.gitignore: este archivo ayuda si está utilizando el repositorio git

package.json y package-lock.json: este archivo ayuda a rastrear dependencias, crear un acceso directo para ejecutar pruebas, etc.

playwright.config.ts: este es el archivo de configuración global de Playwright, que puede configurar con las opciones disponibles.

Paso 5: instalar navegadores
Playwright está configurado para ejecutarse en navegadores existentes, lo que puede crear problemas al ejecutar las pruebas, por lo que se recomienda utilizar los navegadores Playwright. Usando el siguiente comando, puede instalar todos los navegadores diferentes en Playwright.

Código: php

npx playwright install

Paso 6: crea la primera prueba de playwright

Navegue dentro de la carpeta de pruebas y cree un archivo de especificaciones de prueba, por ejemplo: demo.spec.ts

Comencemos un caso de prueba con el siguiente escenario.

Guión:

- Navegue a No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

- Verifique que el mensaje de error se muestre o no.
El demo.spec.ts es nuestro script de prueba de Playwright de la siguiente manera

Código: php

//demo.spec.ts

import { test, expect, Page } from '@playwright/test';

test.beforeEach(async ({ page }) => {

  await page.goto('www.playwright.dev');

});

Paso 7: ejecutar el script de prueba de playwright

Como se mencionó anteriormente, durante la instalación, Playwright crea playwright.config.ts ( playwright.config.ts es el archivo de configuración global) que tendrá algunas configuraciones. De forma predeterminada, la configuración global contiene el valor que se ejecutará en todos los navegadores. Se ejecuta en los tres navegadores diferentes cuando ejecuta la prueba Playwright. No lo necesitamos, por lo que debemos eliminar esa opción.

Navegue hasta playwright.config.ts . Comenta la opción que comienza con proyectos: [
Si desea hacer lo anterior, copie y pegue la siguiente línea de código en playwright.config.ts

Código: php

//playwright.config.ts

import type { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {

  testDir: './tests',

  timeout: 30 * 1000,

  expect: {

    timeout: 5000

  },

  reporter: 'html',

  use: {

    actionTimeout: 0,

    trace: 'on-first-retry',

  },

};

export default config;

Entonces, ha configurado playwright.config.ts y estamos listos para ejecutar el primer script de prueba de Playwright.

Ejecute Playwright Spec usando el siguiente comando

Código: php

npx playwright test  demo.spec.ts –headed

Entendamos el comando anterior:

* Estamos especificando qué archivo de prueba necesitamos ejecutar, es decir , demo.spec.ts. No mencione ningún nombre de archivo de especificaciones si desea ejecutar todos los archivos de especificaciones dentro de la carpeta de pruebas, no mencione ningún nombre de archivo de especificaciones.

* Playwright se ejecuta en modo sin cabeza de forma predeterminada, por lo que especificamos –headed para que se ejecute en modo con cabeza.

* No mencionamos ningún nombre de navegador; De forma predeterminada, la prueba Playwright se ejecuta en el navegador Chromium.

Una vez que ejecuta el comando anterior, las pruebas de Playwright comienzan a ejecutarse en el navegador Chromium.

Little Example:

Paso 8: ver el informe

En nuestro playwright.config.ts , especificamos el informe HTML, por lo que después de ejecutar la prueba Playwright, el informe HTML se genera automáticamente en la carpeta playwright-report .

Para ver el informe HTML generado simplemente escriba:

Código: php

npx playwright show-report

Ejemplo---->

Espero que te sirva y puedas hacer muchas automatizaciones con este nuevo framework.

Saludos

02 - Playwright - Cómo instalar y ejecutar el script de prueba

Mr. Bones

Septiembre 16, 2023, 07:07:39 PM Ultima modificación: Septiembre 17, 2023, 11:36:06 AM por Mr. Bones