add test checking 9 cells, valid moves, invalid moves

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'>

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

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';

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;
 
-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' });
 
+  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;
+
+  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"