feat: базовые тесты playwright

.gitignore

@@ -4,3 +4,4 @@
 /.next
 /.env
 /build
+/test-results

package.json

@@ -19,13 +19,18 @@
     "lint:next": "next lint",
     "test": "concurrently -c green \"npm:test:*\"",
     "test:unit": "jest",
+    "test:e2e": "npm run playwright:test",
+    "playwright:test": "playwright test",
+    "playwright:install": "playwright install",
+    "playwright:inspect": "PWDEBUG=1 playwright test",
     "release": "standard-version",
     "commit": "git add . && cz"
   },
   "devDependencies": {
     "@arkweid/lefthook": "0.7.7",
     "@commitlint/cli": "16.1.0",
     "@commitlint/config-conventional": "16.0.0",
+    "@playwright/test": "^1.18.1",
     "@testing-library/react-hooks": "7.0.2",
     "@types/jest": "27.4.0",
     "@types/node": "17.0.5",
@@ -52,7 +57,6 @@
     "prettier": "2.5.1",
     "react-test-renderer": "17.0.2",
     "standard-version": "9.3.2",
-    "start-server-and-test": "1.14.0",
     "tailwindcss": "3.0.18",
     "ts-jest": "27.1.3",
     "ts-node": "10.4.0",

playwright.config.ts

@@ -0,0 +1,24 @@
+/* eslint-disable import/no-extraneous-dependencies */
+
+import {PlaywrightTestConfig} from "@playwright/test"
+
+const isCI = !!process.env.CI
+
+const config: PlaywrightTestConfig = {
+  forbidOnly: isCI,
+  retries: isCI ? 2 : 0,
+  testDir: "./tests",
+  testMatch: /.*\.test\.ts/,
+  use: {
+    trace: "retain-on-failure",
+    video: "on-first-retry"
+  },
+  webServer: {
+    command: "npm run start",
+    port: 3000,
+    timeout: 120 * 1000,
+    reuseExistingServer: !isCI
+  }
+}
+
+export default config

src/components/Counter/Counter.tsx

@@ -8,11 +8,11 @@ interface Props {
 
 const Counter = ({value, onIncrement, onDecrement}: Props) => (
   <div className="flex items-center space-x-8 text-5xl">
-    <button onClick={onDecrement} type="button" data-cy="counter_dec">
+    <button onClick={onDecrement} type="button" data-test="counter_dec">
       -
     </button>
-    <span data-cy="counter_value">{value}</span>
-    <button onClick={onIncrement} type="button" data-cy="counter_inc">
+    <span data-test="counter_value">{value}</span>
+    <button onClick={onIncrement} type="button" data-test="counter_inc">
       +
     </button>
   </div>

tests/counter.test.ts

@@ -0,0 +1,21 @@
+import {test, expect} from "@playwright/test"
+
+// 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")
+})

tests/started.test.ts

@@ -0,0 +1,9 @@
+import {test, expect} from "@playwright/test"
+
+// Checking if the server has started (basic smoke test)
+test("server started correctly", async ({page}) => {
+  await page.goto("/")
+  const counterValue = page.locator("data-test=counter_value")
+
+  expect(counterValue).toHaveText("0")
+})

tsconfig.json

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