feat: page View Model для тестов Playwright

tests/counter.test.ts

@@ -1,21 +1,27 @@
 import {test, expect} from "@playwright/test"
 
+import CounterPage from "./poms/counter"
+
 // Checking is counter works correctly
-test("server started correctly", async ({page}) => {
-  await page.goto("/")
-
-  const counterInc = "data-test=counter_inc"
-  const counterDec = "data-test=counter_dec"
-  const counterValue = page.locator("data-test=counter_value")
-
-  expect(counterValue).toHaveText("0")
-  await page.click(counterInc)
-  expect(counterValue).toHaveText("1")
-  await page.click(counterInc)
-  expect(counterValue).toHaveText("2")
-
-  await page.click(counterDec)
-  expect(counterValue).toHaveText("1")
-  await page.click(counterDec)
-  expect(counterValue).toHaveText("0")
+test("counter works correctly", async ({page}) => {
+  const pom = new CounterPage(page)
+  await pom.goto()
+
+  const assertValue = async (expected: string) => {
+    expect(await pom.getValue()).toBe(expected)
+  }
+
+  await assertValue("0")
+
+  await pom.increment()
+  await assertValue("1")
+
+  await pom.increment()
+  await assertValue("2")
+
+  await pom.decrement()
+  await assertValue("1")
+
+  await pom.decrement()
+  await assertValue("0")
 })

tests/poms/counter.ts

@@ -0,0 +1,32 @@
+import {Page, Locator} from "@playwright/test"
+
+class CounterPage {
+  page: Page
+  value: Locator
+  incrementButton = "data-test=counter_inc"
+  decrementButton = "data-test=counter_dec"
+
+  constructor(page: Page) {
+    this.page = page
+
+    this.value = page.locator("data-test=counter_value")
+  }
+
+  async goto() {
+    await this.page.goto("/")
+  }
+
+  getValue(): Promise<string | null> {
+    return this.value.textContent()
+  }
+
+  increment(): Promise<void> {
+    return this.page.click(this.incrementButton)
+  }
+
+  decrement(): Promise<void> {
+    return this.page.click(this.decrementButton)
+  }
+}
+
+export default CounterPage

tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "include": ["src/**/*", "next-env.d.ts", "playwright.config.ts"],
+  "include": ["src/**/*", "next-env.d.ts", "playwright.config.ts", "./tests/**/*.ts"],
   "exclude": ["node_modules"],
   "compilerOptions": {
     "paths": {