Erstellen von umfassenden Tests für eine Webseite

Copilot Chat kann dir beim Generieren von umfassenden Tests für eine Funktion helfen.

In diesem Artikel

Das Erstellen von umfassenden Tests für eine Webseite kann zeitaufwendig und kompliziert sein, da der HTML-Code dynamisch generiert wird. Copilot Chat kann beim Erstellen von umfassenden Tests für eine Website helfen, indem der nötige Code zum Interagieren mit der Website und zum Überprüfen der erwarteten Ergebnisse vorgeschlagen wird.

Beispielszenario

Stelle dir eine React-Anwendung vor, die Produktdetails auf einer Webseite anzeigt. Du musst umfassende Tests erstellen, damit die Produktdetails korrekt angezeigt werden. Du kannst Copilot Chat dazu auffordern, diese Tests für dich zu generieren.

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;

Beispiel für Prompt

Note

In diesem Beispiel wird Playwright für umfassende Tests verwendet. Du kannst jedoch auch andere Frameworks wie Selenium oder Cypress verwenden.

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

Wenn Copilot einen vorhandenen Test als Modell verwenden soll, kannst du #file: path/to/test-file.js zum Angeben des Dateipfads nutzen und diese Informationen in den Prompt schreiben.

Beispielantwort

Note

Die folgende Antwort ist ein Beispiel. Da die Copilot Chat-Antworten nicht deterministisch sind, erhältst du möglicherweise eine andere Antwort als die hier beschriebene.

Copilot gibt einen umfassenden Test als Antwort aus, den du für deine Anwendung verwenden kannst.

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();
  });
});

Weitere Informationen