Web ページのエンドツーエンド テストを作成する

Copilot Chat は、エンドツーエンド テストの生成に役立ちます。

この記事の内容

HTML が動的に生成されるため、Web ページのエンドツーエンド テストの作成は時間がかかり、複雑になる場合があります。 Copilot Chat は、Web ページとやり取りして、想定される結果を検証するために必要なコードを提案することで、Web ページのエンドツーエンド テストの作成に役立ちます。

サンプル シナリオ

Web ページに製品の詳細を表示する React アプリケーションがあるとします。 製品の詳細が正しく表示されることを確認するには、エンドツーエンド テストを作成する必要があります。 このようなテストを生成するように Copilot Chat に依頼できます。

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;

プロンプトの例

Note

この例ではエンドツーエンド テストに Playwright を使っていますが、Selenium や Cypress などの他のフレームワークを使うこともできます。

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

Copilot でモデルとして使用したい既存のテストがある場合は、#file: path/to/test-file.js を使ってファイルのパスを指定し、この情報をプロンプトに含めることができます。

応答の例

Note

次の応答は例です。 Copilot Chat の応答は非決定的であるため、ここで示したものとは異なる応答が返される可能性があります。

Copilot は、アプリケーションに使用できるエンドツーエンド テストを返します。

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

参考資料