es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Puede Playwright hacer pruebas condicionales basadas en el navegador en el que se está ejecutando?

¿Puede Playwright hacer pruebas condicionales basadas en el navegador en el que se está ejecutando?

25 Jul, 2023 Programación

Estoy aprendiendo cómo usar Playwright después de tener experiencia con Selenium y Cypress, y estoy probando la herramienta para ver cómo funciona en una prueba simple:

test.describe('IMDB:', () => {
    const movieName = 'Forrest Gump';

    await page.goto('https://www.imdb.com/');

    await page.fill('#suggestion-search', movieName);

    expect(await page.textContent('data-testid=search-result--const')).toContain(movieName);
  });
});

Simplemente va a IMDB, busca una película y luego verifica que se encuentre la película.

También he creado un archivo de configuración en el que he definido que quiero utilizar varios navegadores:

const config: PlaywrightTestConfig = {
  timeout: 30000,
  use: {
      headless: false
  },
  projects: [
    {
      name: 'Desktop Chromium',
      use: {
        browserName: 'chromium',
        viewport: { width: 1280, height: 720 },
      },
    },
    {
      name: 'Desktop Firefox',
      use: {
        browserName: 'firefox',
        viewport: { width: 1280, height: 720 },
      }
    },
     {
      name: 'Mobile Chrome',
      use: devices['Pixel 5'],
    },
  ],
};

export default config;

Sin embargo, al ejecutar la prueba, debido a que la barra de búsqueda está oculta detrás de un botón en el sitio móvil, la prueba de Mobile Chrome falla.

¿Hay alguna forma de realizar pruebas condicionales para decir que si se está utilizando un dispositivo en particular, se realice un paso adicional?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, puedes realizar pruebas condicionales basadas en el dispositivo que se está utilizando en Playwright. Puedes lograr esto utilizando la propiedad contextOptions en el objeto use para cada proyecto.

    Por ejemplo, puedes agregar un paso adicional al proyecto Mobile Chrome para hacer clic en el botón que revela la barra de búsqueda antes de completar el campo de búsqueda. Puedes hacer esto agregando el siguiente código al objeto use para el proyecto Mobile Chrome:

    contextOptions: {
    ...devices['Pixel 5'],
    extraHTTPHeaders: {
        'User-Agent': 'Mozilla/5.0 (Linux; Android 11; Pixel 5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.101 Mobile Safari/537.36'
    },
    permissions: ['clipboard-read'],
    ...
}

    Ten en cuenta que la propiedad extraHTTPHeaders establece el agente de usuario para emular un dispositivo móvil, y la propiedad permissions permite la lectura del portapapeles, lo cual es necesario para hacer clic en el botón.

    Luego, en tu prueba, puedes utilizar una declaración condicional para verificar si el proyecto actual es el proyecto Mobile Chrome, y si es así, realizar el paso adicional antes de completar el campo de búsqueda.

    Aquí tienes un ejemplo de cómo puedes modificar tu prueba para incluir pruebas condicionales:

    test.describe('IMDB:', () => {
    const movieName = 'Forrest Gump';

    await page.goto('https://www.imdb.com/');

    if (context.browserName === 'chromium' && context.isMobile) {
        await page.click('#navbar-search-category-button');
        await page.click('#navbar-search-category-button-popover li:nth-child(2)');
        await page.click('#suggestion-search-button');
    }

    await page.fill('#suggestion-search', movieName);

    expect(await page.textContent('data-testid=search-result--const')).toContain(movieName);
});

    En este ejemplo, la declaración if verifica si el proyecto actual es el proyecto Mobile Chrome mediante la verificación de las propiedades browserName y isMobile en el contexto. Si lo es, realiza el paso adicional de hacer clic en el botón para revelar la barra de búsqueda antes de completar el campo de búsqueda.

    De esta manera, la prueba se ejecutará como se espera en todos los proyectos excepto en el proyecto Mobile Chrome, donde realizará el paso adicional antes de completar el campo de búsqueda.

Comments are closed.