✅ 🚧 Add basic interaction test before structuring app for E2E testing #8

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

@@ -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();
+
+  });
 });