🔧 configured docker to run playwright tests

.dockerignore

@@ -0,0 +1,30 @@
+# General exclusions
+# Exclude version control
+.git
+*.gitignore
+
+# Exclude IDE and editor files
+.vscode
+
+# Exclude logs and caches
+logs
+*.log
+cache
+*.cache
+
+# Exclude build artifacts
+build
+dist
+*.zip
+*.tar.gz
+*.rar
+
+# Node.js specific
+node_modules
+
+# Python specific
+__pycache__/
+.pytest_cache
+
+# Mypy
+.mypy_cache

.github/workflows/ui_test.yml

@@ -6,51 +6,19 @@ on:
       - main
 
 jobs:
-  test:
+  ui_test:
     runs-on: ubuntu-latest
 
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
 
-      - name: Build and run aodn portal
-        uses: addnab/docker-run-action@v3
-        with:
-          image: node:20
-          options: |
-            -v ${{ github.workspace }}:/app
-            -d -p 5173:5173 --name aodn_portal_dev
-          run: |
-            cd app
-            : # set-version will always download the latest version of yarn
-            yarn policies set-version 4.3.0
-            yarn install --immutable
-            yarn dev --host 0.0.0.0
-
-      - name: Wait for server to start
-        run: |
-          timeout=180
-          interval=1
-          elapsed=0
-          while [[ "$(curl -s -o /dev/null -w ''%{http_code}'' http://0.0.0.0:5173/)" != "200" && $elapsed -lt $timeout ]]; do
-            sleep $interval
-            elapsed=$((elapsed + interval))
-          done
-          if [[ $elapsed -ge $timeout ]]; then
-            echo "Server did not start within $timeout seconds."
-            exit 1
-          fi
+      - name: Run playwright tests
+        run: yarn playwright
 
-      - name: Build and run playwright tests
-        uses: addnab/docker-run-action@v3
+      - uses: actions/upload-artifact@v4
+        if: always()
         with:
-          image: mcr.microsoft.com/playwright/python:v1.43.0-jammy
-          docker_network: container:aodn_portal_dev
-          options: |
-            -v ${{ github.workspace }}/playwright:/app
-            -e POETRY_VIRTUALENVS_CREATE=false
-          run: |
-            python3 -m pip install poetry
-            cd app
-            python3 -m poetry install --no-root --no-interaction --no-ansi
-            python3 -m poetry run pytest
+          name: test-report
+          path: playwright/reports/
+          retention-days: 15

Dockerfile.dev

@@ -0,0 +1,20 @@
+# Use the official Node.js image
+FROM node:20
+
+WORKDIR /app
+
+COPY package.json yarn.lock ./
+COPY .yarnrc.yml ./
+
+# Install dependencies
+RUN \
+    apt-get update -y \
+    && apt-get upgrade -y \
+    && yarn set version 4.3.0 \
+    && yarn install --immutable
+
+# Expose the port the app runs on
+EXPOSE 5173
+
+# Command to run the application
+CMD ["yarn", "dev", "--host", "0.0.0.0"]

docker-compose-dev.yml

@@ -0,0 +1,24 @@
+version: '3.8'
+
+services:
+  web:
+    build:
+      context: .
+      dockerfile: Dockerfile.dev
+    ports:
+      - "5173:5173"
+    volumes:
+      - ./:/app
+      - /app/node_modules
+
+  tests:
+    build:
+      context: .
+      dockerfile: playwright/Dockerfile
+    depends_on:
+      - web
+    environment:
+      - BASE_URL=http://web:5173
+      - POETRY_VIRTUALENVS_CREATE=false
+    volumes:
+      - ./playwright:/app

package.json

@@ -13,7 +13,11 @@
     "preview": "vite preview",
     "postinstall": "husky",
     "test": "vitest",
