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;
+
+ 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({
+ 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..fa12220 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;
-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"