Use postgres for playwright testing (#9104)

* Use postgres for playwright testing

- Should reduce issues with parallel tests

* Fix deps

* Harden playwright tests

.github/workflows/qc_checks.yaml

@@ -553,9 +553,28 @@ jobs:
     timeout-minutes: 60
     needs: ["pre-commit", "paths-filter"]
     if: needs.paths-filter.outputs.frontend == 'true' || needs.paths-filter.outputs.force == 'true'
+    services:
+      postgres:
+        image: postgres:15
+        env:
+          POSTGRES_DB: inventree
+          POSTGRES_USER: inventree_user
+          POSTGRES_PASSWORD: inventree_password
+        ports:
+          - 5432:5432
+        options: >-
+          --health-cmd "pg_isready -U testuser"
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+
     env:
-      INVENTREE_DB_ENGINE: sqlite3
-      INVENTREE_DB_NAME: /home/runner/work/InvenTree/db.sqlite3
+      INVENTREE_DB_ENGINE: postgresql
+      INVENTREE_DB_NAME: inventree
+      INVENTREE_DB_HOST: "127.0.0.1"
+      INVENTREE_DB_PORT: 5432
+      INVENTREE_DB_USER: inventree_user
+      INVENTREE_DB_PASSWORD: inventree_password
       INVENTREE_DEBUG: true
       INVENTREE_PLUGINS_ENABLED: false
       VITE_COVERAGE: true
@@ -570,6 +589,8 @@ jobs:
           npm: true
           install: true
           update: true
+          apt-dependency: postgresql-client libpq-dev
+          pip-dependency: psycopg2
       - name: Set up test data
         run: invoke dev.setup-test -iv
       - name: Rebuild thumbnails

src/frontend/playwright.config.ts

@@ -28,7 +28,7 @@ export default defineConfig({
   /* Run your local dev server before starting the tests */
   webServer: [
     {
-      command: 'yarn run dev',
+      command: 'yarn run dev --host',
       url: 'http://localhost:5173',
       reuseExistingServer: !process.env.CI,
       stdout: 'pipe',

src/frontend/tests/pui_settings.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from './baseFixtures.js';
 import { apiUrl } from './defaults.js';
-import { navigate } from './helpers.js';
+import { getRowFromCell, navigate } from './helpers.js';
 import { doQuickLogin } from './login.js';
 import { setSettingState } from './settings.js';
 
@@ -91,8 +91,12 @@ test('Settings - Admin', async ({ page }) => {
   // Adjust some "location type" items
   await page.getByRole('tab', { name: 'Location Types' }).click();
 
-  // Edit first item
-  await page.getByLabel('row-action-menu-0').click();
+  // Edit first item ('Room')
+  const roomCell = await page.getByRole('cell', { name: 'Room', exact: true });
+  const roomRow = await getRowFromCell(roomCell);
+
+  await roomRow.getByLabel(/row-action-menu-/i).click();
+
   await page.getByRole('menuitem', { name: 'Edit' }).click();
   await expect(page.getByLabel('text-field-name')).toHaveValue('Room');
 
@@ -100,14 +104,22 @@ test('Settings - Admin', async ({ page }) => {
   const oldDescription = await page
     .getByLabel('text-field-description')
     .inputValue();
+
   const newDescription = `${oldDescription} (edited)`;
 
   await page.getByLabel('text-field-description').fill(newDescription);
   await page.waitForTimeout(500);
   await page.getByRole('button', { name: 'Submit' }).click();
 
-  // Edit second item
-  await page.getByLabel('row-action-menu-1').click();
+  // Edit second item - 'Box (Large)'
+  const boxCell = await page.getByRole('cell', {
+    name: 'Box (Large)',
+    exact: true
+  });
+  const boxRow = await getRowFromCell(boxCell);
+
+  await boxRow.getByLabel(/row-action-menu-/i).click();
+
   await page.getByRole('menuitem', { name: 'Edit' }).click();
   await expect(page.getByLabel('text-field-name')).toHaveValue('Box (Large)');
   await expect(page.getByLabel('text-field-description')).toHaveValue(
@@ -116,11 +128,13 @@ test('Settings - Admin', async ({ page }) => {
   await page.getByRole('button', { name: 'Cancel' }).click();
 
   // Edit first item again (revert values)
-  await page.getByLabel('row-action-menu-0').click();
+  await roomRow.getByLabel(/row-action-menu-/i).click();
   await page.getByRole('menuitem', { name: 'Edit' }).click();
   await page.getByLabel('text-field-name').fill('Room');
   await page.waitForTimeout(500);
-  await page.getByLabel('text-field-description').fill(oldDescription);
+  await page
+    .getByLabel('text-field-description')
+    .fill(newDescription.replaceAll(' (edited)', ''));
   await page.waitForTimeout(500);
   await page.getByRole('button', { name: 'Submit' }).click();
 });