-    "test:debug": "vitest --run --reporter=verbose --watch=false"
+    "test:debug": "vitest --run --reporter=verbose --watch=false",
+    "playwright:build": "docker-compose -f docker-compose-dev.yml build",
+    "playwright:build:web": "docker-compose -f docker-compose-dev.yml build web",
+    "playwright:build:tests": "docker-compose -f docker-compose-dev.yml build tests",
+    "playwright": "docker-compose -f docker-compose-dev.yml up --abort-on-container-exit --exit-code-from tests"
   },
   "dependencies": {
     "@emotion/styled": "^11.11.0",

playwright/.gitignore

@@ -161,3 +161,6 @@ cython_debug/
 
 # Custom Specifications
 #  Project specific gitignores are listed here
+
+# Test reports
+reports

playwright/Dockerfile

@@ -0,0 +1,20 @@
+# Use the official Playwright image
+FROM mcr.microsoft.com/playwright/python:v1.43.0-jammy
+
+WORKDIR /app
+
+COPY playwright/pyproject.toml playwright/poetry.lock /app/
+COPY playwright/scripts/entrypoint.sh /app/
+
+RUN \
+    apt-get update -y \
+    && apt-get upgrade -y \
+    # Install dependencies
+    && python3 -m pip install poetry \
+    && python3 -m poetry install --no-root --no-interaction --no-ansi \
+    # Set entrypoint for Docker Image
+    && cp /app/entrypoint.sh /entrypoint.sh \
+    && chmod +x /entrypoint.sh
+
+# Set the entrypoint
+ENTRYPOINT ["/entrypoint.sh"]

playwright/README.md

@@ -0,0 +1,88 @@
+# Pytest Playwright UI Tests
+
+This is a suite of automated end-to-end UI tests for the AODN Portal v2. The tests are implemented using [pytest](https://pytest.org/) framework and [Playwright](https://playwright.dev/python/) for interactions with the web browser.
+
+## Setup Guide:
+
+### Python version:
+
+Python 3.10.x is required. **UNIX/MacOS** users can use [Pyenv](https://github.com/pyenv/pyenv) for Python version management.
+
+_However, This guide provides instructions for setting up your working environment using [Conda](https://conda.io/projects/conda/en/latest/user-guide/install/index.html) to create a virtual [environment](https://docs.conda.io/projects/conda/en/latest/user-guide/concepts/environments.html) with the required Python version that should work on both UNIX/MacOS and Windows. Additionally, we'll utilize [Poetry](https://python-poetry.org/docs/) to manage packages within the `conda` environment._
+
+## Installation:
+
+If you don't have `Conda` and `Poetry` installed, you'll need to install them before setting up the project.
+
+> _`Poetry` should be installed globally on your system, not within a Python virtual environment. We will utilize `pipx` to ensure that `Poetry` remains isolated in the global scope while also being accessible from anywhere on your system._
+
+### Conda
+
+To install `Conda`, please refer to the [official guide](https://conda.io/projects/conda/en/latest/user-guide/install/index.html).
+
+### Poetry
+
+1. First, install `pipx` by following the instructions in the [official repository](https://github.com/pypa/pipx). Ensure that `pipx` is added to your system's PATH variable after installation.
+2. For **OSX** and **Z Shell** users, open up `~/.zshrc` and add this:
+
+   ```bash
+   export PATH="$HOME/.local/bin:$PATH"
+   ```
+
+3. Then, proceed to install `Poetry` by running the following command:
+
+   ```bash
+   pipx install poetry
+   ```
+
+## Project Setup:
+
+1. Open your terminal (Linux, MacOS) or the Miniconda/Anaconda Prompt (Windows).
+2. Navigate to the `/playwright` directory.
+3. Create a `conda` environment using the `environment.yml` file:
+
+   ```bash
+   conda env create -f environment.yml
+   ```
+
+   > This command creates a virtual environment with the name `aodn-portal-v2` and installs the required python version.
+
+4. Activate this `conda` environment:
+   ```bash
+   conda activate aodn-portal-v2
+   ```
+5. Install dependencies defined in `pyproject.toml`:
+   ```bash
+   poetry install
+   ```
+6. Install the required browsers:
+   ```bash
+   playwright install
+   ```
+7. Configure project related settings:
+
+   a) Open the `settings.toml` file
+
+   b) Update the required values according to your environment.
+
+## Running Tests:
+
+1. Run all tests:
+   ```bash
+   pytest
+   ```
+2. Run tests with visible browsers
+
+   ```bash
+   pytest --headed
+   ```
+
+3. To run tests in parallel, use the `--numprocesses` flag:
+   ```bash
+   pytest --numprocesses auto
+   ```
+   More configurable options can be found in the [official documentation](https://playwright.dev/python/docs/running-tests).
+
+## Test Report:
+
+Test reports are generated using [pytest-html](https://pytest-html.readthedocs.io/en/latest/). The generated report for the _latest_ test run will be stored inside the `/playwright/reports` directory.

playwright/config.py

@@ -1,3 +1,5 @@
+import os
+
 from dynaconf import Dynaconf  # type: ignore
 
 settings = Dynaconf(
@@ -7,3 +9,7 @@
     ],
     environments=True,  # Enable layered environments (sections on settings.toml file for development, production, etc.)
 )
+
+# Reset Base URL if it is provided as an env variable
+if os.getenv('BASE_URL'):
+    settings.baseURL = os.getenv('BASE_URL')

playwright/environment.yml

@@ -0,0 +1,7 @@
+name: aodn-portal-v2
+channels:
+  - microsoft
+  - conda-forge
+  - defaults
+dependencies:
+  - python=3.10.12

playwright/pages/landing_page.py

@@ -11,4 +11,4 @@ def __init__(self, page: Page):
         self.search = SearchComponent(page)
 
     def load(self) -> None:
-        self.page.goto(settings.baseURL)
+        self.page.goto(settings.baseURL, timeout=60 * 1000)