Búsqueda de sitios web

typescript - Prueba de Playwright no carga la URL local

Estoy teniendo problemas para cargar la página principal de mi aplicación, aunque creo que tengo las cosas configuradas correctamente. La configuración de prueba y playwright es la siguiente:

ejemplo.spec.ts

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

test('Visit Pages', async ({ page }) => {

  await page.goto('https://playwright.dev/') -- this works
  await page.goto('http://localhost:3000/'); -- this does not work

  //this doesn't work either
  await page.goto('http://localhost:3000/', {
    waitUntil: 'domcontentloaded',
    timeout: 60000,
  });
  ...
}

playwright.config.ts

import { defineConfig, devices } from '@playwright/test'

export default defineConfig {
  testDir: 'tests',
  //also added in headless false but no difference
  headless: false,
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:3000',
    storageState: './state.json'
    trace: 'on-first-retry',
  },
  // Configure projects for major browsers.
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'Google Chrome',
      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
    },
  ],
  // Run your local dev server before starting the tests.
  webServer: {
    command: 'yarn dev',
    url: 'http://localhost:3000',
    reuseExistingServer: true,
  },
}

Tengo el servidor web funcionando, así que no sé por qué no se está cargando como debería.

Antes de ejecutar el comando yarn playwright test --ui, me aseguro de que la aplicación esté en funcionamiento y de iniciar el servidor web/front-end. Verifiqué que puedo acceder a la página de inicio como se espera en el Google Chrome normal, y a los endpoints del back-end con Postman... Lo cual en otra prueba de Playwright realmente funciona. Pero mi problema es que la página simplemente no carga nada en absoluto, solo es una pantalla en blanco con un círculo de carga. Necesito que cargue para poder empezar a interactuar con elementos como campos de texto.

Todavía no estoy familiarizado con TypeScript y, aunque estoy familiarizado con Cypress, esta configuración de Playwright para las cosas básicas me está confundiendo.

Respuesta #1

Creo que verificar la visibilidad de cualquier elemento que sea visible después de la carga de la página ayudará; por ejemplo, se puede verificar el típico texto de bienvenida en la página de inicio.

Esto ocurre cuando el actor de teatro, siendo muy rápido, termina y falla la prueba antes de que se complete la carga de la página.

await page.goto('http://localhost:3000/')

await expect(page.getByText('Welcome')).toBeVisible()

Usar una afirmación web como toBeVisible espera hasta que el elemento se vuelva visible, lo cual es útil en este escenario.

Artículos relacionados