From bf3463951c2b4ef5eefe3212bc45da20a9c8df90 Mon Sep 17 00:00:00 2001
From: TorunW <torun.wikstrom@gmail.com>
Date: Wed, 18 Mar 2026 13:19:13 +0100
Subject: [PATCH 1/2] add test checking 9 cells, valid moves, invalid moves

---
 components/grid.tsx   |  4 +++-
 fixtures/board.ts     | 13 +++++++++++++
 tests/base-test.ts    | 15 +++++++++++++++
 tests/example.spec.ts | 34 ++++++++++++++++++++++++++++------
 4 files changed, 59 insertions(+), 7 deletions(-)
 create mode 100644 fixtures/board.ts
 create mode 100644 tests/base-test.ts

diff --git a/components/grid.tsx b/components/grid.tsx
index 6196b1b..60cd705 100644
--- a/components/grid.tsx
+++ b/components/grid.tsx
@@ -129,7 +129,9 @@ export default function Grid() {
 
   return (
     <div className='relative flex flex-col items-center max-w-120 '>
-      <div className='grid grid-cols-3 gap-0'>{mapGrid} </div>
+      <div className='grid grid-cols-3 gap-0' role='grid'>
+        {mapGrid}
+      </div>
       {winningMessageDisplay || drawMessageDisplay === true ? (
         <div className='fixed inset-0 bg-black/90 flex items-center justify-center overflow-hidden'>
           <div className='bg-slate-900 rounded-lg p-6 max-w-sm w-full min-h-[120px] flex flex-col items-center justify-center gap-6 text-center border border-sky-300'>
diff --git a/fixtures/board.ts b/fixtures/board.ts
new file mode 100644
index 0000000..f77a6d8
--- /dev/null
+++ b/fixtures/board.ts
@@ -0,0 +1,13 @@
+import { Locator, Page } from '@playwright/test';
+
+export class BoardFixture {
+  public readonly tictacBoard: Locator;
+  public readonly getAllCells: () => Promise<Locator[]>;
+
+  constructor(public readonly page: Page) {
+    this.tictacBoard = page.getByRole('grid');
+    this.getAllCells = async () => {
+      return await this.tictacBoard.getByRole('gridcell').all();
+    };
+  }
+}
diff --git a/tests/base-test.ts b/tests/base-test.ts
new file mode 100644
index 0000000..235ad6c
--- /dev/null
+++ b/tests/base-test.ts
@@ -0,0 +1,15 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { BoardFixture } from '@/fixtures/board';
+import { test as base } from '@playwright/test';
+
+// Declare the types of your fixtures.
+type MyFixtures = {
+  board: BoardFixture;
+};
+
+export const test = base.extend<MyFixtures>({
+  board: async ({ page }, use) => {
+    await use(new BoardFixture(page));
+  },
+});
+export { expect } from '@playwright/test';
diff --git a/tests/example.spec.ts b/tests/example.spec.ts
index 13ca9be..5abf9c7 100644
--- a/tests/example.spec.ts
+++ b/tests/example.spec.ts
@@ -1,15 +1,37 @@
-import { test, expect } from '@playwright/test';
+import { expect } from '@playwright/test';
+import { test } from './base-test';
 
-//todo: a fixture that is a get cell by number
+//do fixtures - array of al board cells - then all one by one?
+
+test('Verify that there is 9 cells and that all are enabled', async ({
+  page,
+  board,
+}) => {
+  const { tictacBoard } = board;
+
+  await page.goto('http://localhost:3000/');
+
+  const cells = tictacBoard.getByRole('button');
+  await expect(cells).toHaveCount(9);
+  const count = await cells.count();
+  for (let i = 0; i < count; i++) {
+    await expect(cells.nth(i)).toBeEnabled();
+  }
+});
+
+test('Verify that valid moves (empty cells) are accepted', async ({
+  page,
+  board,
+}) => {
+  const { tictacBoard } = board;
 
-test('Verify that valid moves (empty cells) are accepted', async ({ page }) => {
   await page.goto('https://tic-tac-toe-tau-lyart-50.vercel.app/');
   const cellOne = page.getByRole('button', { name: 'Cell 1' });
-
+  console.log(board.tictacBoard);
   // Click the 1st cell in the grid.
   await cellOne.click();
-  await page.getByRole('button', { name: 'Cell 2' }).click();
-  await page.getByRole('button', { name: 'Cell 3' }).click();
+  await tictacBoard.getByRole('button', { name: 'Cell 2' }).click();
+  await tictacBoard.getByRole('button', { name: 'Cell 3' }).click();
   //await page.getByRole('image', { name: 'X' })
 
   // Expect a image called "X"

From 5edb7baf5fef27176a841638564efdbae3515d5e Mon Sep 17 00:00:00 2001
From: TorunW <torun.wikstrom@gmail.com>
Date: Wed, 18 Mar 2026 13:31:55 +0100
Subject: [PATCH 2/2] bug fix

---
 tests/example.spec.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/example.spec.ts b/tests/example.spec.ts
index 5abf9c7..fa12220 100644
--- a/tests/example.spec.ts
+++ b/tests/example.spec.ts
@@ -9,7 +9,7 @@ test('Verify that there is 9 cells and that all are enabled', async ({
 }) => {
   const { tictacBoard } = board;
 
-  await page.goto('http://localhost:3000/');
+  await page.goto('https://tic-tac-toe-tau-lyart-50.vercel.app/');
 
   const cells = tictacBoard.getByRole('button');
   await expect(cells).toHaveCount(9);