Set up TestDriver with sample tests

.github/workflows/testdriver.yml

@@ -8,15 +8,21 @@ on:
 
 jobs:
   test:
-    name: "TestDriver"
+    name: "TestDriver E2E Tests"
     runs-on: ubuntu-latest
     steps:
-      - uses: testdriverai/action@yassine/set-agent-version
+      - uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
         with:
-          version: v4.0.10
-          key: ${{secrets.TESTDRIVER_API_KEY}}
-          prompt: |
-            1. /run /Users/ec2-user/actions-runner/_work/testdriver/testdriver/testdriver/test.yml
+          node-version: 20
+          cache: "npm"
+
+      - name: Install Dependencies
+        run: npm ci || npm install
+
+      - name: Run TestDriver Tests
+        run: npx vitest run
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          FORCE_COLOR: "3"
+          TD_API_KEY: ${{ secrets.TD_API_KEY || secrets.TESTDRIVER_API_KEY }}

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+.env
+.testdriver/
+dist/
+coverage/

package.json

@@ -0,0 +1,14 @@
+{
+  "name": "todo-test-3",
+  "version": "1.0.0",
+  "description": "TestDriver automated tests for React Todo App",
+  "type": "module",
+  "scripts": {
+    "test": "vitest run"
+  },
+  "devDependencies": {
+    "dotenv": "^16.4.7",
+    "testdriverai": "canary",
+    "vitest": "^2.1.8"
+  }
+}

tests/todo.test.mjs

@@ -0,0 +1,53 @@
+import { describe, expect, it } from "vitest";
+import { TestDriver } from "testdriverai/vitest/hooks";
+
+const APP_URL = "https://javascriptbear.github.io/todo_react_app/";
+
+describe("Todo React App", () => {
+  it("should create a new task and display it in the list", async (context) => {
+    const testdriver = TestDriver(context);
+
+    // Launch Chrome browser navigating to the production Todo app
+    await testdriver.provision.chrome({ url: APP_URL });
+
+    // Verify application header loaded
+    const appHeader = await testdriver.find("My Tasks");
+    expect(appHeader).toBeTruthy();
+
+    // Click "New Task" button to open the modal
+    const newTaskBtn = await testdriver.find("New Task");
+    await newTaskBtn.click();
+
+    // Fill in Title
+    const titleInput = await testdriver.find("Title");
+    await titleInput.click();
+    await testdriver.type("Buy Groceries");
+
+    // Fill in Summary
+    const summaryInput = await testdriver.find("Summary");
+    await summaryInput.click();
+    await testdriver.type("Milk, eggs, bread, and coffee");
+
+    // Click "Create Task" button
+    const createTaskBtn = await testdriver.find("Create Task");
+    await createTaskBtn.click();
+
+    // Assert the task was created and is visible in the list
+    const createdTask = await testdriver.assert("Buy Groceries task is visible in the task list");
+    expect(createdTask).toBeTruthy();
+  });
+
+  it("should toggle dark and light theme", async (context) => {
+    const testdriver = TestDriver(context);
+
+    await testdriver.provision.chrome({ url: APP_URL });
+
+    // Click the theme toggle icon next to My Tasks
+    const themeToggle = await testdriver.find("theme toggle button near My Tasks");
+    await themeToggle.click();
+
+    // Verify background/theme change
+    const themeAssert = await testdriver.assert("the app theme toggled color mode");
+    expect(themeAssert).toBeTruthy();
+  });
+});

vitest.config.mjs

@@ -0,0 +1,11 @@
+import { defineConfig } from "vitest/config";
+import { config } from "dotenv";
+
+config();
+
+export default defineConfig({
+  test: {
+    testTimeout: 900000,
+    hookTimeout: 900000,
+  },
+});