diff --git a/playwright/staging-tests/.envrc b/playwright/staging-tests/.envrc
new file mode 100644
index 00000000..1d953f4b
--- /dev/null
+++ b/playwright/staging-tests/.envrc
@@ -0,0 +1 @@
+use nix
diff --git a/playwright/staging-tests/.gitignore b/playwright/staging-tests/.gitignore
new file mode 100644
index 00000000..23750bad
--- /dev/null
+++ b/playwright/staging-tests/.gitignore
@@ -0,0 +1,11 @@
+node_modules/
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+*auth.json
+.env
+.direnv/
+/test-results/
+__pycache__
+*package-lock.json
diff --git a/playwright/staging-tests/README.md b/playwright/staging-tests/README.md
new file mode 100644
index 00000000..ac0de062
--- /dev/null
+++ b/playwright/staging-tests/README.md
@@ -0,0 +1,72 @@
+# Validation Tests
+
+These tests are designed to run from your local machine (i.e. not from a GitHub action or CI).
+The are intended to verify basic functionality is working after a deployment is made to staging, and prior to deployment to production.
+
+## Essential reading:
+
+* https://playwright.dev/
+* https://direnv.net/docs/installation.html
+
+## Setting up your environment
+
+Before you can run or record tests, you need to set up your environment.
+
+Running these tests require playwright set up on your local machine, as well as NodeJS.
+
+**NixOS**
+
+If you are a NixOS user, you can set up direnv and then cd into this directory in your shell.
+
+When you do so the first time, you will be prompted to allow direnv which you can do using this command:
+
+
+```
+direnv allow
+```
+
+>  This may take a while the first time as NixOS builds you a sandbox environment.
+
+**NON-NixOS**
+
+For a non-NixOS user(Debian/Ubuntu) set up your environment by the following commands:
+
+```bash
+npm install
+```
+
+To install playwright browsers with OS-level dependencies use:
+
+
+```bash
+npm playwright install --with-deps chromium
+```
+
+**NOTE:** This only works with Debian/Ubuntu as they recieve official support from playwright. It will also request your master password to install the dependencies.
+
+## Recording a test
+
+There is a bash helper script that will let you quickly create a new test:
+
+```
+Usage: ./record-test.sh TESTNAME
+e.g. ./record-test.sh mytest
+will write a new test to tests/mytest.spec.ts
+Do not use spaces in your test name.
+Test files MUST END in .spec.ts
+
+After recording your test, close the test browser.
+You can then run your test by doing:
+./run-tests.sh
+```
+
+
+>  The first time you record a test, it will store your session credentials in a file ending in ``auth.json``. This file should **NEVER** be committed to git / shared publicly. There is a gitignore rule to ensure this.
+
+## Running a test
+
+
+```
+./run-tests.sh
+```
+
diff --git a/playwright/staging-tests/base-url.sh b/playwright/staging-tests/base-url.sh
new file mode 100755
index 00000000..0e0b18d5
--- /dev/null
+++ b/playwright/staging-tests/base-url.sh
@@ -0,0 +1,4 @@
+#!/usr/bin/env bash
+
+echo "Setting BASE_URL for test site"
+BASE_URL=https://staging.plugins.qgis.org/
diff --git a/playwright/staging-tests/create-auth.sh b/playwright/staging-tests/create-auth.sh
new file mode 100755
index 00000000..386a0475
--- /dev/null
+++ b/playwright/staging-tests/create-auth.sh
@@ -0,0 +1,35 @@
+#!/usr/bin/env bash
+
+source base-url.sh
+
+source playwright-path.sh
+
+echo "This script will write a new test to tests/deleteme.spec.ts"
+echo "then delete it, leaving only the auth config."
+echo ""
+echo "When the playwright browser opens, log in to the site then exit."
+echo "After recording your test, close the test browser."
+echo "Recording auth token to auth.json"
+
+# File exists and write permission granted to user
+# show prompt
+echo "Continue? y/n"
+read ANSWER
+case $ANSWER in 
+  [yY] ) echo "Writing auth.json" ;;
+  [nN] ) echo "Cancelled."; exit ;;
+esac
+
+$PLAYWRIGHT \
+	codegen \
+	--target playwright-test \
+	--save-storage=auth.json \
+	-o tests/deleteme.spec.ts \
+	$BASE_URL
+
+# We are only interested in auth.json
+rm tests/deleteme.spec.ts
+
+echo "Auth file creation completed."
+echo "You can then run your tests by doing e.g.:"
+echo "playwright test --project chromium"
diff --git a/playwright/staging-tests/nodesource-install.sh b/playwright/staging-tests/nodesource-install.sh
new file mode 100755
index 00000000..eb2ef0f0
--- /dev/null
+++ b/playwright/staging-tests/nodesource-install.sh
@@ -0,0 +1,23 @@
+#!/usr/bin/env bash
+
+echo "NodeJS will be installed if not present"
+echo "sudo password will be required"
+
+USES_APT=$(which apt | grep -w "apt" | wc -l)
+USES_RPM=$(which rpm | grep -w "rpm" | wc -l)
+
+if [ $USES_APT -eq 1 ]; then 
+	curl -SLO https://deb.nodesource.com/nsolid_setup_deb.sh
+	sudo chmod 500 nsolid_setup_deb.sh
+	sudo ./nsolid_setup_deb.sh 20
+	sudo apt-get install nodejs -y
+
+elif [ $USES_RPM -eq 1 ]; then
+	curl -SLO https://rpm.nodesource.com/nsolid_setup_rpm.sh
+	sudo chmod 500 nsolid_setup_rpm.sh
+	sudo ./nsolid_setup_rpm.sh 20
+	sudo yum install nodejs -y --setopt=nodesource-nodejs.module_hotfixes=1
+fi
+
+echo "Done"
+echo ""
diff --git a/playwright/staging-tests/nsolid_setup_rpm.sh b/playwright/staging-tests/nsolid_setup_rpm.sh
new file mode 100755
index 00000000..0d1e2ddb
--- /dev/null
+++ b/playwright/staging-tests/nsolid_setup_rpm.sh
@@ -0,0 +1,75 @@
+#!/bin/sh
+set -e
+
+NSOLID_VERSION=$1
+
+################################
+##      Logger Function       ##
+################################
+logger() {
+  local message="$1"
+  local type="$2"
+  local length=${#message}
+  local line=$(printf "%-${length}s" | tr ' ' '-')
+  echo ""
+  case "$type" in
+    "info")
+      echo "\033[38;5;79m$line\033[0m"
+      echo "\033[38;5;79m$message\033[0m"
+      echo "\033[38;5;79m$line\033[0m"
+      ;;
+    "success")
+      echo "\033[1;32m$line\033[0m"
+      echo "\033[1;32m$message\033[0m"
+      echo "\033[1;32m$line\033[0m"
+      ;;
+    "error")
+      echo "\033[1;31m$line\033[0m"
+      echo "\033[1;31m$message\033[0m"
+      echo "\033[1;31m$line\033[0m"
+      ;;
+    *)
+      echo "\033[1;34m$line\033[0m"
+      echo "\033[1;34m$message\033[0m"
+      echo "\033[1;34m$line\033[0m"
+      ;;
+  esac
+  echo ""
+}
+
+
+################################
+##   Error handler function   ##
+################################
+handleError() {
+  local exit_code=$1
+  local error_message="$2"
+  logger "Error: $error_message (Exit Code: $exit_code)" "error"
+  exit $exit_code
+}
+
+################################
+##Function to validate version##
+################################
+getVersion() {
+  local NSOLID_VERSION=$1
+  regex='^[0-9][0-9]$'
+  if ! expr "$NSOLID_VERSION" : "$regex" > /dev/null; then
+    return 1
+  fi
+  logger "Info: Configuring repository for N|solid $NSOLID_VERSION" "info"
+}
+
+##################################
+##Function to configure the Repo##
+##################################
+configureRepo() {
+    local NSOLID_VERSION=$1
+    # Run 'yum install'
+    if ! yum install https://rpm.nodesource.com/pub_$NSOLID_VERSION.x/nodistro/repo/nodesource-release-nodistro-1.noarch.rpm -y; then
+        handleError "$?" "Failed to run yum install https://rpm.nodesource.com/pub_$NSOLID_VERSION.x/nodistro/repo/nodesource-release-nodistro-1.noarch.rpm -y"
+    fi
+}
+
+getVersion $NSOLID_VERSION || handleError $? "Must define a valid N|solid version"
+configureRepo $NSOLID_VERSION || handleError $? "Failed configuring repository"
diff --git a/playwright/staging-tests/package-lock.json b/playwright/staging-tests/package-lock.json
new file mode 100644
index 00000000..515588db
--- /dev/null
+++ b/playwright/staging-tests/package-lock.json
@@ -0,0 +1,91 @@
+{
+  "name": "staging-tests",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "staging-tests",
+      "version": "1.0.0",
+      "license": "ISC",
+      "devDependencies": {
+        "@playwright/test": "^1.40.1",
+        "@types/node": "^20.8.9"
+      }
+    },
+    "node_modules/@playwright/test": {
+      "version": "1.40.1",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.40.1.tgz",
+      "integrity": "sha512-EaaawMTOeEItCRvfmkI9v6rBkF1svM8wjl/YPRrg2N2Wmp+4qJYkWtJsbew1szfKKDm6fPLy4YAanBhIlf9dWw==",
+      "dev": true,
+      "dependencies": {
+        "playwright": "1.40.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/@types/node": {
+      "version": "20.9.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-20.9.2.tgz",
+      "integrity": "sha512-WHZXKFCEyIUJzAwh3NyyTHYSR35SevJ6mZ1nWwJafKtiQbqRTIKSRcw3Ma3acqgsent3RRDqeVwpHntMk+9irg==",
+      "dev": true,
+      "dependencies": {
+        "undici-types": "~5.26.4"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/playwright": {
+      "version": "1.40.1",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.40.1.tgz",
+      "integrity": "sha512-2eHI7IioIpQ0bS1Ovg/HszsN/XKNwEG1kbzSDDmADpclKc7CyqkHw7Mg2JCz/bbCxg25QUPcjksoMW7JcIFQmw==",
+      "dev": true,
+      "dependencies": {
+        "playwright-core": "1.40.1"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.40.1",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.40.1.tgz",
+      "integrity": "sha512-+hkOycxPiV534c4HhpfX6yrlawqVUzITRKwHAmYfmsVreltEl6fAZJ3DPfLMOODw0H3s1Itd6MDCWmP1fl/QvQ==",
+      "dev": true,
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "5.26.5",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
+      "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
+      "dev": true
+    }
+  }
+}
diff --git a/playwright/staging-tests/package.json b/playwright/staging-tests/package.json
new file mode 100644
index 00000000..34f70b08
--- /dev/null
+++ b/playwright/staging-tests/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "staging-tests",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {},
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@playwright/test": "^1.41.2",
+    "@types/node": "^20.8.9"
+  }
+}
diff --git a/playwright/staging-tests/playwright-path.sh b/playwright/staging-tests/playwright-path.sh
new file mode 100755
index 00000000..41a24a05
--- /dev/null
+++ b/playwright/staging-tests/playwright-path.sh
@@ -0,0 +1,83 @@
+#!/usr/bin/env bash
+
+echo "This script will discover the path to your playwright install"
+echo "If you are not in a NixOS environment and it is not installed,"
+echo "playwright will be installed."
+echo ""
+echo "At the end of calling this script , you should have a PLAYWRIGHT"
+echo ""
+
+# Are we on nixos or a distro with Nix installed for packages
+# Y
+  # Are we in direnv?
+  # Y: should all be set up
+  # N: run nix-shell
+#N
+ # Are we in a deb based distro?
+ # Are we in an rpm based distro?
+ # Are we on macOS?
+ # Are we in windows?
+
+HAS_PLAYWRIGHT=$(which playwright 2> /dev/null | grep -v "which: no" | wc -l)
+PLAYWRIGHT="playwright"
+if [ $HAS_PLAYWRIGHT -eq 0 ]; then
+	PLAYWRIGHT="npx playwright"
+  
+    	# check if OS is a deb based distro and uses apt
+    	USES_APT=$(which apt 2> /dev/null | grep -w "apt" | wc -l)
+		# check if OS is an rpm-based distro
+  		USES_RPM=$(which rpm | grep -w "rpm" | wc -l)
+    
+    	if [ $USES_APT -eq 1 ]; then
+			# check if nodejs is installed
+			HAS_NODEJS=$(which node | grep -w "node" | wc -l)
+
+			# if nodejs is present then
+    		if [ $HAS_NODEJS -eq 0 ]; then
+			source nodesource-install.sh
+    		fi
+
+    		# check if npm is present
+    		HAS_NPM=$(which npm | grep -w "npm" | wc -l)
+
+    		if [ $HAS_NPM -eq 1 ]; then
+				NPM="npm"
+				PLAYWRIGHT_INSTALL=$($NPM ls --depth 1 playwright | grep -w "@playwright/test" | wc -l)
+
+				if [ $PLAYWRIGHT_INSTALL -eq 0 ]; then
+					$NPM install -D @playwright/test@latest
+					$NPM ci
+					$PLAYWRIGHT install --with-deps chromium
+				fi
+
+    		fi
+
+  		elif [ $USES_RPM -eq 1 ]; then
+
+    			# check if nodejs is installed
+    			HAS_NODEJS=$(which node | grep -w "node" | wc -l)
+
+    			# if nodejs is present then
+    			if [ $HAS_NODEJS -eq 0 ]; then
+      				source nodesource-install.sh
+    			fi
+
+    			# check if npm is present
+    			HAS_NPM=$(which npm | grep -w "npm" | wc -l)
+
+    			if [ $HAS_NPM -eq 1 ]; then
+      				NPM="npm"
+					PLAYWRIGHT_INSTALL=$($NPM ls --depth 1 playwright | grep -w "@playwright/test" | wc -l)
+
+      				if [ $PLAYWRIGHT_INSTALL -eq 0 ]; then
+        				$NPM install -D @playwright/test@latest
+        				$NPM ci
+        				$PLAYWRIGHT install
+      				fi
+
+    			fi
+		fi
+fi
+
+echo "Done."
+echo ""
diff --git a/playwright/staging-tests/playwright.config.ts b/playwright/staging-tests/playwright.config.ts
new file mode 100644
index 00000000..665eb937
--- /dev/null
+++ b/playwright/staging-tests/playwright.config.ts
@@ -0,0 +1,87 @@
+
+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: './tests',
+  /* Tests timeout */
+  timeout: 30 * 1000,
+  /* 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 : 0,
+  /* 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',
+  /* 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: 'https://staging.plugins.qgis.org/',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    //baseURL: process.env.STAGING === '1' ? 'http://example.com' : 'http://127.0.0.1/'
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    // { name: 'setup', testMatch: /.*\.setup\.ts/ },
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'],
+      // Use prepared auth state.
+      storageState: 'auth.json',
+     },
+     // dependencies: ['setup'],
+    },
+    //
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+    //
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
+    /* 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: 'npm run start',
+  //   url: 'http://127.0.0.1:3000',
+  //   reuseExistingServer: !process.env.CI,
+  // },
+});
diff --git a/playwright/staging-tests/record-test.sh b/playwright/staging-tests/record-test.sh
new file mode 100755
index 00000000..6b4fb742
--- /dev/null
+++ b/playwright/staging-tests/record-test.sh
@@ -0,0 +1,44 @@
+#!/usr/bin/env bash
+
+source base-url.sh
+
+source playwright-path.sh
+
+if [ -z "$1" ]
+then
+  echo "Usage: $0 TESTNAME"
+  echo "e.g. $0 mytest"
+  echo "will write a new test to tests/mytest.spec.ts"
+  echo "Do not use spaces in your test name."
+  echo ""
+  echo "After recording your test, close the test browser."
+  echo "You can then run your test by doing:"
+  echo "npx playwright test tests/mytest.spec.py"
+  exit
+else
+  echo "Recording test to tests/${1}"
+fi
+
+if [ -w "tests/${1}.spec.ts" ]; then
+   # File exists and write permission granted to user
+   # show prompt
+   echo "File tests/${1}.spec.ts exists. Overwrite? y/n"
+   read ANSWER
+   case $ANSWER in 
+       [yY] ) echo "Writing recorded test to tests/${1}.spec.ts" ;;
+       [nN] ) echo "Cancelled."; exit ;;
+   esac
+fi
+TESTNAME=$1
+
+$PLAYWRIGHT \
+	codegen \
+	--target playwright-test \
+	--load-storage=auth.json \
+	-o tests/$1.spec.ts \
+	$BASE_URL
+
+
+echo "Test recording completed."
+echo "You can then run your test by doing:"
+echo "./run-tests.sh"
diff --git a/playwright/staging-tests/run-tests.sh b/playwright/staging-tests/run-tests.sh
new file mode 100755
index 00000000..5ff10ab7
--- /dev/null
+++ b/playwright/staging-tests/run-tests.sh
@@ -0,0 +1,14 @@
+#!/usr/bin/env bash
+
+source playwright-path.sh
+
+echo "This script will run the tests defined in tests/"
+echo "Before running the tests you need to create the auth config"
+echo ""
+
+$PLAYWRIGHT \
+    test \
+    --ui \
+    --project chromium
+
+echo "--done--"
diff --git a/playwright/staging-tests/shell.nix b/playwright/staging-tests/shell.nix
new file mode 100644
index 00000000..595c1454
--- /dev/null
+++ b/playwright/staging-tests/shell.nix
@@ -0,0 +1,28 @@
+let
+  # 
+  # Note that I am using a snapshot from NixOS unstable here
+  # so that we can use a more bleeding edge version which includes the test --ui . 
+  # If you want use a different version, go to nix packages search, and find the 
+  # github hash of the version you want to be using, then replace in the URL below.
+  #
+  nixpkgs = builtins.fetchTarball "https://github.com/NixOS/nixpkgs/archive/4059c4f71b3a7339261c0183e365fd8016f24bdb.tar.gz";
+  pkgs = import nixpkgs { config = { }; overlays = [ ]; };
+in
+with pkgs;
+mkShell {
+  buildInputs = [
+    nodejs
+    playwright-test
+    # python311Packages.playwright
+    # python311Packages.pytest
+  ];
+
+  PLAYWRIGHT_BROWSERS_PATH="${pkgs.playwright-driver.browsers}";
+
+  shellHook = ''
+    # Remove playwright from node_modules, so it will be taken from playwright-test
+    rm node_modules/@playwright/ -R
+    export PLAYWRIGHT_BROWSERS_PATH=${pkgs.playwright-driver.browsers}
+    export PLAYWRIGHT_SKIP_VALIDATE_HOST_REQUIREMENTS=true
+  '';
+}
diff --git a/playwright/staging-tests/tests/01-landing-page.spec.ts b/playwright/staging-tests/tests/01-landing-page.spec.ts
new file mode 100644
index 00000000..89a64e4e
--- /dev/null
+++ b/playwright/staging-tests/tests/01-landing-page.spec.ts
@@ -0,0 +1,124 @@
+import { test, expect } from '@playwright/test';
+
+let url = '/';
+
+test.use({
+  storageState: 'auth.json'
+});
+
+test('test', async ({ page }) => {
+  await page.goto(url);
+
+  await expect(page.locator('h2')).toContainText('QGIS plugins web portal');
+
+  await expect(page.getByRole('link', { name: 'QGIS', exact: true })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'QGIS Home' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'About plugins' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Plugins', exact: true })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Planet' })).toBeVisible();
+
+  await expect(page.getByRole('button', { name: 'Hub' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Login' })).toBeVisible();
+
+  await expect(page.getByPlaceholder('Search')).toBeVisible();
+
+  await expect(page.getByPlaceholder('Search')).toBeEmpty();
+
+  await expect(page.locator('#collapse-related-plugins')).toBeVisible();
+
+  await expect(page.getByRole('heading', { name: 'Featured plugins' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Processing R Provider' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Data Plotly' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Shape Tools' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Split Features On Steroids' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Plugin Builder' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'QGIS Resource Sharing' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Lat Lon Tools' }).first()).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Serval' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'qgis2web' }).first()).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'QuickMapServices' }).first()).toBeVisible();
+
+  await expect(page.getByRole('heading', { name: 'Updated plugins' })).toBeVisible();
+
+  await expect(page.locator('#maincolumn')).toContainText('QGIS plugins add additional functionality to the QGIS application.');
+
+  await expect(page.locator('#maincolumn')).toContainText('There is a collection of plugins ready to be used, available to download. These plugins can also be installed directly from the QGIS Plugin Manager within the QGIS application.');
+
+  await expect(page.getByRole('link', { name: 'available to download' })).toBeVisible();
+
+  await page.getByRole('link', { name: 'available to download' }).click();
+
+  await expect(page.getByRole('heading', { name: 'QGIS Python Plugins Repository' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: ' Upload a plugin' })).toBeVisible();
+
+  await page.getByRole('heading', { name: 'All plugins' }).click();
+
+  await page.goto(url);
+
+  await expect(page.locator('#maincolumn')).toContainText('Notes for plugin users');
+
+  await expect(page.getByRole('link', { name: 'Developer mailing-list' })).toBeVisible();
+
+  await expect(page.locator('#maincolumn')).toContainText('Resources for plugin authors');
+
+  await expect(page.getByRole('link', { name: 'pyQGIS cookbook' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'QGIS Python API' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'QGIS C++ API' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'publish your plugins' })).toBeVisible();
+
+  await expect(page.locator('#collapse-related-plugins')).toContainText('Popular plugins');
+
+  await expect(page.getByRole('link', { name: 'QuickMapServices' }).nth(1)).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'OpenLayers Plugin' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Semi-Automatic Classification' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'QuickOSM' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'mmqgis' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Profile tool' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Lat Lon Tools' }).nth(1)).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'qgis2web' }).nth(1)).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Qgis2threejs' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'HCMGIS' })).toBeVisible();
+
+  await expect(page.getByRole('button', { name: ' Plugin Tags ' })).toBeVisible();
+
+  await expect(page.locator('#main_bg div').filter({ hasText: 'Sustaining Members' })).toBeVisible();
+
+  await expect(page.getByRole('heading', { name: 'Sustaining Members' })).toBeVisible();
+
+  //await expect(page.getByRole('link', { name: 'Sustaining member logos' })).toBeVisible();
+  await expect(page.locator('#twitter').getByRole('link')).toBeVisible();
+
+  await expect(page.locator('#facebook').getByRole('link')).toBeVisible();
+
+  await expect(page.locator('#github').getByRole('link')).toBeVisible();
+  
+  await expect(page.getByRole('contentinfo')).toBeVisible();
+});
diff --git a/playwright/staging-tests/tests/02-plugins-page.spec.ts b/playwright/staging-tests/tests/02-plugins-page.spec.ts
new file mode 100644
index 00000000..b365b8c7
--- /dev/null
+++ b/playwright/staging-tests/tests/02-plugins-page.spec.ts
@@ -0,0 +1,146 @@
+import { test, expect } from '@playwright/test';
+
+let url = '/';
+
+test.use({
+  storageState: 'auth.json'
+});
+
+test('test', async ({ page }) => {
+  await page.goto(url);
+  await expect(page.locator('h2')).toContainText('QGIS plugins web portal');
+  await expect(page.getByRole('link', { name: 'Plugins', exact: true })).toBeVisible();
+  await page.getByRole('link', { name: 'Plugins', exact: true }).click();
+  await expect(page.locator('#maincolumn')).toContainText('QGIS Python Plugins Repository');
+  await expect(page.getByRole('link', { name: ' Upload a plugin' })).toBeVisible();
+  await expect(page.locator('#collapse-related-plugins')).toContainText('Plugins');
+  await expect(page.getByText('Featured')).toBeVisible();
+  await expect(page.getByRole('link', { name: 'All' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Stable' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'New Plugins' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Updated Plugins' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Experimental' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Popular' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Most voted' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Top downloads' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Most rated' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'QGIS Server plugins' })).toBeVisible();
+  await expect(page.getByRole('button', { name: ' Plugin Tags ' })).toBeVisible();
+  await page.getByRole('button', { name: ' Plugin Tags ' }).click();
+  await expect(page.locator('#tagcloudModal').getByText('Plugin Tags')).toBeVisible();
+  await page.locator('#tagcloudModal').getByText('×').click();
+  await expect(page.getByRole('heading', { name: 'All plugins' })).toBeVisible();
+  await expect(page.locator('#list_commands')).toContainText('2041 records found');
+  await expect(page.getByRole('cell', { name: 'Name' })).toBeVisible();
+  await expect(page.getByRole('cell', { name: 'Featured' })).toBeVisible();
+  await expect(page.getByRole('cell', { name: 'Downloads' })).toBeVisible();
+  await expect(page.getByRole('cell', { name: 'Author' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Latest Plugin Version' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Created on' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Stars (votes)' })).toBeVisible();
+  await expect(page.getByRole('cell', { name: 'Stable' })).toBeVisible();
+  await expect(page.getByRole('cell', { name: 'Exp.' })).toBeVisible();
+  await expect(page.locator('#pmain2176').getByRole('cell', { name: 'Plugin icon' })).toBeVisible();
+  await expect(page.getByRole('cell', { name: '3D City Builder' })).toBeVisible();
+  await expect(page.locator('#pmain2176').getByRole('cell', { name: '—' }).first()).toBeVisible();
+  await expect(page.getByRole('cell', { name: 'Arthur Ruf Hosang da Costa' })).toBeVisible();
+  await expect(page.getByRole('cell', { name: 'Jul 6,' })).toBeVisible();
+  await expect(page.getByRole('cell', { name: 'Oct 7, 2020' })).toBeVisible();
+  await expect(page.getByRole('cell', { name: '(65)' })).toBeVisible();
+  await expect(page.locator('#pmain2176').getByRole('cell', { name: '—' }).nth(1)).toBeVisible();
+  await expect(page.locator('#pmain2176').getByRole('cell', { name: '0.3' })).toBeVisible();
+  await page.getByRole('link', { name: '3D City Builder' }).click();
+  await expect(page.locator('#maincolumn')).toContainText('QGIS Python Plugins Repository');
+  await expect(page.getByRole('heading', { name: '3D City Builder Plugin icon' })).toBeVisible();
+  await expect(page.getByRole('link', { name: ' Download latest' })).toBeVisible();
+  await expect(page.getByRole('img', { name: 'Plugin icon' })).toBeVisible();
+  await expect(page.locator('#maincolumn')).toContainText('Plugin ID: 2176');
+  //await expect(page.getByRole('button', { name: 'Copy to clipboard ' })).toBeVisible();
+  await expect(page.getByRole('blockquote')).toContainText('Generate 3D models of urban areas using DEM.');
+  await expect(page.getByRole('link', { name: 'About', exact: true })).toBeVisible();
+  await page.getByRole('link', { name: 'Details' }).click();
+  await expect(page.getByText('Author')).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Arthur Ruf Hosang da Costa' })).toBeVisible();
+  await page.getByRole('link', { name: 'Versions' }).click();
+  await expect(page.getByRole('cell', { name: 'Version', exact: true })).toBeVisible();
+  await expect(page.getByRole('cell', { name: '0.3' })).toBeVisible();
+  await expect(page.getByText('Jul 6, 2021, 01:17 PM GMT+')).toBeVisible();
+  await expect(page.getByRole('link', { name: '0.2' })).toBeVisible();
+  await expect(page.getByText('Oct 7, 2020, 10:35 PM GMT+')).toBeVisible();
+  await expect(page.locator('section').filter({ hasText: 'Sustaining Members' })).toBeVisible();
+  await expect(page.locator('header')).toContainText('Sustaining Members');
+  //await expect(page.getByRole('link', { name: 'Sustaining member logos' })).toBeVisible();
+  await page.getByText('Featured').click();
+  await expect(page.locator('#list_commands')).toContainText('22 records found');
+  await expect(page.getByRole('link', { name: 'Processing R Provider' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Data Plotly' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Shape Tools' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Split Features On Steroids' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Plugin Builder' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'QGIS Resource Sharing' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Lat Lon Tools' })).toBeVisible();
+  await page.getByRole('link', { name: 'All', exact: true }).click();
+  await expect(page.locator('#list_commands')).toContainText('2041 records found');
+  await expect(page.getByRole('link', { name: '3D City Builder' })).toBeVisible();
+  await expect(page.getByRole('link', { name: '3DCityDB Tools' })).toBeVisible();
+  await page.getByRole('link', { name: 'Stable' }).click();
+  await expect(page.locator('#list_commands')).toContainText('1534 records found');
+  await expect(page.getByRole('link', { name: '3DCityDB Tools' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'AGIS' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'AGT - Archaeological' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'ALS Downloader' })).toBeVisible();
+  await page.getByRole('link', { name: 'New Plugins' }).click();
+  await expect(page.locator('#list_commands')).toContainText('18 records found');
+  await expect(page.getByRole('link', { name: 'Environmental Data Retrival' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'QTalsim' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'RubberSheetingEtc' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'OpenLog' })).toBeVisible();
+  await page.getByRole('link', { name: 'Updated Plugins' }).click();
+  await expect(page.locator('#list_commands')).toContainText('98 records found');
+  await expect(page.getByRole('link', { name: 'Speckle', exact: true })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'QGIS Cloud Plugin' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'PgMetadata' })).toBeVisible();
+  await page.getByRole('link', { name: 'Experimental' }).click();
+  await expect(page.locator('#list_commands')).toContainText('951 records found');
+  await expect(page.getByRole('link', { name: '3D City Builder' })).toBeVisible();
+  await expect(page.getByRole('link', { name: '3DCityDB Tools' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'A-Maps' })).toBeVisible();
+  await page.getByRole('link', { name: 'Popular' }).click();
+  await expect(page.locator('#list_commands')).toContainText('1960 records found');
+  await expect(page.getByRole('link', { name: 'QuickMapServices' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'OpenLayers Plugin' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Semi-Automatic Classification' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'QuickOSM' })).toBeVisible();
+  await expect(page.getByRole('heading', { name: 'Popular plugins' })).toBeVisible();
+  await page.getByRole('link', { name: 'Most voted' }).click();
+  await expect(page.locator('#maincolumn')).toContainText('Most voted plugins');
+  await expect(page.getByRole('link', { name: 'OpenLayers Plugin' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'QuickMapServices' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Semi-Automatic Classification' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'qgis2web' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'qgis2web' })).toBeVisible();
+  await page.getByRole('link', { name: 'Top downloads' }).click();
+  await expect(page.locator('#maincolumn')).toContainText('Most downloaded plugins');
+  await expect(page.locator('#list_commands')).toContainText('1960 records found');
+  await expect(page.getByRole('link', { name: 'QuickMapServices' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'OpenLayers Plugin' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Semi-Automatic Classification' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'QuickOSM' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'mmqgis' })).toBeVisible();
+  await page.getByRole('link', { name: 'Most rated' }).click();
+  await expect(page.locator('#maincolumn')).toContainText('Most rated plugins');
+  await expect(page.locator('#list_commands')).toContainText('1960 records found');
+  await expect(page.getByRole('link', { name: 'D4C Plugin' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Terraform' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Otoklim' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Cloudant Client' })).toBeVisible();
+  await page.getByRole('link', { name: 'QGIS Server plugins' }).click();
+  await page.getByRole('heading', { name: 'QGIS Server plugins' }).click();
+  await expect(page.locator('#list_commands')).toContainText('11 records found');
+  await expect(page.getByRole('link', { name: 'Data Plotly' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'GeoJson Renderer' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'HelloServer' })).toBeVisible();
+  await expect(page.getByRole('link', { name: 'Lizmap server' })).toBeVisible();
+  await page.getByRole('link', { name: 'Click to toggle descriptions.' }).click();
+  await page.getByRole('link', { name: 'Click to toggle descriptions.' }).click();
+});
diff --git a/playwright/staging-tests/tests/03-planet.spec.ts b/playwright/staging-tests/tests/03-planet.spec.ts
new file mode 100644
index 00000000..d4435296
--- /dev/null
+++ b/playwright/staging-tests/tests/03-planet.spec.ts
@@ -0,0 +1,62 @@
+import { test, expect } from '@playwright/test';
+
+let url = '/';
+
+test.use({
+  storageState: 'auth.json'
+});
+
+test('test', async ({ page }) => {
+  await page.goto(url);
+
+  await expect(page.locator('h2')).toContainText('QGIS plugins web portal');
+
+  await expect(page.getByRole('link', { name: 'Planet' })).toBeVisible();
+
+  await page.getByRole('link', { name: 'Planet' }).click();
+
+  await expect(page.getByRole('heading', { name: 'QGIS Planet' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'New point clouds and mesh' })).toBeVisible();
+
+  await expect(page.locator('#render-point-clouds-as-a-surface-in-2d-map-views')).toContainText('Render point clouds as a surface in 2D map views');
+
+  await expect(page.getByRole('img', { name: 'Point clouds as surface', exact: true })).toBeVisible();
+
+  await expect(page.getByRole('img', { name: 'Point clouds as surface with' })).toBeVisible();
+
+  await expect(page.getByText('Point clouds as surface with')).toBeVisible();
+
+  await expect(page.getByRole('img', { name: 'Point clouds styling panel' })).toBeVisible();
+
+  await expect(page.locator('#flexible-styling-of-classes')).toContainText('Flexible styling of classes');
+
+  await expect(page.getByRole('img', { name: 'Assigning size and opacity to' })).toBeVisible();
+
+  await expect(page.getByRole('img', { name: 'Point clouds with different' })).toBeVisible();
+
+  await expect(page.locator('#set-3d-map-view-extent-in-2d-map')).toContainText('Set 3D map view extent in 2D map');
+
+  await expect(page.getByRole('img', { name: 'Interactive selection of 3D' })).toBeVisible();
+
+  await expect(page.locator('#python-api-for-3d-views')).toContainText('Python API for 3D views');
+
+  await expect(page.getByRole('img', { name: 'Changing 3D view settings' })).toBeVisible();
+
+  await expect(page.locator('#more-point-clouds-attributes')).toContainText('More point clouds attributes');
+
+  await expect(page.locator('#performance-enhancement-for-rendering')).toContainText('Performance enhancement for rendering');
+
+  await expect(page.locator('#labels-for-mesh-layer')).toContainText('Labels for mesh layer');
+
+  await expect(page.getByRole('img', { name: 'Label settings for mesh layers' })).toBeVisible();
+
+  await expect(page.getByRole('img', { name: 'Example of labels on a mesh' })).toBeVisible();
+
+  await expect(page.locator('#want-more-changes-in-qgis')).toContainText('Want more changes in QGIS?');
+
+  await expect(page.locator('section').filter({ hasText: 'Sustaining Members' })).toBeVisible();
+
+  await expect(page.locator('header')).toContainText('Sustaining Members');
+
+});
diff --git a/playwright/staging-tests/tests/04-hub-styles.spec.ts b/playwright/staging-tests/tests/04-hub-styles.spec.ts
new file mode 100644
index 00000000..85689e3f
--- /dev/null
+++ b/playwright/staging-tests/tests/04-hub-styles.spec.ts
@@ -0,0 +1,213 @@
+import { test, expect } from '@playwright/test';
+
+let url = '/';
+
+test.use({
+  storageState: 'auth.json'
+});
+
+test('test', async ({ page }) => {
+  await page.goto(url);
+
+  await expect(page.locator('h2')).toContainText('QGIS plugins web portal');
+
+  await expect(page.getByRole('button', { name: 'Hub' })).toBeVisible();
+
+  await page.getByRole('button', { name: 'Hub' }).click();
+
+  await page.getByRole('menuitem', { name: 'Styles' }).click();
+
+  await expect(page.locator('#maincolumn')).toContainText('QGIS Style');
+
+  await expect(page.locator('#maincolumn')).toContainText('163 records found.');
+
+  await expect(page.getByRole('heading', { name: 'All Styles' })).toBeVisible();
+
+  await expect(page.locator('.frame-image-demo > a:nth-child(2)').first()).toBeVisible();
+
+  await expect(page.locator('div:nth-child(2) > .galery > .frame-image-demo').first()).toBeVisible();
+
+  await expect(page.locator('div:nth-child(3) > .galery > .frame-image-demo').first()).toBeVisible();
+
+  await expect(page.locator('#maincolumn div').filter({ hasText: 'Функціональне Призначення Територій Проектне Території Закладів З Обслуговування' }).nth(3)).toBeVisible();
+
+  await expect(page.locator('div:nth-child(6) > div:nth-child(2) > .galery > .frame-image-demo')).toBeVisible();
+
+  await expect(page.locator('div:nth-child(6) > div:nth-child(3) > .galery > .frame-image-demo')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: ' Upload Style' })).toBeVisible();
+
+  await expect(page.getByRole('heading', { name: 'Style', exact: true })).toBeVisible();
+
+  await page.getByRole('link', { name: 'Approved' }).click();
+
+  await expect(page.locator('#maincolumn')).toContainText('QGIS Style');
+
+  await expect(page.getByRole('cell', { name: 'Name  ' })).toBeVisible();
+
+  await expect(page.getByRole('cell', { name: 'Type  ' })).toBeVisible();
+
+  await expect(page.getByRole('cell', { name: '  ' })).toBeVisible();
+
+  await expect(page.getByRole('cell', { name: 'Creator  ' })).toBeVisible();
+
+  await expect(page.getByRole('cell', { name: 'Upload Date  ' })).toBeVisible();
+
+  await expect(page.getByRole('row', { name: 'Style icon Elevation Ramp' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Elevation Ramp' })).toBeVisible();
+
+  await expect(page.getByRole('row', { name: 'Style icon Bite Of My' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Bite Of My Sandwich' })).toBeVisible();
+
+  await expect(page.getByRole('row', { name: 'Style icon Bite Of My' }).getByRole('link').nth(1)).toBeVisible();
+
+  const downloadPromise = page.waitForEvent('download');
+
+  await page.getByRole('row', { name: 'Style icon Elevation Ramp' }).getByRole('link').nth(1).click();
+
+  const download = await downloadPromise;
+
+  await expect(page.getByRole('heading', { name: 'Style Type' })).toBeVisible();
+
+  await page.getByRole('link', { name: 'Color Ramp' }).click();
+
+  await expect(page.locator('#maincolumn')).toContainText('QGIS Style');
+
+  await expect(page.getByRole('heading', { name: 'Color Ramp Styles' })).toBeVisible();
+
+  await expect(page.locator('#maincolumn')).toContainText('14 records found.');
+
+  await expect(page.getByRole('row', { name: 'Style icon Elevation Ramp' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Elevation Ramp' })).toBeVisible();
+
+  await expect(page.getByRole('row', { name: 'Style icon Elevation Ramp' }).getByRole('link').nth(1)).toBeVisible();
+
+  await page.getByRole('link', { name: '' }).click();
+
+  await page.getByRole('link', { name: '' }).click();
+
+  await expect(page.locator('.frame-image-demo').first()).toBeVisible();
+
+  await expect(page.locator('div:nth-child(2) > .galery > .frame-image-demo').first()).toBeVisible();
+
+  await page.getByRole('link', { name: '' }).click();
+
+  await page.getByRole('link', { name: 'Elevation Ramp' }).click();
+
+  await expect(page.getByRole('heading', { name: 'Elevation Ramp' })).toBeVisible();
+
+  await expect(page.getByRole('img', { name: 'image' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: ' Download' })).toBeVisible();
+
+  await page.getByRole('heading', { name: 'QGIS Style' }).click();
+
+  await page.getByRole('link', { name: 'Fill' }).click();
+
+  await expect(page.getByRole('heading', { name: 'QGIS Style' })).toBeVisible();
+
+  await expect(page.getByRole('heading', { name: 'Fill Styles' })).toBeVisible();
+
+  await expect(page.locator('#maincolumn')).toContainText('81 records found.');
+
+  await expect(page.getByRole('row', { name: 'Style icon Dormido Rough Fill' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Dormido Rough' })).toBeVisible();
+
+  await expect(page.getByRole('row', { name: 'Style icon Bricks Fill 1506' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Bricks' })).toBeVisible();
+
+  await expect(page.getByRole('row', { name: 'Style icon Denim Fill 943' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Denim' })).toBeVisible();
+
+  await page.getByRole('link', { name: 'Line' }).click();
+
+  await expect(page.locator('#maincolumn')).toContainText('QGIS Style');
+
+  await expect(page.getByRole('heading', { name: 'Line Styles' })).toBeVisible();
+
+  await expect(page.locator('#maincolumn')).toContainText('29 records found.');
+
+  await expect(page.getByRole('row', { name: 'Style icon Barb Wire Line' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Barb Wire' })).toBeVisible();
+
+  await expect(page.getByRole('row', { name: 'Style icon Measure Line Line' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Measure Line' })).toBeVisible();
+
+  await expect(page.getByRole('row', { name: 'Style icon Pen, Pencil and' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Pen, Pencil and more' })).toBeVisible();
+
+  await expect(page.getByRole('row', { name: 'Style icon Zipper Line 1070' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Zipper' })).toBeVisible();
+
+  await page.getByRole('link', { name: 'Legend Patch' }).click();
+
+  await expect(page.locator('#maincolumn')).toContainText('QGIS Style');
+
+  await expect(page.getByRole('heading', { name: 'Legend Patch Styles' })).toBeVisible();
+
+  await expect(page.locator('#maincolumn')).toContainText('6 records found.');
+
+  await expect(page.getByRole('row', { name: 'Style icon Bite Of My' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Bite Of My Sandwich' })).toBeVisible();
+
+  await expect(page.getByRole('row', { name: 'Style icon Italian regions' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Italian regions' })).toBeVisible();
+
+  await expect(page.getByRole('row', { name: 'Style icon Basic Legend' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Basic Legend Patches Set' })).toBeVisible();
+
+  await expect(page.getByRole('row', { name: 'Style icon States Brazil' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'States Brazil' })).toBeVisible();
+
+  await expect(page.getByRole('row', { name: 'Style icon Brasilian Biomes' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Brasilian Biomes' })).toBeVisible();
+
+  await expect(page.getByRole('row', { name: 'Style icon Philippines' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Philippines Administrative' })).toBeVisible();
+
+  await expect(page.locator('section').filter({ hasText: 'Sustaining Members' })).toBeVisible();
+
+  await page.getByRole('link', { name: 'Marker' }).click();
+
+  await expect(page.locator('#maincolumn')).toContainText('QGIS Style');
+
+  await expect(page.getByRole('heading', { name: 'Marker Styles' })).toBeVisible();
+
+  await expect(page.locator('#maincolumn')).toContainText('33 records found.');
+
+  await expect(page.getByRole('row', { name: 'Style icon Summer Travel' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Summer Travel Vectors -' })).toBeVisible();
+
+  await expect(page.locator('tr:nth-child(2) > td').first()).toBeVisible();
+
+  await expect(page.getByRole('link', { name: '国土空间总体规划样式库：用地用海分类配色指引表' })).toBeVisible();
+
+  await expect(page.getByRole('row', { name: 'Style icon ABK Symbole NRW' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'ABK Symbole NRW' })).toBeVisible();
+
+  await page.getByRole('link', { name: 'Labelsetting' }).click();
+
+  await expect(page.locator('#maincolumn')).toContainText('QGIS Style');
+
+  await page.getByRole('heading', { name: 'Labelsetting Styles' }).click();
+
+  await expect(page.locator('#maincolumn')).toContainText('No data.');
+});
diff --git a/playwright/staging-tests/tests/05-hub-projects.spec.ts b/playwright/staging-tests/tests/05-hub-projects.spec.ts
new file mode 100644
index 00000000..a69bc288
--- /dev/null
+++ b/playwright/staging-tests/tests/05-hub-projects.spec.ts
@@ -0,0 +1,58 @@
+import { test, expect } from '@playwright/test';
+
+let url = '/';
+
+test.use({
+  storageState: 'auth.json'
+});
+
+test('test', async ({ page }) => {
+  await page.goto(url);
+
+  await expect(page.locator('h2')).toContainText('QGIS plugins web portal');
+
+  await expect(page.getByRole('button', { name: 'Hub' })).toBeVisible();
+
+  await page.getByRole('button', { name: 'Hub' }).click();
+
+  await page.getByRole('menuitem', { name: 'Projects' }).click();
+
+  await expect(page.locator('#maincolumn')).toContainText('QGIS GeoPackage');
+
+  await expect(page.getByRole('heading', { name: 'All GeoPackages' })).toBeVisible();
+
+  await expect(page.locator('#maincolumn')).toContainText('10 records found.');
+
+  await expect(page.locator('.frame-image-demo').first()).toBeVisible();
+
+  await expect(page.locator('div:nth-child(2) > .galery > .frame-image-demo').first()).toBeVisible();
+
+  await expect(page.locator('div:nth-child(3) > .galery > .frame-image-demo').first()).toBeVisible();
+
+  await expect(page.locator('div:nth-child(6) > div > .galery > .frame-image-demo').first()).toBeVisible();
+
+  await expect(page.locator('div:nth-child(6) > div:nth-child(2) > .galery > .frame-image-demo')).toBeVisible();
+
+  await expect(page.locator('div:nth-child(6) > div:nth-child(3) > .galery > .frame-image-demo')).toBeVisible();
+
+  await expect(page.locator('div:nth-child(7) > div > .galery > .frame-image-demo').first()).toBeVisible();
+
+  await expect(page.locator('div:nth-child(7) > div:nth-child(2) > .galery > .frame-image-demo')).toBeVisible();
+
+  await expect(page.locator('div:nth-child(7) > div:nth-child(3) > .galery > .frame-image-demo')).toBeVisible();
+
+  await expect(page.locator('div:nth-child(8) > .span4 > .galery > .frame-image-demo')).toBeVisible();
+
+  await expect(page.locator('section').filter({ hasText: 'Sustaining Members' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: ' Upload GeoPackage' })).toBeVisible();
+
+  await expect(page.getByRole('heading', { name: 'GeoPackage', exact: true })).toBeVisible();
+
+  await page.getByRole('link', { name: 'Approved' }).click();
+
+  await expect(page.getByRole('heading', { name: 'All GeoPackages' })).toBeVisible();
+
+  await expect(page.locator('#maincolumn')).toContainText('10 records found.');
+
+});
diff --git a/playwright/staging-tests/tests/06-hub-models.spec.ts b/playwright/staging-tests/tests/06-hub-models.spec.ts
new file mode 100644
index 00000000..a62043e6
--- /dev/null
+++ b/playwright/staging-tests/tests/06-hub-models.spec.ts
@@ -0,0 +1,62 @@
+import { test, expect } from '@playwright/test';
+
+let url = '/';
+
+test.use({
+  storageState: 'auth.json'
+});
+
+test('test', async ({ page }) => {
+  await page.goto(url);
+
+  await expect(page.locator('h2')).toContainText('QGIS plugins web portal');
+
+  await expect(page.getByRole('button', { name: 'Hub' })).toBeVisible();
+
+  await page.getByRole('button', { name: 'Hub' }).click();
+
+  await page.getByRole('menuitem', { name: 'Models', exact: true }).click();
+
+  await expect(page.locator('#maincolumn')).toContainText('QGIS Model');
+
+  await expect(page.getByRole('heading', { name: 'All Models' })).toBeVisible();
+
+  await expect(page.locator('#maincolumn')).toContainText('23 records found.');
+
+  await expect(page.locator('#maincolumn')).toContainText('QGIS Model');
+
+  await expect(page.locator('.frame-image-demo').first()).toBeVisible();
+
+  await expect(page.locator('div:nth-child(2) > .galery > .frame-image-demo').first()).toBeVisible();
+
+  await expect(page.locator('div:nth-child(3) > .galery > .frame-image-demo').first()).toBeVisible();
+
+  await expect(page.locator('div:nth-child(6) > div > .galery > .frame-image-demo').first()).toBeVisible();
+  
+  await expect(page.locator('div:nth-child(6) > div:nth-child(2) > .galery > .frame-image-demo')).toBeVisible();
+
+  await expect(page.locator('div:nth-child(6) > div:nth-child(3) > .galery > .frame-image-demo')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: ' Upload Model' })).toBeVisible();
+
+  await expect(page.getByRole('heading', { name: 'Model', exact: true })).toBeVisible();
+
+  await page.getByRole('link', { name: 'Approved' }).click();
+
+  await expect(page.locator('#maincolumn')).toContainText('23 records found.');
+
+  await expect(page.getByRole('row', { name: 'Style icon Generate Global' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'Generate Global MGRS GZD' })).toBeVisible();
+
+  await expect(page.getByRole('row', { name: 'Style icon MGRS 100km squares' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'MGRS 100km squares for' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'MGRS 100km squares for' })).toBeVisible();
+
+  await expect(page.getByRole('row', { name: 'Style icon Generate Global' }).getByRole('link').nth(1)).toBeVisible();
+
+  await expect(page.getByRole('row', { name: 'Style icon MGRS 100km squares' }).getByRole('link').nth(1)).toBeVisible();
+
+});
diff --git a/playwright/staging-tests/tests/07-hub-3Dmodels.spec.ts b/playwright/staging-tests/tests/07-hub-3Dmodels.spec.ts
new file mode 100644
index 00000000..d5e63f84
--- /dev/null
+++ b/playwright/staging-tests/tests/07-hub-3Dmodels.spec.ts
@@ -0,0 +1,64 @@
+import { test, expect } from '@playwright/test';
+
+let url = '/';
+
+test.use({
+  storageState: 'auth.json'
+});
+
+test('test', async ({ page }) => {
+  await page.goto(url);
+
+  await expect(page.locator('h2')).toContainText('QGIS plugins web portal');
+
+  await expect(page.getByRole('button', { name: 'Hub' })).toBeVisible();
+
+  await page.getByRole('button', { name: 'Hub' }).click();
+
+  await page.getByRole('menuitem', { name: '3D Models' }).click();
+
+  await expect(page.locator('#maincolumn')).toContainText('QGIS 3D Model');
+
+  await expect(page.locator('#maincolumn')).toContainText('All 3D Models');
+
+  await expect(page.locator('#maincolumn')).toContainText('24 records found.');
+
+  await expect(page.getByRole('link', { name: ' Upload 3D Model' })).toBeVisible();
+
+  await expect(page.getByRole('heading', { name: '3D Model', exact: true })).toBeVisible();
+
+  await expect(page.locator('.frame-image-demo').first()).toBeVisible();
+
+  await expect(page.locator('div:nth-child(2) > .galery > .frame-image-demo').first()).toBeVisible();
+
+  await expect(page.locator('#maincolumn div').filter({ hasText: 'Car Sedan Klas Karlsson | 04' }).nth(3)).toBeVisible();
+
+  await expect(page.locator('#maincolumn div').filter({ hasText: 'Tree Tall Pine-ish Klas' }).nth(3)).toBeVisible();
+
+  await expect(page.locator('div:nth-child(6) > div:nth-child(2) > .galery > .frame-image-demo')).toBeVisible();
+
+  await expect(page.locator('div:nth-child(6) > div:nth-child(3) > .galery > .frame-image-demo')).toBeVisible();
+
+  await expect(page.locator('div:nth-child(7) > div > .galery > .frame-image-demo').first()).toBeVisible();
+
+  await expect(page.locator('div:nth-child(7) > div:nth-child(2) > .galery > .frame-image-demo')).toBeVisible();
+
+  await expect(page.locator('div:nth-child(7) > div:nth-child(3) > .galery > .frame-image-demo')).toBeVisible();
+
+  await page.getByRole('link', { name: 'Approved' }).click();
+
+  await expect(page.locator('#maincolumn')).toContainText('24 records found.');
+
+  await expect(page.getByRole('row', { name: 'Style icon QGIS Logo A 3D' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'QGIS Logo' })).toBeVisible();
+
+  await expect(page.getByRole('row', { name: 'Style icon QGIS_logo_Q' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'QGIS_logo_Q' })).toBeVisible();
+
+  await expect(page.getByRole('row', { name: 'Style icon donut_03 Blender' }).getByRole('img')).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'donut_03' })).toBeVisible();
+  
+});
\ No newline at end of file
diff --git a/playwright/staging-tests/tests/08-qgis-layer-definition-file.spec.ts b/playwright/staging-tests/tests/08-qgis-layer-definition-file.spec.ts
new file mode 100644
index 00000000..3cde79d7
--- /dev/null
+++ b/playwright/staging-tests/tests/08-qgis-layer-definition-file.spec.ts
@@ -0,0 +1,48 @@
+import { test, expect } from '@playwright/test';
+
+let url = '/';
+
+test.use({
+  storageState: 'auth.json'
+});
+
+test('test', async ({ page }) => {
+  await page.goto(url);
+
+  await expect(page.locator('h2')).toContainText('QGIS plugins web portal');
+
+  await expect(page.getByRole('button', { name: 'Hub' })).toBeVisible();
+
+  await page.getByRole('button', { name: 'Hub' }).click();
+
+  await page.getByRole('menuitem', { name: 'QGIS Layer Definition File' }).click();
+
+  await expect(page.locator('#maincolumn')).toContainText('QGIS Layer Definition File');
+
+  await expect(page.locator('#maincolumn')).toContainText('All Layer Definition Files');
+
+  await expect(page.locator('#maincolumn')).toContainText('1 record found.');
+
+  await expect(page.getByRole('link', { name: ' Upload Layer Definition File' })).toBeVisible();
+
+  await expect(page.locator('.frame-image-demo')).toBeVisible();
+
+  await page.locator('.frame-image-demo').click();
+
+  await expect(page.locator('#maincolumn')).toContainText('swisstopo Vector Tiles');
+
+  await expect(page.getByRole('img', { name: 'image' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'https://vectortiles.geo.admin' })).toBeVisible();
+
+  await expect(page.getByRole('heading', { name: 'Layer Definition File', exact: true })).toBeVisible();
+
+  await page.getByRole('link', { name: 'Approved' }).click();
+
+  await expect(page.locator('#maincolumn')).toContainText('1 record found.');
+
+  await expect(page.getByRole('img', { name: 'Style icon' })).toBeVisible();
+
+  await expect(page.getByRole('link', { name: 'swisstopo Vector Tiles' })).toBeVisible();
+  
+});
\ No newline at end of file