Use playwright for functional tests (#1163)

## Description of Changes
_Cherry-picked from
https://github.com/OrcaCollective/OpenOversight/pull/537__

Switch to Playwright for functional tests. The Playwright API seems
easier to use in many ways than Selenium

## Notes for Deployment
None! This only applies to tests

## Screenshots (if appropriate)
N/A

## Testing instructions
Run `just test`

## Checks

 - [x] I have rebased my changes on `main`

 - [x] `just lint` passes

 - [x] `just test` passes

Author: sea-kelp

.github/workflows/test_prs.yml

@@ -17,6 +17,12 @@ jobs:
       - uses: actions/checkout@v3
       - name: Run tests
         run: PYTHON_VERSION=${{ matrix.python-version }} make test_with_version
+      # Upload playwright traces if tests fail
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-traces
+          path: build/test-results/
   pre-commit:
     runs-on: ubuntu-latest
     steps:

CONTRIB.md

@@ -23,6 +23,12 @@ We use [pre-commit](https://pre-commit.com/) for automated linting and style che
 
 You can run `pre-commit run --all-files` or `make lint` to run pre-commit over your local codebase, or `pre-commit run` to run it only over the currently stages files.
 
+## Testing
+
+To run tests, run `make test` once your containers are up and running.
+
+We use Playwright for functional testing. If functional tests fail locally, you can find per-test traces in the `build/test-results` directory. In the Lint and Test GitHub action, traces are uploaded as an artifact you can download via the "Upload Artifact" step. Once you have your trace, you can upload it to the [Playwright Trace Viewer](https://trace.playwright.dev/) tool for debugging.
+
 ### Accessibility
 Keep in mind when adding images that `alt` tags are required for screen readers. If text outside of the image explains what the image is or is referring to, the tag can be an empty string (`alt=""`). The tag can also be empty if the image is decoration and does not add information or context. If the image has text or important information, use the present tense to describe what is happening in the image.
 

Makefile

@@ -14,7 +14,7 @@ build_with_version: create_empty_secret create_default_env
 .PHONY: test_with_version
 test_with_version: build_with_version
 	touch OpenOversight/tests/coverage.xml
-	docker compose run --rm web-test pytest --cov=OpenOversight --cov-report xml:OpenOversight/tests/coverage.xml --doctest-modules -n 4 --dist=loadfile -v OpenOversight/tests/
+	docker compose run --rm web-test pytest --cov-report xml:OpenOversight/tests/coverage.xml -n 4 --dist=loadfile -v OpenOversight/tests/
 
 # Run containers
 .PHONY: start
@@ -70,9 +70,9 @@ populate: create_db
 .PHONY: test
 test: start
 	if [ -z "$(name)" ]; then \
-		docker compose run --rm web-test pytest --cov --doctest-modules -n auto --dist=loadfile -v OpenOversight/tests/; \
+		docker compose run --rm web-test pytest -n auto --dist=loadfile -v OpenOversight/tests/; \
 	else \
-		docker compose run --rm web-test pytest --cov --doctest-modules -v OpenOversight/tests/ -k $(name); \
+		docker compose run --rm web-test pytest -v OpenOversight/tests/ -k $(name); \
 	fi
 
 .PHONY: lint

OpenOversight/app/static/js/find_officer.js

@@ -34,6 +34,7 @@ $(document).ready(function() {
             $('#current-uii').text(deptUiidLabel);
             $('#uii-question').show();
         } else {
+            $('#unique_internal_identifier').text('');
             $('#uii-question').hide();
         }
     });

OpenOversight/pytest.ini

@@ -0,0 +1,2 @@
+[pytest]
+addopts =  --cov --doctest-modules --tracing=retain-on-failure --output=/test-results

OpenOversight/tests/conftest.py

@@ -8,18 +8,14 @@
 from datetime import date, datetime, time, timedelta, timezone
 from io import BytesIO
 from pathlib import Path
-from time import sleep
 from typing import List, Optional
 
 import pytest
 from faker import Faker
 from flask import current_app
 from PIL import Image as Pimage
-from selenium import webdriver
-from selenium.webdriver.firefox.options import Options
-from selenium.webdriver.firefox.service import Service
+from playwright.sync_api import Page
 from sqlalchemy.orm import scoped_session, sessionmaker
-from xvfbwrapper import Xvfb
 
 from OpenOversight.app import create_app
 from OpenOversight.app.models.database import (
@@ -895,28 +891,15 @@ def server_port(worker_number):
 
 
 @pytest.fixture(scope="session")
-def browser(app, server_port):
+def server(app, server_port):
     # start server
     port = server_port
     print("Starting server at port {port}")
     threading.Thread(
         target=app.run, daemon=True, kwargs={"debug": False, "port": port}
     ).start()
-    # give the server a few seconds to ensure it is up
-    sleep(10)
-
-    # start headless webdriver
-    visual_display = Xvfb()
-    visual_display.start()
-    options = Options()
-    options.add_argument("--headless")
-    driver = webdriver.Firefox(
-        options=options, service=Service(log_path="/tmp/geckodriver.log")
-    )
-    # wait for browser to start up
-    sleep(3)
-    yield driver
 
-    # shutdown headless webdriver
-    driver.quit()
-    visual_display.stop()
+
+@pytest.fixture
+def page(app, server, page: Page):
+    yield page