# Создание комплексных тестов для веб-страницы

Copilot Chat может помочь с созданием сквозных тестов.

Создание комплексных тестов для веб-страницы может быть трудоемким и сложным, так как HTML-код будет создаваться динамически.
Copilot Chat может помочь вам создать сквозные тесты для веб-страницы, предложив необходимый код для взаимодействия с веб-страницей и проверки ожидаемых результатов.

## Пример сценария

Представьте приложение React, отображающее сведения о продукте на веб-странице. Необходимо создать комплексные тесты, чтобы убедиться, что сведения о продукте отображаются правильно. Вы можете попросить Copilot Chat провести эти тесты для вас.

```javascript id=product-details
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.

```copilot copy prompt ref=product-details
Using Playwright, generate an e2e test to ensure the product displays correctly.
```

Если у вас есть существующий тест, который вы хотите Copilot использовать в качестве модели, вы можете `#file: path/to/test-file.js` предоставить путь к файлу и включить эту информацию в запрос.

## Пример ответа

> \[!NOTE] Следующий ответ является примером. Ответы Copilot Chat являются недетерминированными, поэтому вы можете получить другой ответ, показанный здесь.

Copilot Отвечу сквозным тестом, который вы сможете использовать для своего приложения.

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

## Дополнительные материалы

* [Инженерия подсказок для GitHub Copilot Chat](/ru/copilot/concepts/prompting/prompt-engineering)
* [Лучшие практики использования GitHub Copilot](/ru/copilot/get-started/best-practices)