Add sample playwright tests for folium

First try: just do the draw plugin.

Author: hansthen

.github/workflows/test_code.yml

@@ -34,4 +34,4 @@ jobs:
       run: python -m pip install -e . --no-deps --force-reinstall
 
     - name: Code tests
-      run: python -m pytest -vv --ignore=tests/selenium
+      run: python -m pytest -vv --ignore=tests/selenium --ignore=tests/playwright

.github/workflows/test_latest_branca.yml

@@ -31,4 +31,4 @@ jobs:
       run: |
         micromamba remove branca --yes --force
         python -m pip install git+https://github.com/python-visualization/branca.git
-        python -m pytest -vv --ignore=tests/selenium
+        python -m pytest -vv --ignore=tests/selenium --ignore=tests/playwright

.github/workflows/test_playwright.yml

@@ -0,0 +1,53 @@
+name: Run Playwright Tests
+
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+jobs:
+  run:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout Folium
+      uses: actions/checkout@v4
+
+    - name: Setup Micromamba env
+      uses: mamba-org/setup-micromamba@v2
+      with:
+        environment-name: TEST
+        create-args: >-
+          python=3
+          --file requirements.txt
+
+    - name: Install streamlit-folium
+      shell: bash -l {0}
+      run: |
+        pip install streamlit-folium pytest-playwright pytest-rerunfailures
+
+    - name: Install playwright dependencies
+      shell: bash -l {0}
+      run: |
+        playwright install --with-deps
+
+    - name: Install annotate-failures-plugin
+      run: pip install pytest-github-actions-annotate-failures
+
+    - name: Install folium from source
+      shell: bash -l {0}
+      run: |
+        python -m pip install -e . --no-deps --force-reinstall
+
+    - name: Test with pytest and retry flaky tests up to 3 times
+      shell: bash -l {0}
+      run: |
+        pytest tests/playwright --browser chromium -s --reruns 3 --junit-xml=test-results.xml
+
+    - name: Surface failing tests
+      if: always()
+      uses: pmeier/pytest-results-action@main
+      with:
+        path: test-results.xml
+        fail-on-empty: false

.pre-commit-config.yaml

@@ -9,6 +9,7 @@ repos:
     - id: debug-statements
     - id: end-of-file-fixer
     - id: check-docstring-first
+      exclude: ^examples/streamlit
     - id: check-added-large-files
     - id: requirements-txt-fixer
     - id: file-contents-sorter

examples/streamlit/main.py

@@ -0,0 +1,11 @@
+import streamlit as st
+
+st.logo("https://python-visualization.github.io/folium/latest/_static/folium_logo.png")
+st.title("Python data, leaflet.js maps")
+
+"""
+Folium builds on the data wrangling strengths of the Python ecosystem
+and the mapping strengths of the Leaflet.js library.
+
+Manipulate your data in Python, then visualize it in a Leaflet map via
+Folium."""

examples/streamlit/pages/draw_feature_group.py

@@ -0,0 +1,43 @@
+import streamlit as st
+
+st.set_page_config(
+    page_title="streamlit-folium documentation: Draw Support",
+    page_icon=":pencil:",
+    layout="wide",
+)
+
+"""
+# streamlit-folium: Draw Support
+
+Folium supports some of the [most popular leaflet
+plugins](https://python-visualization.github.io/folium/plugins.html). In this example,
+we can add the
+[`Draw`](https://python-visualization.github.io/folium/plugins.html#folium.plugins.Draw)
+plugin to our map, which allows for drawing geometric shapes on the map.
+
+When a shape is drawn on the map, the coordinates that represent that shape are passed
+back as a geojson feature via the `all_drawings` and `last_active_drawing` data fields.
+
+Draw something below to see the return value back to Streamlit!
+"""
+
+with st.echo(code_location="below"):
+    import streamlit as st
+    from streamlit_folium import st_folium
+
+    import folium
+    from folium.plugins import Draw
+
+    m = folium.Map(location=[39.949610, -75.150282], zoom_start=5, png_enabled=True)
+    items = folium.FeatureGroup()
+    marker = folium.Marker(location=[38, -83]).add_to(items)
+    items.add_to(m)
+
+    Draw(export=False, feature_group=items, show_geometry_on_click=False).add_to(m)
+
+    c1, c2 = st.columns(2)
+    with c1:
+        output = st_folium(m, width=700, height=500)
+
+    with c2:
+        st.write(output)

examples/streamlit/pages/realtime-iss.py

