update(ci): use docker image for tests (#170)

.github/workflows/playwright.yml

@@ -19,7 +19,9 @@ on:
 jobs:
   test:
     timeout-minutes: 60
-    runs-on: macos-14
+    runs-on: ubuntu-latest
+    container:
+      image: mcr.microsoft.com/playwright:v1.47.2-jammy
     steps:
       - name: Checkout Uplink Web directory 🔖
         uses: actions/checkout@v4
@@ -41,21 +43,14 @@ jobs:
 
       - name: Install dependencies for Testing Repo 📦
         working-directory: automated-tests
-        run: npm install
-
-      - name: Install Playwright Browsers
-        working-directory: automated-tests
-        run: npx playwright install --with-deps
+        run: npm ci
 
       - name: Install Allure Commandline
         run: npm install -g allure-commandline
 
-      - name: Run server for Uplink Web
-        run: npm run dev &
-
       - name: Run Playwright tests
         working-directory: automated-tests
-        run: PLAYWRIGHT_JSON_OUTPUT_NAME=report.json npx playwright test
+        run: PLAYWRIGHT_JSON_OUTPUT_NAME=report.json npx playwright test -c playwright.ci.config.ts
 
       - uses: daun/playwright-report-summary@v3
         if: always()

.gitignore

@@ -1,6 +1,5 @@
 # Testing Uplink Web
 node_modules/
-package-lock.json
 
 ### Linux ###
 *~

playwright.ci.config.ts

@@ -0,0 +1,80 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./playwright/specs",
+  snapshotPathTemplate: "./playwright/snapshots/{testFilePath}/{arg}{ext}",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 1,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: [
+    ["html", { outputFolder: "playwright-report" }],
+    ["json", { outputFile: "playwright-report/report.json" }],
+    ["allure-playwright", { outputFolder: "allure-results" }],
+    [
+      "@estruyf/github-actions-reporter",
+      { title: "Automated Test Report", useDetails: true },
+    ],
+  ],
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  timeout: 120000,
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: "http://localhost:5173/",
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    testIdAttribute: "data-cy",
+    actionTimeout: 30000,
+    video: "retain-on-failure",
+    screenshot: "only-on-failure",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "Automated Tests on Chrome Desktop",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  // Run your local dev server before starting the tests
+  webServer: {
+    command: "cd .. && npm run dev",
+    url: "http://127.0.0.1:5173",
+    reuseExistingServer: !process.env.CI,
+  },
+});

playwright/PageObjects/Settings/SettingsCustomizations.ts

@@ -94,9 +94,7 @@ export class SettingsCustomizations extends SettingsBase {
     this.emojiFontSectionRandomEmoji = this.page.getByTestId(
       "emoji-font-random-emoji",
     );
-    this.emojiFontSectionSelector = this.page.locator(
-      '[data-cy^="selector-current-emoji-font-"]',
-    );
+    this.emojiFontSectionSelector = this.emojiFontSection.locator("select");
     this.emojiFontSectionSelectorOption =
       this.emojiFontSectionSelector.getByTestId("select-option");
     this.emojiFontSectionText = this.emojiFontSection.getByTestId(
@@ -107,9 +105,7 @@ export class SettingsCustomizations extends SettingsBase {
     this.fontSectionLabel = this.fontSection.getByTestId(
       "setting-section-label",
     );
-    this.fontSectionSelector = this.page.locator(
-      '[data-cy^="selector-current-font-"]',
-    );
+    this.fontSectionSelector = this.fontSection.locator("select");
     this.fontSectionSelectorOption =
       this.fontSectionSelector.getByTestId("select-option");
     this.fontSectionText = this.fontSection.getByTestId("setting-section-text");
@@ -139,9 +135,7 @@ export class SettingsCustomizations extends SettingsBase {
     this.identiconSectionProfilePicture = this.page.getByTestId(
       "identicon-profile-picture",
     );
-    this.identiconSectionSelector = this.page.locator(
-      '[data-cy^="selector-current-identicon-"]',
-    );
+    this.identiconSectionSelector = this.identiconSection.locator("select");
     this.identiconSectionSelectorOption =
       this.identiconSectionSelector.getByTestId("select-option");
     this.identiconSectionText = this.identiconSection.getByTestId(
@@ -207,24 +201,17 @@ export class SettingsCustomizations extends SettingsBase {
   }
 
   async selectDefaultProfileStyle(style: string) {
-    await this.page
-      .locator('[data-cy^="selector-current-identicon-"]')
+    await this.identiconSection
       .locator("select")
       .selectOption({ label: style });
   }
 
   async selectEmojiFont(font: string) {
-    await this.page
-      .locator('[data-cy^="selector-current-emoji-font-"]')
-      .locator("select")
-      .selectOption({ label: font });
+    await this.emojiFontSection.locator("select").selectOption({ label: font });
   }
 
   async selectFont(font: string) {
-    await this.page
-      .getByTestId("selector-current-font-Poppins")
-      .locator("select")
-      .selectOption({ label: font });
+    await this.fontSection.locator("select").selectOption({ label: font });
   }
 
   async selectTheme(theme: string) {