Add sample playwright tests for folium

First try: just do the draw plugin.

Author: hansthen

.github/workflows/save_versions.yml

@@ -0,0 +1,43 @@
+name: Save package versions
+
+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
+          --file requirements-dev.txt
+
+    - name: Install folium from source
+      shell: bash -l {0}
+      run: |
+        python -m pip install -e . --no-deps --force-reinstall
+
+    - name: Create versions.txt
+      shell: bash -l {0}
+      run: |
+        conda list > /tmp/versions.txt
+        chromium --version >> /tmp/versions.txt
+
+    - name: Save versions.txt
+      if: always()
+      uses: actions/upload-artifact@v4
+      with:
+        name: versions.txt
+        path: /tmp/versions.txt
+        fail-on-empty: false

.github/workflows/test_code.yml

@@ -35,5 +35,10 @@ jobs:
     - name: Install folium from source
       run: python -m pip install -e . --no-deps --force-reinstall
 
+    - name: Install pixelmatch
+      shell: bash -l {0}
+      run: |
+        pip install pixelmatch
+
     - name: Code tests
-      run: python -m pytest -vv --ignore=tests/selenium
+      run: python -m pytest -vv --ignore=tests/selenium --ignore=tests/playwright --ignore=tests/snapshots

.github/workflows/test_latest_branca.yml

@@ -33,4 +33,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 --ignore=tests/snapshots

.github/workflows/test_snapshots.yml

@@ -0,0 +1,55 @@
+name: Run Snapshot 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
+          --file requirements-dev.txt
+
+    - name: Install pytest plugins and pixelmatch
+      shell: bash -l {0}
+      run: |
+        pip install pixelmatch pytest-github-actions-annotate-failures pytest-rerunfailures
+
+    - name: Install folium from source
+      shell: bash -l {0}
+      run: |
+        python -m pip install -e . --no-deps --force-reinstall
+
+    - name: Test with pytest
+      shell: bash -l {0}
+      run: |
+        python -m pytest tests/snapshots -s --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
+
+    - name: Upload screenshots
+      if: failure()
+      uses: actions/upload-artifact@v4
+      with:
+        name: screenshots
+        path: |
+          /tmp/screenshot_*_*.png
+          /tmp/folium_map_*.html

.github/workflows/test_streamlit_folium.yml

@@ -66,7 +66,7 @@ jobs:
       shell: bash -l {0}
       run: |
         cd streamlit_folium
-        pytest tests/test_frontend.py --browser chromium -s --reruns 3 --junit-xml=test-results.xml
+        pytest tests/test_frontend.py --browser chromium -s --reruns 5 --junit-xml=test-results.xml
 
     - name: Surface failing tests
       if: always()

.pre-commit-config.yaml

@@ -9,7 +9,9 @@ repos:
     - id: debug-statements
     - id: end-of-file-fixer
     - id: check-docstring-first
+      exclude: ^examples/streamlit
     - id: check-added-large-files
+      args: ['--maxkb=1024']
     - id: requirements-txt-fixer
     - id: file-contents-sorter
       files: requirements-dev.txt

.streamlit/config.toml

@@ -0,0 +1,2 @@
+[server]
+enableStaticServing = true

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/issue_1770.py

@@ -0,0 +1,46 @@
+import json
+
+import streamlit as st
+from streamlit_folium import st_folium
+
+import folium
+
+st.set_page_config(layout="wide")
+
+geojson = """
+{"type": "FeatureCollection",
+ "features": [
+    {"id": "0", "type": "Feature", "properties": {"foo": 0},
+     "geometry": {"type": "Point", "coordinates": [0.0, 0.0]}
+    },
+    {"id": "1", "type": "Feature", "properties": {"foo": 1},
+     "geometry": {"type": "MultiPoint", "coordinates": [[1.0, 1.0]]}},
+    {"id": "2", "type": "Feature",
+ "properties": {"foo": 2}, "geometry": {"type": "MultiPoint", "coordinates":
+ [[2.0, 2.0]]}}, {"id": "3", "type": "Feature", "properties": {"foo": 3},
+ "geometry": {"type": "MultiPoint", "coordinates": [[3.0, 3.0]]}}, {"id": "4",
+ "type": "Feature", "properties": {"foo": 4}, "geometry": {"type":
+ "MultiPoint", "coordinates": [[4.0, 4.0]]}}]}"""
+
+geojson = json.loads(geojson)
+
+on_each_feature = folium.JsCode(
+    """
+    (feature, layer) => {
+        layer.bindPopup("hello world");
+    }
+"""
+)
+m = folium.Map(
+    zoom_start=5,
+    location=(0, 0),
+)
+folium.GeoJson(
+    geojson, on_each_feature=on_each_feature, marker=folium.CircleMarker(radius=20)
+).add_to(m)
+
+st_folium(m, width=700, height=500)
+# st_folium(m, width=700, height=500, returned_objects=[])
+
+html = m.get_root().render()
+st.code(html)

