Creación de pruebas de un extremo a otro para una página web

Chat de Copiloto puede ayudar a generar pruebas de extremo a extremo.

En este artículo

La creación de pruebas integrales para una página web puede llevar mucho tiempo y ser compleja, ya que el código HTML se generará de forma dinámica. Chat de Copiloto puede ayudarle a crear pruebas de un extremo a otro para una página web sugiriendo el código necesario para interactuar con la página web y validar los resultados esperados.

Escenario de ejemplo

Imagina una aplicación de React que muestra detalles de un producto en una página web. Debes crear pruebas integrales para asegurarte de que los detalles del producto se muestran correctamente. Puede pedir que Chat de Copiloto genere estas pruebas automáticamente.

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';

const ProductDetails = ({ productId = '1' }) => {
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchProduct = async () => {
      try {
        const response = await fetch(`/api/product/${productId}`);
        if (!response.ok) {
          throw new Error('Product not found');
        }
        const data = await response.json();
        setProduct(data);
        setLoading(false);
      } catch (err) {
        setError(err.message);
        setLoading(false);
      }
    };

    fetchProduct();
    return;
  }, [productId]); // Add productId to dependency array

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      {product && (
        <div>
          <h2>{product.name}</h2>
          <p>{product.description}</p>
          <p>Price: ${product.price}</p>
        </div>
      )}
    </div>
  );
};

ProductDetails.propTypes = {
  productId: PropTypes.string
};

export default ProductDetails;

Mensaje de ejemplo

Nota:

En este ejemplo se usa Playwright para las pruebas integrales, pero puedes utilizar otros marcos, como Selenium o Cypress.

Copilot prompt
Using Playwright, generate an e2e test to ensure the product displays correctly.

Si tiene una prueba existente que desee usar Copilot como modelo, puede usar #file: path/to/test-file.js para especificar la ruta del archivo e incluir esta información en la instrucción.

Respuesta de ejemplo

Nota:

La respuesta siguiente es un ejemplo. Las respuestas de Chat de Copiloto no son deterministas, por lo que puedes obtener una respuesta diferente a la aquí mostrada.

Copilot generará una prueba integral que puede utilizar para su aplicación.

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

test.describe('ProductDetails Component', () => {
  test.beforeEach(async ({ page }) => {
    // Set up API mocking
    await page.route('/api/product/1', async (route) => {
      await route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({
          name: 'Test Product',
          description: 'This is a test product',
          price: 99.99
        })
      });
    });

    // Mock error response for product ID 999
    await page.route('/api/product/999', async (route) => {
      await route.fulfill({
        status: 404,
        contentType: 'application/json',
        body: JSON.stringify({ error: 'Product not found' })
      });
    });
  });

  test('displays loading state initially', async ({ page }) => {
    await page.goto('/product/1');
    const loadingElement = page.locator('text=Loading...');
    await expect(loadingElement).toBeVisible();
  });

  test('displays product details correctly', async ({ page }) => {
    await page.goto('/product/1');

    // Wait for loading to disappear
    await expect(page.getByText('Loading...')).toBeHidden();

    // Check all product details
    await expect(page.locator('h2')).toHaveText('Test Product');
    await expect(page.locator('text=This is a test product')).toBeVisible();
    await expect(page.locator('text=Price: $99.99')).toBeVisible();
  });

  test('displays error message when product not found', async ({ page }) => {
    await page.goto('/product/999');

    // Wait for loading to disappear
    await expect(page.getByText('Loading...')).toBeHidden();

    // Check error message
    await expect(page.locator('text=Error: Product not found')).toBeVisible();
  });
});

Lectura adicional