{"meta":{"title":"Creación de pruebas de un extremo a otro para una página web","intro":"Copilot Chat puede ayudar a generar pruebas de extremo a extremo.","product":"GitHub Copilot","breadcrumbs":[{"href":"/es/copilot","title":"GitHub Copilot"},{"href":"/es/copilot/tutorials","title":"Tutoriales"},{"href":"/es/copilot/tutorials/copilot-cookbook","title":"Recetario de GitHub Copilot"},{"href":"/es/copilot/tutorials/copilot-cookbook/testing-code","title":"Probar el código"},{"href":"/es/copilot/tutorials/copilot-cookbook/testing-code/create-end-to-end-tests","title":"Creación de pruebas integrales"}],"documentType":"article"},"body":"# Creación de pruebas de un extremo a otro para una página web\n\nCopilot Chat puede ayudar a generar pruebas de extremo a extremo.\n\nLa creación de pruebas integrales para una página web puede llevar mucho tiempo y ser compleja, ya que el código HTML se generará de forma dinámica.\nCopilot Chat puede ayudarle a crear pruebas de un extremo a otro para una página web sugiriendo el código necesario para interactuar con la página web y validar los resultados esperados.\n\n## Escenario de ejemplo\n\nImagina una aplicación de React que muestra detalles de un producto en una página web. Debes crear pruebas integrales para asegurarte de que los detalles del producto se muestran correctamente. Puede pedir que Copilot Chat genere estas pruebas automáticamente.\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## Mensaje de ejemplo\n\n> \\[!NOTE] En este ejemplo se usa Playwright para las pruebas integrales, pero puedes utilizar otros marcos, como Selenium o Cypress.\n\n```copilot copy prompt ref=product-details\nUsing Playwright, generate an e2e test to ensure the product displays correctly.\n```\n\nSi tiene una prueba existente que desee usar Copilot como modelo, puede usar `#file: path/to/test-file.js` para especificar la ruta del archivo e incluir esta información en la instrucción.\n\n## Respuesta de ejemplo\n\n> \\[!NOTE] La respuesta siguiente es un ejemplo. Las respuestas de Copilot Chat no son deterministas, por lo que puedes obtener una respuesta diferente a la aquí mostrada.\n\nCopilot generará una prueba integral que puede utilizar para su aplicación.\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## Lectura adicional\n\n* [Ingeniería de mensajes para GitHub Copilot Chat](/es/copilot/concepts/prompting/prompt-engineering)\n* [Procedimientos recomendados para usar GitHub Copilot](/es/copilot/get-started/best-practices)"}