Add playwright tests with Github action

jest.config.ts

@@ -167,9 +167,7 @@ const config: Config = {
     // ],
 
     // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
-    // testPathIgnorePatterns: [
-    //   "/node_modules/"
-    // ],
+    testPathIgnorePatterns: ['/node_modules/', '<rootDir>/tst-e2e'],
 
     // The regexp pattern or array of patterns that Jest uses to detect test files
     // testRegex: [],

playwright.config.ts

@@ -1,5 +1,8 @@
 import { defineConfig, devices } from '@playwright/test'
 
+const PORT = process.env.PORT || 3000
+const BASE_URL = process.env.BASE_URL || `http://localhost:${PORT}`
+
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
@@ -10,7 +13,7 @@ import { defineConfig, devices } from '@playwright/test'
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-    testDir: './tst/e2e',
+    testDir: './tst-e2e',
     /* Run tests in files in parallel */
     fullyParallel: true,
     /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -24,7 +27,7 @@ export default defineConfig({
     /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
     use: {
         /* Base URL to use in actions like `await page.goto('/')`. */
-        // baseURL: 'http://127.0.0.1:3000',
+        baseURL: BASE_URL,
 
         /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
         trace: 'on-first-retry'
@@ -35,17 +38,17 @@ export default defineConfig({
         {
             name: 'chromium',
             use: { ...devices['Desktop Chrome'] }
-        },
+        }
 
-        {
-            name: 'firefox',
-            use: { ...devices['Desktop Firefox'] }
-        },
+        // {
+        //     name: 'firefox',
+        //     use: { ...devices['Desktop Firefox'] }
+        // },
 
-        {
-            name: 'webkit',
-            use: { ...devices['Desktop Safari'] }
-        }
+        // {
+        //     name: 'webkit',
+        //     use: { ...devices['Desktop Safari'] }
+        // }
 
         /* Test against mobile viewports. */
         // {
@@ -66,12 +69,12 @@ export default defineConfig({
         //   name: 'Google Chrome',
         //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
         // },
-    ]
+    ],
 
     /* Run your local dev server before starting the tests */
-    // webServer: {
-    //   command: 'npm run start',
-    //   url: 'http://127.0.0.1:3000',
-    //   reuseExistingServer: !process.env.CI,
-    // },
+    webServer: {
+        command: 'yarn dev',
+        url: BASE_URL,
+        reuseExistingServer: !process.env.CI
+    }
 })

tst-e2e/fixtures/my-test.ts

@@ -0,0 +1,15 @@
+import { test as base } from '@playwright/test'
+import { StandardPage } from './standard-page'
+
+type MyFixtures = {
+    standardPage: StandardPage
+}
+
+export const test = base.extend<MyFixtures>({
+    standardPage: async ({ page }, use) => {
+        const standardPage = new StandardPage(page)
+        await standardPage.goto()
+
+        await use(standardPage)
+    }
+})

tst-e2e/fixtures/standard-page.ts

@@ -0,0 +1,24 @@
+import type { Page, Locator } from '@playwright/test'
+
+export class StandardPage {
+    public readonly menu: Locator
+    public readonly heading: Locator
+
+    constructor(public readonly page: Page) {
+        this.menu = this.page.getByLabel('open drawer')
+        this.heading = this.page.locator('h1')
+    }
+
+    async goto() {
+        await this.page.goto('/')
+    }
+
+    async gotoMenuItem(menuItemName: string) {
+        await this.menu.click()
+        await this.page.getByRole('menuitem', { name: menuItemName }).click()
+    }
+
+    async gotoLink(linkName: string) {
+        await this.page.getByRole('link', { name: linkName }).click()
+    }
+}

tst-e2e/index.spec.ts

@@ -0,0 +1,29 @@
+import { expect } from '@playwright/test'
+import { test } from './fixtures/my-test'
+
+test.describe('Navigation', () => {
+    test('test navigation to all standardPages', async ({ standardPage }) => {
+        await expect(standardPage.heading).toContainText('Hello human')
+
+        await standardPage.gotoMenuItem('Blog')
+        await expect(standardPage.heading).toContainText('Blog')
+
+        await standardPage.gotoMenuItem('Apps')
+        await expect(standardPage.heading).toContainText('Apps')
+
+        await standardPage.gotoMenuItem('CV')
+        await expect(standardPage.heading).toContainText('CV')
+
+        await standardPage.gotoLink('Uses')
+        await expect(standardPage.heading).toContainText('Uses')
+
+        await standardPage.gotoLink('Kudos')
+        await expect(standardPage.heading).toContainText('Kudos')
+
+        await standardPage.gotoLink('Values')
+        await expect(standardPage.heading).toContainText('Values')
+
+        await standardPage.gotoLink('Privacy policy')
+        await expect(standardPage.heading).toContainText('Privacy policy')
+    })
+})