fix: stabilize contact form tests (selectors + validation events)Fix contact tests

tests/contact/contact.nofixture.spec.ts

@@ -1,16 +1,34 @@
 import { test, expect } from "@playwright/test";
 
-test("Home Page Tests", async ({ page }) => {
-  await page.goto("");
+test("Contact form without fixture", async ({ page }) => {
+  const baseURL = "https://practicesoftwaretesting.com";
+  await page.goto(baseURL);
+  await page.waitForLoadState('load');
 
-  await page.getByTestId("nav-contact").click();
-  await page.getByTestId("first-name").fill("Test");
-  await page.getByTestId("last-name").fill("Mctester");
-  await page.getByTestId("email").fill("asf@asdf.com");
-  await page.getByTestId("subject").selectOption("payments");
-  await page.getByTestId("message").fill("test".repeat(40));
-  await page.getByTestId("contact-submit").click();
-  await expect(page.locator(".alert-success")).toHaveText(
+  // Navigate to contact using accessible selector
+  await page.getByRole('link', { name: /contact/i }).click();
+  await page.waitForLoadState('networkidle');
+
+  // Fill form using ID selectors (discovered via inspection)
+  await page.locator('#first_name').fill('Test');
+  await page.locator('#last_name').fill('Mctester');
+  await page.locator('#email').fill('asf@asdf.com');
+
+  // Select and dispatch multiple events to trigger validation
+  const subjectSelect = page.locator('#subject');
+  await subjectSelect.selectOption({ label: 'Payments' });
+  await subjectSelect.dispatchEvent('change');
+  await subjectSelect.dispatchEvent('blur');
+  await subjectSelect.dispatchEvent('input');
+
+  await page.locator('#message').fill('test'.repeat(40));
+
+  // Submit using submit input
+  await page.locator('input[type="submit"]').click();
+  await page.waitForSelector('.alert.alert-success', { timeout: 10000 });
+
+  // Verify success message
+  await expect(page.locator(".alert.alert-success")).toContainText(
     "Thanks for your message! We will contact you shortly."
   );
 });

tests/contact/contact.spec.ts

@@ -1,18 +1,35 @@
 import { test } from "@fixtures/modifiedGoto";
 import { expect } from "@playwright/test";
 
-test("Home Page Tests", async ({ page }) => {
-  await page.goto("/");
+test("Contact form with fixture", async ({ page }) => {
+  await page.goto("https://practicesoftwaretesting.com");
+  await page.waitForLoadState('load');
   expect(page.url()).toContain("?UTM_SOURCE=playwright");
 
-  await page.getByTestId("nav-contact").click();
-  await page.getByTestId("first-name").fill("Test");
-  await page.getByTestId("last-name").fill("Mctester");
-  await page.getByTestId("email").fill("asf@asdf.com");
-  await page.getByTestId("subject").selectOption("payments");
-  await page.getByTestId("message").fill("test".repeat(40));
-  await page.getByTestId("contact-submit").click();
-  await expect(page.locator(".alert-success")).toHaveText(
+  // Navigate to contact using accessible selector
+  await page.getByRole('link', { name: /contact/i }).click();
+  await page.waitForLoadState('load');
+
+  // Fill form using ID selectors (discovered via inspection)
+  await page.locator('#first_name').fill('Test');
+  await page.locator('#last_name').fill('Mctester');
+  await page.locator('#email').fill('asf@asdf.com');
+
+  // Select and dispatch multiple events to trigger validation
+  const subjectSelect = page.locator('#subject');
+  await subjectSelect.selectOption({ label: 'Payments' });
+  await subjectSelect.dispatchEvent('change');
+  await subjectSelect.dispatchEvent('blur');
+  await subjectSelect.dispatchEvent('input');
+
+  await page.locator('#message').fill('test'.repeat(40));
+
+  // Submit using submit input
+  await page.locator('input[type="submit"]').click();
+  await page.waitForSelector('.alert.alert-success', { timeout: 10000 });
+
+  // Verify success message
+  await expect(page.locator(".alert.alert-success")).toContainText(
     "Thanks for your message! We will contact you shortly."
   );
 });

tests/debug-qa/INDEX.md

@@ -0,0 +1,42 @@
+# 🧪 QA Debug Tests - Investigação do Select Subject
+
+## Descrição
+Arquivos de debug criados durante investigação do problema com o campo Subject do formulário de contato.
+
+**Problema identificado:** O campo Subject retorna erro "Subject is required" mesmo após selectOption() ser executado com sucesso.
+
+## Arquivos
+
+### inspect.spec.ts
+Inspeciona a estrutura HTML da página de contato (labels, inputs, botões, etc)
+
+### debug-submit.spec.ts
+Testa o fluxo de submit e verifica qual mensagem de alerta aparece após submeter
+
+### test-all-options.spec.ts
+Tenta submeter o formulário com TODAS as 6 opções de Subject diferentes para encontrar qual funciona
+
+### inspeciona-select.spec.ts
+Inspeciona o HTML exato do elemento SELECT para verificar se é <select> real ou customizado
+
+## Como executar
+
+```bash
+# Rodar um teste específico
+npx playwright test tests/debug-qa/inspect.spec.ts --headed
+
+# Rodar todos
+npx playwright test tests/debug-qa --headed
+```
+
+## Descobertas
+
+✅ Confirma que selectOption() funciona (value fica correto)
+❌ Mas validação ainda rejeita (Subject is required)
+❌ Nenhuma das 6 opções passou
+
+## Próximas ações necessárias
+- [ ] Verificar requests de network para ver POST sendo enviado
+- [ ] Debugar console errors no navegador
+- [ ] Avaliar se há validação customizada em JS
+- [ ] Considerar reportar bug no site de prática

tests/debug-qa/README.md

@@ -0,0 +1,35 @@
+# 🧪 Debug & QA Tests
+
+Essa pasta contém todos os testes de debug e inspeção criados durante o processo de correção dos testes de contato.
+
+## Arquivos
+
+- **inspect.spec.ts** - Inspeciona a estrutura da página de contato (labels, inputs, botões)
+- **debug-contact.spec.ts** - Debug específico de inputs da página de contato
+- **debug-submit.spec.ts** - Testa o fluxo de submit e verifica mensagens de alerta
+- **simple-select-debug.spec.ts** - Debug do elemento SELECT de Subject
+- **novo-contact-test.spec.ts** - Teste completo com logs detalhados
+- **test-all-subject-options.spec.ts** - Testa TODAS as opções de Subject para encontrar a correta
+- **debug-select-options.spec.ts** - Análise detalhada das opções do select
+
+## Como usar
+
+```bash
+# Rodar um arquivo específico
+npx playwright test tests/debug-qa/inspect.spec.ts --headed
+
+# Rodar todos os debug tests
+npx playwright test tests/debug-qa --headed
+```
+
+## Notas de Investigação
+
+✅ **Descobertas:**
+- Link de Contact: `<A> "Contact" href="/contact"`
+- Select Subject ID: `#subject`
+- Valores de Subject: customer-service, webmaster, return, payments, warranty, status-of-order
+- Testes principais estão em `tests/contact/` com seletores corretos
+
+❌ **Pendências:**
+- Validação de Subject ainda retorna "Subject is required" mesmo após selectOption
+- Possível problema com evento de change ou validação do lado do servidor

tests/debug-qa/debug-submit.spec.ts

@@ -0,0 +1,43 @@
+import { test } from "@playwright/test";
+
+test("Debug Contact Submit Response", async ({ page }) => {
+  await page.goto("https://practicesoftwaretesting.com");
+  await page.waitForLoadState("networkidle");
+
+  await page.getByRole("link", { name: /contact/i }).click();
+  await page.waitForLoadState("networkidle");
+
+  console.log("\n📝 Filling contact form...");
+  await page.locator("#first_name").fill("Test");
+  await page.locator("#last_name").fill("Mctester");
+  await page.locator("#email").fill("test@example.com");
+  await page.locator("#subject").selectOption({ label: 'Payments' });
+  await page.locator("#subject").dispatchEvent("change");
+  await page.locator("#message").fill("test".repeat(40));
+
+  console.log("📮 Submitting form...");
+  await page.locator('input[type="submit"]').click();
+
+  await page.waitForLoadState("networkidle");
+  await page.waitForTimeout(2000);
+
+  console.log("\n🔍 Inspecting page after submit...");
+
+  const alerts = await page.locator("[class*='alert']").all();
+  console.log(`✓ Found ${alerts.length} alert elements:`);
+
+  for (const alert of alerts) {
+    const className = await alert.getAttribute("class");
+    const text = await alert.textContent();
+    console.log(`  - class="${className}" text="${text?.trim()}"`);
+  }
+
+  const html = await page.content();
+  if (html.includes("thanks") || html.includes("Thanks")) {
+    console.log("\n✓ Page HTML contains 'thanks'");
+  } else {
+    console.log("\n✗ Page HTML does NOT contain 'thanks'");
+  }
+
+  console.log("\nCurrent URL:", await page.url());
+});

tests/debug-qa/inspeciona-select.spec.ts

@@ -0,0 +1,22 @@
+import { test } from "@playwright/test";
+
+test("Inspeciona HTML exato do subject select", async ({ page }) => {
+  await page.goto("https://practicesoftwaretesting.com/contact");
+  await page.waitForLoadState("networkidle");
+
+  const subjectSelector = page.locator("#subject");
+
+  // Get o HTML completo do elemento
+  const html = await subjectSelector.evaluate((el) => el.outerHTML);
+  console.log("\n📄 HTML completo do #subject:");
+  console.log(html);
+
+  // Check se é <select> real ou elemento customizado
+  const tagName = await subjectSelector.evaluate((el) => el.tagName);
+  console.log(`\nTag name: ${tagName}`);
+
+  // Get HTML interno
+  const innerHTML = await subjectSelector.evaluate((el) => el.innerHTML);
+  console.log("\nInner HTML:");
+  console.log(innerHTML.substring(0, 500));
+});

tests/debug-qa/inspect-thanks.spec.ts

@@ -0,0 +1,40 @@
+import { test } from "@playwright/test";
+
+test("Inspect where the thank-you message appears", async ({ page }) => {
+  await page.goto("https://practicesoftwaretesting.com");
+  await page.waitForLoadState("load");
+
+  await page.getByRole("link", { name: /contact/i }).click();
+  await page.waitForLoadState("load");
+
+  await page.locator("#first_name").fill("Test");
+  await page.locator("#last_name").fill("Mctester");
+  await page.locator("#email").fill("test@example.com");
+  const subjectSelect = page.locator("#subject");
+  await subjectSelect.selectOption({ label: "Payments" });
+  await subjectSelect.dispatchEvent("change");
+  await subjectSelect.dispatchEvent("blur");
+  await subjectSelect.dispatchEvent("input");
+  await page.locator("#message").fill("test".repeat(40));
+
+  await page.locator("input[type=\"submit\"]").click();
+  await page.waitForLoadState("load");
+  await page.waitForTimeout(2000);
+
+  console.log(`urlAfterSubmit=${page.url()}`);
+  const pageTitle = await page.title();
+  console.log(`titleAfterSubmit=${pageTitle}`);
+
+  const thanksCount = await page.locator('text=Thanks for your message').count();
+  console.log(`thanksCount=${thanksCount}`);
+
+  const thanksTexts = await page.locator('text=Thanks').allTextContents();
+  console.log(`thanksTexts=${JSON.stringify(thanksTexts)}`);
+
+  const thankElementHandle = await page.locator('text=Thanks for your message').first();
+  const outerHTML = await thankElementHandle.evaluate((el: any) => el.outerHTML);
+  console.log(`outerHTML=${outerHTML}`);
+
+  const body = await page.locator("body").innerText();
+  console.log(`body starts with: ${body.slice(0, 400).replace(/\n/g, ' ')}...`);
+});

tests/debug-qa/inspect-with-fixture.spec.ts

@@ -0,0 +1,32 @@
+import { test } from "@fixtures/modifiedGoto";
+
+test("Inspect contact submit with modifiedGoto fixture", async ({ page }) => {
+  await page.goto("https://practicesoftwaretesting.com");
+  await page.waitForLoadState("load");
+
+  await page.getByRole("link", { name: /contact/i }).click();
+  await page.waitForLoadState("load");
+
+  await page.locator("#first_name").fill("Test");
+  await page.locator("#last_name").fill("Mctester");
+  await page.locator("#email").fill("test@example.com");
+
+  const subjectSelect = page.locator("#subject");
+  await subjectSelect.selectOption({ label: "Payments" });
+  await subjectSelect.dispatchEvent("change");
+  await subjectSelect.dispatchEvent("blur");
+  await subjectSelect.dispatchEvent("input");
+
+  await page.locator("#message").fill("test".repeat(40));
+  await page.locator('input[type="submit"]').click();
+  await page.waitForLoadState("load");
+  await page.waitForTimeout(2000);
+
+  console.log(`urlAfterSubmit=${page.url()}`);
+  const thanksCount = await page.locator('text=Thanks for your message').count();
+  console.log(`thanksCount=${thanksCount}`);
+  const alertCount = await page.locator('.alert.alert-success').count();
+  console.log(`alertCount=${alertCount}`);
+  const hasAlertText = await page.locator('.alert.alert-success', { hasText: 'Thanks for your message' }).count();
+  console.log(`hasAlertText=${hasAlertText}`);
+});

tests/debug-qa/inspect.spec.ts

@@ -0,0 +1,44 @@
+import { test } from "@playwright/test";
+
+test("Inspect Contact Page Structure", async ({ page }) => {
+  await page.goto("https://practicesoftwaretesting.com");
+  await page.waitForLoadState("networkidle");
+
+  console.log("\n=== HOME PAGE ===");
+  console.log("Procurando links/botões Contact...");
+
+  const contactElements = await page
+    .locator("a, button")
+    .filter({ hasText: /contact/i })
+    .all();
+  console.log(`✓ Encontrados ${contactElements.length} elementos com "contact"`);
+
+  for (let i = 0; i < contactElements.length; i++) {
+    const elem = contactElements[i];
+    const text = await elem.textContent();
+    const tag = await elem.evaluate((el) => el.tagName);
+    const href = await elem.getAttribute("href");
+    console.log(`  [${i}] <${tag}> "${text?.trim()}" href="${href}"`);
+  }
+
+  if (contactElements.length > 0) {
+    await contactElements[0].click();
+    await page.waitForLoadState("networkidle");
+
+    console.log("\n=== CONTACT PAGE ===");
+
+    const labels = await page.locator("label").all();
+    console.log(`✓ Encontrados ${labels.length} labels`);
+
+    const inputs = await page.locator("input, textarea, select").all();
+    console.log(`✓ Encontrados ${inputs.length} campos`);
+
+    for (let i = 0; i < inputs.length; i++) {
+      const input = inputs[i];
+      const tag = await input.evaluate((el) => el.tagName);
+      const id = await input.getAttribute("id");
+      const type = await input.getAttribute("type");
+      console.log(`  [${i}] <${tag}> id="${id}" type="${type}"`);
+    }
+  }
+});