tests: hello world playground run with success and failure tests

tests/src/playground.test.ts

@@ -0,0 +1,58 @@
+import { describe, it } from "mocha";
+import { $, expect, browser } from "@wdio/globals";
+
+describe("Playground", () => {
+  it("executes the hello world code and prints the hello message", async () => {
+    await browser.url("/types-and-values/hello-world.html");
+    const playground_area$ = $(".ace_content");
+    const playground_start_button$ = $("button.play-button");
+    const playground_stderr$ = $("code.result.stderr");
+    const playground_stdout$ = $("code.result.stdout");
+
+    // ensure a playground exists and pre-state is as expected
+    await expect(playground_area$).toExist();
+    await expect(playground_start_button$).toExist();
+    await expect(playground_start_button$).not.toBeDisplayed();
+    await expect(playground_stderr$).not.toExist();
+    await expect(playground_stdout$).not.toExist();
+
+    // clicking into the content is necessary for the button to be displayed
+    await playground_area$.click();
+    await expect(playground_start_button$).toBeDisplayed();
+
+    // clicking the button triggers action
+    await playground_start_button$.click();
+    await expect(playground_stdout$).toBeDisplayed();
+    await expect(playground_stderr$).not.toBeDisplayed();
+    await expect(playground_stdout$).toHaveText("Hello 🌍!");
+  });
+
+  it("shows error messages in stderr if the code is broken", async () => {
+    await browser.url("/types-and-values/hello-world.html");
+    const playground_area$ = $(".ace_content");
+    const playground_start_button$ = $("button.play-button");
+    const playground_stderr$ = $("code.result.stderr");
+    const playground_stdout$ = $("code.result.stdout");
+
+    // overwrite the playground code with expected broken code
+    await browser.execute(() => {
+      window.ace
+        .edit(document.querySelector("code"))
+        .setValue("fn expect_failure()");
+    });
+
+    // clicking into the content is necessary for the button to be displayed
+    await playground_area$.click();
+
+    // clicking the button triggers action
+    await playground_start_button$.click();
+    await expect(playground_stdout$).toBeDisplayed();
+    await expect(playground_stderr$).toBeDisplayed();
+
+    // check for error message in stderr
+    await expect(playground_stderr$).toHaveText(
+      expect.stringContaining("error: could not compile")
+    );
+    await expect(playground_stdout$).toHaveText("No output");
+  });
+});