Use playwright for functional tests (#537)

* Use playwright for functional tests

* Wait for image to fully load

* Wait specifically for image load

* Upload traces if test run fails

* Misc fixes

* Upgrade pytest-env version for pyproject.toml support

* Remove duplicate ENV already declared in pyproject.toml

* Add test instructions and remove extra Dockerfile logic

Author: sea-kelp

.github/workflows/pull_request.yml

@@ -27,3 +27,8 @@ jobs:
           just build
           just up
           just test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-traces
+          path: build/test-results/

Dockerfile

@@ -9,14 +9,8 @@ ENV PYTHONUNBUFFERED=1
 WORKDIR /usr/src/app
 
 # Install packages depending on ENV arg from docker-compose
-ARG BASE_PACKAGES="gcc libpq-dev libjpeg62-turbo-dev libsqlite3-0 zlib1g-dev"
-ARG DEV_PACKAGES="firefox-esr"
-RUN if [ "$IS_PROD" = "true" ]; then \
-        PACKAGES_TO_INSTALL="$BASE_PACKAGES"; \
-    else \
-        PACKAGES_TO_INSTALL="$BASE_PACKAGES $DEV_PACKAGES"; \
-    fi && \
-    apt-get update && \
+ARG PACKAGES_TO_INSTALL="gcc libpq-dev libjpeg62-turbo-dev libsqlite3-0 zlib1g-dev"
+RUN apt-get update && \
     apt-get install -y -qq --no-install-recommends $PACKAGES_TO_INSTALL && \
     apt-get clean && \
     rm -rf /var/lib/apt/lists/*
@@ -28,6 +22,7 @@ RUN if [ "$IS_PROD" = "true" ]; then \
         poetry install --only main --no-root; \
     else \
         poetry install --no-root; \
+        playwright install --with-deps chromium; \
     fi
 
 # Setup application

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/app/templates/submit_image.html

@@ -87,7 +87,7 @@ <h3 class="mt-4">High security submissions?</h3>
             dept_id = $("#department").val();
         });
 
-        const getURL = (file) => "/upload/department/" + dept_id;
+        const getURL = (file) => "/upload/departments/" + dept_id;
         init_dropzone("#my-cop-dropzone", getURL, csrf_token);
     </script>
   </div>

OpenOversight/pytest.ini

@@ -15,11 +15,8 @@
 from faker import Faker
 from flask import current_app
 from PIL import Image as Pimage
-from selenium.webdriver.firefox.options import Options as FirefoxOptions
-from selenium.webdriver.firefox.service import Service as FirefoxService
-from selenium.webdriver.firefox.webdriver import WebDriver as Firefox
+from playwright.sync_api import Page
 from sqlalchemy.orm import scoped_session, sessionmaker
-from webdriver_manager.firefox import GeckoDriverManager
 
 from OpenOversight.app import create_app
 from OpenOversight.app.models.database import (
@@ -900,19 +897,6 @@ def server(app, server_port):
     ).start()
 
 
-@pytest.fixture(scope="session")
-def browser(app, server):
-    options = FirefoxOptions()
-    options.add_argument("--headless")
-    options.add_argument("--width=1024")
-    options.add_argument("--height=768")
-
-    service = FirefoxService(
-        executable_path=GeckoDriverManager().install(), log_path="/tmp/geckodriver.log"
-    )
-    driver = Firefox(options=options, service=service)
-
-    yield driver
-
-    # shutdown headless webdriver
-    driver.quit()
+@pytest.fixture
+def page(app, server, page: Page):
+    yield page