Erstellen von umfassenden Tests für eine Webseite

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 dabei helfen, End-to-End-Tests für eine Webseite zu erstellen, indem es den notwendigen Code vorschlägt, um mit der Webseite zu interagieren und die erwarteten Ergebnisse zu validieren.

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;

Beispiel für Prompt

Hinweis

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

Copilot Chat prompt

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

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;

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

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

Wenn Sie einen bestehenden Test als Vorlage für Copilot verwenden möchten, können Sie #file: path/to/test-file.js verwenden, um den Pfad zu der Datei anzugeben und diese Information in den Prompt aufzunehmen.

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 wird mit einem End-to-End-Test reagieren, 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();
  });
});

Erstellen von umfassenden Tests für eine Webseite

In diesem Artikel

Beispielszenario

Beispiel für Prompt

Beispielantwort

Weiterführende Themen