Erstellen von umfassenden Tests für eine Webseite

Copilot-Chat kann beim Generieren von End-to-End-Tests helfen.

In diesem Artikel

Das Erstellen von End-to-End-Tests für eine Webseite kann zeitaufwändig und komplex sein, da das HTML dynamisch generiert wird. Copilot-Chat kann Ihnen helfen, End-to-End-Tests für eine Webseite zu erstellen, indem Sie den erforderlichen Code für die Interaktion mit der Webseite vorschlagen und die erwarteten Ergebnisse überprüfen.

Beispielszenario

Stellen Sie sich eine React-Anwendung vor, die Produktdetails auf einer Webseite anzeigt. Sie müssen End-to-End-Tests erstellen, um sicherzustellen, dass die Produktdetails korrekt angezeigt werden. Sie können Copilot-Chat bitten, diese Tests für Sie 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;

Beispielaufforderung

Hinweis

Dieses Beispiel verwendet Playwright für End-to-End-Tests, aber Sie können auch andere Frameworks wie Selenium oder Cypress verwenden.

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

Wenn Sie über einen vorhandenen Test verfügen, den Sie Copilot als Vorlage verwenden möchten, können Sie #file: path/to/test-file.js den Pfad zur Datei angeben und diese Informationen in den Prompt aufnehmen.

Beispielantwort

Hinweis

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 antwortet mit einem End-to-End-Test, den Sie für Ihre Anwendung verwenden können.

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

Weiterführende Lektüre