test: setup playwright e2e tests

Author: artemmufazalov

package-lock.json

@@ -53,7 +53,9 @@
     "eject": "react-scripts eject",
     "prepublishOnly": "npm run package",
     "typecheck": "tsc --noEmit",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "test:e2e:install": "npx playwright install --with-deps chromium",
+    "test:e2e": "npx playwright test --config=playwright.config.ts"
   },
   "lint-staged": {
     "*.{scss}": [
@@ -104,6 +106,7 @@
     "@gravity-ui/stylelint-config": "^1.0.1",
     "@gravity-ui/tsconfig": "^1.0.0",
     "@gravity-ui/uikit": "^3.20.2",
+    "@playwright/test": "^1.31.1",
     "@testing-library/jest-dom": "^5.15.0",
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",

package.json

@@ -0,0 +1,26 @@
+import {PlaywrightTestConfig, devices} from '@playwright/test';
+
+const baseUrl = process.env.PLAYWRIGHT_BASE_URL;
+
+const config: PlaywrightTestConfig = {
+    testDir: 'tests',
+    timeout: 2 * 60 * 1000,
+    // If there is no url provided, playwright starts webServer with the app in dev mode
+    webServer: baseUrl
+        ? undefined
+        : {
+              command: 'npm run dev',
+              port: 3000,
+          },
+    use: {
+        baseURL: baseUrl || 'http://localhost:3000',
+    },
+    projects: [
+        {
+            name: 'chromium',
+            use: {...devices['Desktop Chrome']},
+        },
+    ],
+};
+
+export default config;

playwright.config.ts

@@ -0,0 +1,15 @@
+import {test, expect} from '@playwright/test';
+
+test.describe('Test Tenants page', async () => {
+    test('Tenants page is OK', async ({page}) => {
+        const response = await page.goto('/tenants');
+        expect(response?.ok()).toBe(true);
+    });
+    test('Tenants page has tenants table', async ({page}) => {
+        await page.goto('/tenants');
+
+        // react-data-table has 2 table elements - for header and for the content
+        // so we select content table that is wrapped with .data-table__box
+        await expect(page.locator('.data-table__box').getByRole('table')).toBeVisible();
+    });
+});