Add Playwright test for project creation workflow

[NSUWAL123]

What type of PR is this? (check all applicable)

• 🍕 Feature
• 🐛 Bug Fix
• 📝 Documentation
• 🧑‍💻 Refactor
• ✅ Test
• 🤖 Build or CI
• ❓ Other (please specify)

Related Issue

• Related to Add Playwright tests for project creation workflow #1355

Describe this PR

This PR contains works to test create project workflow.

Screenshots

Screencast.from.24-7-24.01.18.24.+0545.webm

Comment

From @spwoodcock: added multiple variants of running the tests:

    "test:e2e": "CI=1 playwright test",
    "test:e2e-report": "playwright test",
    "test:e2e-debug": "playwright test --debug",
    "test:e2e-interactive": "playwright open http://fmtm.dev.test",

• test:e2e is the standard test that runs until completion, without starting the report UI.
• test:e2e-report starts the report UI afterwards to see the test output and traces.
• test:e2e-debug runs the browser in --headful mode (i.e. with a browser), allowing us to step through the test and see what it actually does in the UI.
• test:e2e-interactive also starts a web browser, but this time with a recording option, allowing us to write tests by recording the clicks we make on the UI.

All test also produce a trace.zip, which is a very helpful functionality to debug why a test may have failed:

• Go to a failed workflow: https://github.com/hotosm/fmtm/actions/runs/10198097237
• Download the artifact playwright-report.zip.
• Open the index.html file to view the report.
• Extract the .zip file under data to get the traces.
• Go to https://trace.playwright.dev and uploaded the extracted traces.
• Step through the tests, with screenshots of the UI at a given point, plus logs of the network tab and console logs!

[NSUWAL123]

@spwoodcock, have a look on this create project test. Please comment if there more assertions are to be made in this workflow. This test only test one flow.

[spwoodcock]

It rebased this with development.

@NSUWAL123 please:

• Stash any changes you may have made since: git stash -u
• Reset the branch to current state: `git reset --hard origin/feat/create-project-test
• Continue working on the branch 👍

[spwoodcock]

I updated the docker networking and vars for this to work better.

You should be able to run:

just --unstable test frontend
# To see the browser and do interactive test recording
just --unstable test frontend-interactive

Alternatively the direct command is:

docker compose \
    -f docker-compose.yml \
    -f contrib/playwright/docker-compose.yml \
  run --rm --service-ports ui-test

Note that the test data used generates 2376 features.
Wrote 2376 entities for project (3)
We should probably reduce this to about 20 or 30 features if possible?
Possibly with a smaller AOI if needed?
The test runs once per browser, so it will take forever otherwise!

[spwoodcock]

I just need to update so this works in the CI now 👍