@@ -0,0 +1,78 @@
+import streamlit as st
+from streamlit_folium import st_folium
+
+import folium
+from folium.plugins import Realtime
+
+st.set_page_config(page_title="iss", layout="wide")
+
+m = folium.Map()
+
+source = folium.JsCode(
+    """
+    function(responseHandler, errorHandler) {
+        var url = 'https://api.wheretheiss.at/v1/satellites/25544';
+
+        fetch(url)
+        .then((response) => {
+            return response.json().then((data) => {
+                var { id, timestamp, longitude, latitude } = data;
+
+                return {
+                    'type': 'FeatureCollection',
+                    'features': [{
+                        'type': 'Feature',
+                        'geometry': {
+                            'type': 'Point',
+                            'coordinates': [longitude, latitude]
+                        },
+                        'properties': {
+                            'id': id,
+                            'timestamp': timestamp
+                        }
+                    }]
+                };
+            })
+        })
+        .then(responseHandler)
+        .catch(errorHandler);
+    }
+"""
+)
+
+on_each_feature = folium.JsCode(
+    """
+    (feature, layer) => {
+        layer.on("click", (event) => {
+            Streamlit.setComponentValue({
+                id: feature.properties.id,
+                // Be careful, on_each_feature binds only once.
+                // You need to extract the current location from
+                // the event.
+                location: event.sourceTarget.feature.geometry
+            });
+        });
+    }
+"""
+)
+
+realtime = Realtime(source, on_each_feature=on_each_feature, interval=1000).add_to(m)
+realtime.on(
+    update=folium.JsCode(
+        """
+        (e) => {
+            console.log('update ', e.target._map);
+            var map = e.target._map;
+            var realtime = e.target;
+            map.fitBounds(realtime.getBounds(), {maxZoom: 8});
+        }
+        """
+    )
+)
+
+left, right = st.columns(2)
+with left:
+    data = st_folium(m, width=1000, returned_objects=[], debug=True)
+
+with right:
+    st.write(data)

tests/playwright/test_playwright.py

@@ -0,0 +1,112 @@
+from __future__ import annotations
+
+from contextlib import contextmanager
+from time import sleep
+
+import pytest
+from playwright.sync_api import Page, expect
+
+LOCAL_TEST = False
+
+PORT = "8503" if LOCAL_TEST else "8699"
+
+
+@pytest.fixture(scope="module", autouse=True)
+def _before_module():
+    # Run the streamlit app before each module
+    with run_streamlit():
+        yield
+
+
+@pytest.fixture(autouse=True)
+def _before_test(page: Page):
+    page.goto(f"localhost:{PORT}")
+    page.set_viewport_size({"width": 2000, "height": 2000})
+    expect.set_options(timeout=5_000)
+
+
+# Take screenshot of each page if there are failures for this session
+@pytest.fixture(autouse=True)
+def _after_test(page: Page, request):
+    yield
+    if request.node.rep_call.failed:
+        page.screenshot(path=f"screenshot-{request.node.name}.png", full_page=True)
+
+
+@contextmanager
+def run_streamlit():
+    """Run the streamlit app at examples/streamlit_app.py on port 8599"""
+    import subprocess
+
+    if LOCAL_TEST:
+        try:
+            yield 1
+        finally:
+            pass
+    else:
+        p = subprocess.Popen(
+            [
+                "streamlit",
+                "run",
+                "examples/streamlit/main.py",
+                "--server.port",
+                PORT,
+                "--server.headless",
+                "true",
+            ]
+        )
+
+        sleep(5)
+
+        try:
+            yield 1
+        finally:
+            p.kill()
+
+
+def click_button_or_marker(page: Page, nth: int = 0, locator: str | None = None):
+    """For some reason, there's a discrepancy between how the map markers are
+    selectable locally and on github actions, perhaps related some error in loading
+    the actual marker images. This tries both ways to select a marker"""
+
+    frame = page.frame_locator('iframe[title="streamlit_folium\\.st_folium"]')
+    if locator is not None:
+        frame = frame.locator(locator)
+    try:
+        frame.get_by_role("button", name="Marker").nth(nth).click(timeout=5_000)
+    except Exception:
+        frame.get_by_role("img").nth(nth).click(timeout=5_000)
+
+
+def test_draw(page: Page):
+    # Test draw support
+    page.get_by_role("link", name="draw feature group").click()
+
+    # This is the marker that was drawn beforehand
+    expect(
+        page.locator('[data-testid="stCustomComponentV1"]').content_frame.get_by_role(
+            "button", name="Marker"
+        )
+    ).to_be_visible()
+
+    # Start drawing a rectangle
+    page.locator('[data-testid="stCustomComponentV1"]').content_frame.get_by_role(
+        "link", name="Draw a rectangle"
+    ).click()
+
+    # I could not record this
+    # so some trickery to get the mouse movements correct
+    bbox = page.locator('[data-testid="stCustomComponentV1"]').bounding_box()
+
+    # One of the few times I miss javascript
+    x = bbox["x"]
+    y = bbox["y"]
+    width = bbox["width"]
+    height = bbox["height"]
+
+    # careful, my first click attempt triggered the zoom button
+    page.mouse.click(x + 100, y + 100)
+    page.mouse.click(x + width - 100, y + height - 100)
+
+    # Now check if streamlit shows a Polygon result
+    expect(page.get_by_text('"Polygon"').first).to_be_visible()