examples/streamlit/pages/issue_1989.py

@@ -0,0 +1,101 @@
+import io
+
+import branca
+import geopandas
+import pandas as pd
+import requests
+import streamlit as st
+from streamlit_folium import st_folium
+
+import folium
+
+st.set_page_config(layout="wide")
+
+response = requests.get(
+    "https://gist.githubusercontent.com/tvpmb/4734703/raw/"
+    "b54d03154c339ed3047c66fefcece4727dfc931a/US%2520State%2520List"
+)
+abbrs = pd.read_json(io.StringIO(response.text))
+
+income = pd.read_csv(
+    "https://raw.githubusercontent.com/pri-data/50-states/master/data/income-counties-states-national.csv",
+    dtype={"fips": str},
+)
+income["income-2015"] = pd.to_numeric(income["income-2015"], errors="coerce")
+
+data = requests.get(
+    "https://raw.githubusercontent.com/python-visualization/folium-example-data/main/us_states.json"
+).json()
+
+states = geopandas.GeoDataFrame.from_features(data, crs="EPSG:4326")
+statesmerge = states.merge(abbrs, how="left", left_on="name", right_on="name")
+statesmerge["geometry"] = statesmerge.geometry.simplify(0.05)
+
+statesmerge["medianincome"] = statesmerge.merge(
+    income.groupby("state")["income-2015"].median(),
+    how="left",
+    left_on="alpha-2",
+    right_on="state",
+)["income-2015"]
+statesmerge["change"] = statesmerge.merge(
+    income.groupby("state")["change"].median(),
+    how="left",
+    left_on="alpha-2",
+    right_on="state",
+)["change"]
+
+statesmerge["empty"] = None
+
+colormap = branca.colormap.LinearColormap(
+    vmin=statesmerge["change"].quantile(0.0),
+    vmax=statesmerge["change"].quantile(1),
+    colors=["red", "orange", "lightblue", "green", "darkgreen"],
+    caption="State Level Median County Household Income (%)",
+)
+
+m = folium.Map(location=[35.3, -97.6], zoom_start=4)
+
+popup = folium.GeoJsonPopup(
+    fields=["name", "change"],
+    aliases=["State", "% Change"],
+    localize=True,
+    labels=True,
+    style="background-color: yellow;",
+)
+
+tooltip = folium.GeoJsonTooltip(
+    fields=["name", "medianincome", "change", "empty"],
+    aliases=["State:", "2015 Median Income(USD):", "Median % Change:", "empty"],
+    localize=True,
+    sticky=False,
+    labels=True,
+    style="""
+        background-color: #F0EFEF;
+        border: 2px solid black;
+        border-radius: 3px;
+        box-shadow: 3px;
+    """,
+    max_width=800,
+)
+
+g = folium.GeoJson(
+    statesmerge,
+    style_function=lambda x: {
+        "fillColor": (
+            colormap(x["properties"]["change"])
+            if x["properties"]["change"] is not None
+            else "transparent"
+        ),
+        "color": "black",
+        "fillOpacity": 0.4,
+    },
+    tooltip=tooltip,
+    popup=popup,
+).add_to(m)
+
+colormap.add_to(m)
+
+html = m.get_root().render()
+st_folium(m, width=700, height=500)
+
+st.code(html)