{"meta":{"title":"웹 페이지에 대한 엔드 투 엔드 테스트 만들기","intro":"공동 파일럿 채팅 는 엔드 투 엔드 테스트를 생성하는 데 도움이 될 수 있습니다.","product":"GitHub Copilot","breadcrumbs":[{"href":"/ko/copilot","title":"GitHub Copilot"},{"href":"/ko/copilot/tutorials","title":"자습서"},{"href":"/ko/copilot/tutorials/copilot-cookbook","title":"GitHub Copilot 활용 안내서"},{"href":"/ko/copilot/tutorials/copilot-cookbook/testing-code","title":"코드 테스트"},{"href":"/ko/copilot/tutorials/copilot-cookbook/testing-code/create-end-to-end-tests","title":"엔드 투 엔드 테스트 만들기"}],"documentType":"article"},"body":"# 웹 페이지에 대한 엔드 투 엔드 테스트 만들기\n\n공동 파일럿 채팅 는 엔드 투 엔드 테스트를 생성하는 데 도움이 될 수 있습니다.\n\nHTML이 동적으로 생성되므로 웹 페이지에 대한 엔드 투 엔드 테스트를 만드는 것은 시간이 오래 걸리고 복잡할 수 있습니다.\n공동 파일럿 채팅 는 웹 페이지와 상호 작용하고 예상된 결과의 유효성을 검사하는 데 필요한 코드를 제안하여 웹 페이지에 대한 엔드 투 엔드 테스트를 만드는 데 도움이 될 수 있습니다.\n\n## 예제 시나리오\n\n웹 페이지에 제품 세부 정보를 표시하는 React 애플리케이션을 상상해 보세요. 제품 세부 정보가 올바르게 표시되는지 확인하기 위해 엔드 투 엔드 테스트를 만들어야 합니다. 이러한 테스트를 생성하도록 요청할 공동 파일럿 채팅 수 있습니다.\n\n```javascript id=product-details\nimport React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\n\nconst ProductDetails = ({ productId = '1' }) => {\n  const [product, setProduct] = useState(null);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n\n  useEffect(() => {\n    const fetchProduct = async () => {\n      try {\n        const response = await fetch(`/api/product/${productId}`);\n        if (!response.ok) {\n          throw new Error('Product not found');\n        }\n        const data = await response.json();\n        setProduct(data);\n        setLoading(false);\n      } catch (err) {\n        setError(err.message);\n        setLoading(false);\n      }\n    };\n\n    fetchProduct();\n    return;\n  }, [productId]); // Add productId to dependency array\n\n  if (loading) return <div>Loading...</div>;\n  if (error) return <div>Error: {error}</div>;\n\n  return (\n    <div>\n      {product && (\n        <div>\n          <h2>{product.name}</h2>\n          <p>{product.description}</p>\n          <p>Price: ${product.price}</p>\n        </div>\n      )}\n    </div>\n  );\n};\n\nProductDetails.propTypes = {\n  productId: PropTypes.string\n};\n\nexport default ProductDetails;\n```\n\n## 예제 프롬프트\n\n> \\[!NOTE] 이 예제에서는 엔드투엔드 테스트에 Playwright를 사용하지만 Selenium 또는 Cypress와 같은 다른 프레임워크를 사용할 수 있습니다.\n\n```copilot copy prompt ref=product-details\nUsing Playwright, generate an e2e test to ensure the product displays correctly.\n```\n\n모델로 사용하려는 기존 테스트가 있는 경우, 파일 경로를 제공하기 위해 `#file: path/to/test-file.js`을 사용할 수 있으며 이 정보를 프롬프트에 포함할 수 있습니다 Copilot.\n\n## 응답 예제\n\n> \\[!NOTE] 다음 응답이 예제입니다. 공동 파일럿 채팅 응답은 비결정적이므로 여기에 표시된 응답과 다른 응답을 얻을 수 있습니다.\n\nCopilot 는 애플리케이션에 사용할 수 있는 엔드 투 엔드 테스트로 응답합니다.\n\n```typescript\nimport { test, expect } from '@playwright/test';\n\ntest.describe('ProductDetails Component', () => {\n  test.beforeEach(async ({ page }) => {\n    // Set up API mocking\n    await page.route('/api/product/1', async (route) => {\n      await route.fulfill({\n        status: 200,\n        contentType: 'application/json',\n        body: JSON.stringify({\n          name: 'Test Product',\n          description: 'This is a test product',\n          price: 99.99\n        })\n      });\n    });\n\n    // Mock error response for product ID 999\n    await page.route('/api/product/999', async (route) => {\n      await route.fulfill({\n        status: 404,\n        contentType: 'application/json',\n        body: JSON.stringify({ error: 'Product not found' })\n      });\n    });\n  });\n\n  test('displays loading state initially', async ({ page }) => {\n    await page.goto('/product/1');\n    const loadingElement = page.locator('text=Loading...');\n    await expect(loadingElement).toBeVisible();\n  });\n\n  test('displays product details correctly', async ({ page }) => {\n    await page.goto('/product/1');\n\n    // Wait for loading to disappear\n    await expect(page.getByText('Loading...')).toBeHidden();\n\n    // Check all product details\n    await expect(page.locator('h2')).toHaveText('Test Product');\n    await expect(page.locator('text=This is a test product')).toBeVisible();\n    await expect(page.locator('text=Price: $99.99')).toBeVisible();\n  });\n\n  test('displays error message when product not found', async ({ page }) => {\n    await page.goto('/product/999');\n\n    // Wait for loading to disappear\n    await expect(page.getByText('Loading...')).toBeHidden();\n\n    // Check error message\n    await expect(page.locator('text=Error: Product not found')).toBeVisible();\n  });\n});\n```\n\n## 추가 읽기\n\n* [GitHub Copilot 채팅에 대한 프롬프트 엔지니어링](/ko/copilot/using-github-copilot/prompt-engineering-for-github-copilot)\n* [GitHub 부필로트 사용에 대한 모범 사례](/ko/copilot/using-github-copilot/best-practices-for-using-github-copilot)"}