Add playwright e2e tests (#27)

Author: matthiask

.github/workflows/playwright.yml

@@ -0,0 +1,31 @@
+name: Playwright Tests
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.12'
+          cache: 'pip'
+
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install -e ".[tests]"
+          playwright install --with-deps chromium
+
+      - name: Run Django server and Playwright tests
+        run: |
+          cd tests
+          python manage.py migrate
+          pytest ../tests/testapp/test_prose_editor_e2e.py -v --browser chromium

.github/workflows/tests.yml

@@ -3,7 +3,7 @@ name: Tests
 on:
   push:
     branches:
-      - main
+    - main
   pull_request:
 
 jobs:
@@ -14,21 +14,21 @@ jobs:
       fail-fast: false
       matrix:
         python-version:
-          - "3.10"
-          - "3.11"
-          - "3.12"
-          - "3.13"
+        - '3.10'
+        - '3.11'
+        - '3.12'
+        - '3.13'
 
     steps:
-      - uses: actions/checkout@v3
-      - name: Set up Python ${{ matrix.python-version }}
-        uses: actions/setup-python@v4
-        with:
-          python-version: ${{ matrix.python-version }}
-      - name: Install dependencies
-        run: |
-          python -m pip install --upgrade pip tox
-      - name: Run tox targets for ${{ matrix.python-version }}
-        run: |
-          ENV_PREFIX=$(tr -C -d "0-9" <<< "${{ matrix.python-version }}")
-          TOXENV=$(tox --listenvs | grep "^py$ENV_PREFIX" | tr '\n' ',') python -m tox
+    - uses: actions/checkout@v4
+    - name: Set up Python ${{ matrix.python-version }}
+      uses: actions/setup-python@v5
+      with:
+        python-version: ${{ matrix.python-version }}
+    - name: Install dependencies
+      run: |
+        python -m pip install --upgrade pip tox
+    - name: Run tox targets for ${{ matrix.python-version }}
+      run: |
+        ENV_PREFIX=$(tr -C -d "0-9" <<< "${{ matrix.python-version }}")
+        TOXENV=$(tox --listenvs | grep "^py$ENV_PREFIX" | tr '\n' ',') python -m tox

README.rst

@@ -273,6 +273,32 @@ The pre-commit configuration includes a hook that prevents committing files
 with source map references, ensuring that development artifacts don't make it
 into the repository.
 
+Browser Testing with Playwright
+------------------------------
+
+This project uses Playwright for browser-based testing of the prose editor.
+
+To run the browser tests:
+
+1. Install the dependencies:
+
+   .. code-block:: shell
+
+       pip install -e ".[tests]"
+       playwright install
+
+2. Run the tests using tox:
+
+   .. code-block:: shell
+
+       tox -e playwright
+
+   Or directly with pytest:
+
+   .. code-block:: shell
+
+       pytest tests/testapp/test_prose_editor_e2e.py -v --browser chromium
+
 Code Style and Linting
 ---------------------
 

pyproject.toml

@@ -43,8 +43,13 @@ optional-dependencies.sanitize = [
   "nh3",
 ]
 optional-dependencies.tests = [
+  "asgiref",
   "coverage",
   "nh3",
+  "pytest",
+  "pytest-asyncio",
+  "pytest-django",
+  "pytest-playwright",
 ]
 urls.Documentation = "https://django-prose-editor.readthedocs.io/"
 
@@ -116,3 +121,14 @@ lint.per-file-ignores."*/migrat*/*" = [
 lint.isort.combine-as-imports = true
 lint.isort.lines-after-imports = 2
 lint.mccabe.max-complexity = 15
+
+[tool.pytest.ini_options]
+DJANGO_SETTINGS_MODULE = "testapp.settings"
+python_files = "test_*.py"
+addopts = "--strict-markers"
+testpaths = [ "tests" ]
+asyncio_mode = "strict"
+asyncio_default_fixture_loop_scope = "function"
+markers = [
+  "e2e: End-to-end browser tests",
+]

tests/testapp/test_prose_editor_e2e.py

@@ -0,0 +1,103 @@
+import os
+
+import pytest
+from playwright.sync_api import expect
+
+from testapp.models import ProseEditorModel
+
+
+# Set Django async unsafe to allow database operations in tests
+os.environ.setdefault("DJANGO_ALLOW_ASYNC_UNSAFE", "true")
+
+
+@pytest.mark.django_db
+@pytest.mark.e2e
+def test_prose_editor_admin_form(page, live_server):
+    """Test that the prose editor loads and works in the admin."""
+    # Login first
+    from django.contrib.auth.models import User
+
+    User.objects.create_superuser("admin", "[email protected]", "password")
+
+    # Visit the login page
+    page.goto(f"{live_server.url}/admin/login/")
+
+    # Fill in the login form
+    page.fill("#id_username", "admin")
+    page.fill("#id_password", "password")
+
+    # Submit the form
+    page.click("input[type=submit]")
+
+    # Wait for the admin index page to load
+    page.wait_for_url(f"{live_server.url}/admin/")
+
+    # Go to the add page
+    page.goto(f"{live_server.url}/admin/testapp/proseeditormodel/add/")
+
+    # Check that the prose editor is loaded
+    editor_container = page.locator(".prose-editor")
+    expect(editor_container).to_be_visible()
+
+    # Check that the toolbar is visible
+    toolbar = page.locator(".prose-menubar")
+    expect(toolbar).to_be_visible()
+
+    # Type some content into the editor
+    editor = page.locator(".ProseMirror")
+    editor.click()
+    editor.type("Hello, Playwright!")
+
+    # Save the form
+    page.click("input[name='_save']")
+
+    # Check that we've been redirected to the changelist page
+    expect(page).to_have_url(f"{live_server.url}/admin/testapp/proseeditormodel/")
+
+    # Check that the model was created
+    model = ProseEditorModel.objects.first()
+    assert model is not None
+    assert "Hello, Playwright!" in model.description
+
+
+@pytest.mark.django_db
+@pytest.mark.e2e
+def test_prose_editor_formatting(page, live_server):
+    """Test formatting functionality in the prose editor."""
+    # Login first
+    from django.contrib.auth.models import User
+
+    User.objects.create_superuser("admin", "[email protected]", "password")
+
+    # Visit the login page
+    page.goto(f"{live_server.url}/admin/login/")
+
+    # Fill in the login form
+    page.fill("#id_username", "admin")
+    page.fill("#id_password", "password")
+
+    # Submit the form
+    page.click("input[type=submit]")
+
+    # Go to the add page
+    page.goto(f"{live_server.url}/admin/testapp/proseeditormodel/add/")
+
+    # Click in the editor
+    editor = page.locator(".ProseMirror")
+    editor.click()
+    editor.type("Format this text")
+
+    # Select the text
+    editor.press("Control+a")
+
+    # Make it bold
+    bold_button = page.locator(".prose-menubar__button[title='bold']")
+    bold_button.click()
+
+    # Save the form
+    page.click("input[name='_save']")
+
+    # Check the model content contains bold formatting
+    model = ProseEditorModel.objects.first()
+    assert model is not None
+    assert "<strong>Format this text</strong>" in model.description

tox.ini

@@ -16,6 +16,18 @@ deps =
     dj52: Django>=5.2a1,<6.0
     djmain: https://github.com/django/django/archive/main.tar.gz
 
+[testenv:playwright]
+usedevelop = true
+extras = all,tests
+passenv =
+    HOME
+    PYTHONPATH
+    DISPLAY
+    XAUTHORITY
+commands =
+    playwright install chromium
+    pytest tests/testapp/test_prose_editor_e2e.py -v --browser chromium
+
 [testenv:docs]
 deps =
     -r docs/requirements.txt