From 7a5affa2b91979784b9bc866c1de195471d88602 Mon Sep 17 00:00:00 2001
From: Dino Scheidt <github@dino-scheidt.de>
Date: Tue, 11 Apr 2023 00:12:30 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20=F0=9F=9A=A7=20Add=20basic=20intera?=
 =?UTF-8?q?ction=20test=20before=20structuring=20app=20for=20E2E=20testing?=
 =?UTF-8?q?=20#8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Without proper test ids or deeper react integration, the appearance of elements can not be properly awaited. And is also thrown of runtime react errors that do not break behavior.
---
 features/spec/sample.spec.ts | 34 +++++++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/features/spec/sample.spec.ts b/features/spec/sample.spec.ts
index bde6ae1..6afe1a7 100644
--- a/features/spec/sample.spec.ts
+++ b/features/spec/sample.spec.ts
@@ -1,10 +1,42 @@
 import { expect, test } from "@playwright/test";
 
-test.describe("Sample Browser App", () => {
+test.describe("Sample Content", () => {
   test("has title", async ({ page }) => {
     await page.goto("/");
 
     // Expect a title "to contain" a substring.
     await expect(page).toHaveTitle(/Sample App/);
   });
+
+  test("welcomes user", async ({ page }) => {
+    await page.goto("/");
+
+    // Expect a title "to contain" a substring.
+    expect(await page.innerText("h1")).toContain("Welcome");
+  });
+});
+
+test.describe("Sample Interaction", () => {
+  test("can start and stop rating", async ({ page }) => {
+    await page.goto("/");
+
+    await page.getByRole("button", { name: "START" }).click();
+
+    expect(await page.getByText("Current Rating: 1")).toBeVisible();
+
+    await page.getByRole("button", { name: "STOP" }).click();
+  });
+
+  test("count to 6", async ({ page }) => {
+    await page.goto("/");
+
+    await page.getByRole("button", { name: "START" }).click();
+
+    await page.getByRole("button", { name: "+" }).click();
+    await page.getByRole("button", { name: "+" }).click();
+    await page.getByRole("button", { name: "+" }).click();
+    await page.getByRole("button", { name: "+" }).click();
+    await page.getByRole("button", { name: "+" }).click();
+
+  });
 });