mckinsey · l0uden · Mar 4, 2025 · Feb 18, 2025 · Feb 18, 2025 · Feb 18, 2025
@@ -15,7 +15,7 @@ runs:
     - name: Archive production artifacts
       uses: actions/upload-artifact@v4
       with:
-        name: Failed screenshots
+        name: Failed screenshots ${{ env.FAILED_SCREENSHOTS_ARCHIVE_POSTFIX }}
         path: |
           ${{ env.PROJECT_PATH }}failed_screenshots
 

@@ -31,6 +31,9 @@ jobs:
       - name: Install Hatch
         run: pip install hatch
 
+      - name: Install pixelmatch
+        run: sudo npm install pixelmatch -g
+
       - name: Show dependency tree
         run: hatch run pip tree
 

@@ -34,14 +34,17 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - name: Set up Python ${{ env.PYTHON_VERSION }}
+      - name: Set up Python ${{ matrix.config.python-version }}
         uses: actions/setup-python@v5
         with:
-          python-version: ${{ env.PYTHON_VERSION }}
+          python-version: ${{ matrix.config.python-version }}
 
       - name: Install Hatch
         run: pip install hatch
 
+      - name: Install pixelmatch
+        run: sudo npm install pixelmatch -g
+
       - name: Show dependency tree
         run: hatch run pip tree
 

@@ -0,0 +1,64 @@
+name: e2e vizro screenshots tests
+
+defaults:
+  run:
+    working-directory: vizro-core
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches:
+      - main
+
+env:
+  PYTHONUNBUFFERED: 1
+  FORCE_COLOR: 1
+  PYTHON_VERSION: "3.12"
+
+jobs:
+  test-e2e-vizro-screenshots:
+    name: test-e2e-vizro-screenshots for ${{ matrix.config.browser }}
+    runs-on: ubuntu-latest
+
+    strategy:
+      fail-fast: false
+      matrix:
+        config:
+          - browser: chrome
+            command: "-m 'not mobile_screenshots'"
+          - browser: chrome_mobile
+            command: "-m mobile_screenshots"
+          - browser: firefox
+            command: "--webdriver Firefox -m 'not mobile_screenshots'"
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Python ${{ env.PYTHON_VERSION }}
+        uses: actions/setup-python@v5
+        with:
+          python-version: ${{ env.PYTHON_VERSION }}
+
+      - name: Install Hatch
+        run: pip install hatch
+
+      - name: Install pixelmatch
+        run: sudo npm install pixelmatch -g
+
+      - name: Show dependency tree
+        run: hatch run pip tree
+
+      - name: Run e2e vizro-screenshots tests
+        run: |
+          export BROWSER=${{ matrix.config.browser }}
+          hatch run test-e2e-vizro-screenshots ${{ matrix.config.command }}
+
+      - name: Create artifacts and slack notifications
+        if: failure()
+        uses: ./.github/actions/failed-artifacts-and-slack-notifications
+        env:
+          TESTS_NAME: Vizro e2e vizro screenshots tests for ${{ matrix.config.browser }}
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+          PROJECT_PATH: /home/runner/work/vizro/vizro/vizro-core/
+          FAILED_SCREENSHOTS_ARCHIVE_POSTFIX: ${{ matrix.config.browser }}
@@ -25,16 +25,15 @@ dependencies = [
   "jupyter",
   "pre-commit",
   "PyGithub",
-  "imutils",
-  "opencv-python",
   "pyhamcrest",
-  "gunicorn"
+  "gunicorn",
+  "pixelmatch"
 ]
 features = ["kedro"]
 installer = "uv"
 
 [envs.default.env-vars]
-PYTHONPATH = "tests/e2e/vizro/dashboards/default:tests/tests_utils"
+PYTHONPATH = "tests/e2e/vizro/dashboards/default:tests/tests_utils:tests/e2e/vizro/custom_components"
 
 [envs.default.scripts]
 download-static-files = "python tools/download_static_files.py"
@@ -63,12 +62,25 @@ templates-check = ["python src/vizro/_themes/generate_plotly_templates.py --chec
 # fix this, but we don't actually use `hatch run test` anywhere right now.
 # See comments added in https://github.com/mckinsey/vizro/pull/444.
 test = "pytest tests --headless {args}"
-test-e2e-component-library = "pytest tests/e2e/component_library/test_component_library.py --headless {args}"
+test-e2e-component-library = "pytest -vs tests/e2e/component_library/test_component_library.py --headless {args}"
 test-e2e-vizro-dom-elements = [
   "gunicorn dashboard:app -b 0.0.0.0:5002 -w 1 --timeout 90 &",
   "tests/tests_utils/e2e/vizro/dashboards/wait-for-it.sh 127.0.0.1:5002 -t 30",
   "pytest -vs --reruns 1 tests/e2e/vizro/test_dom_elements --headless {args}"
 ]
+test-e2e-vizro-screenshots = [
+  "gunicorn dashboard:app -b 0.0.0.0:5002 -w 1 --timeout 90 &",
+  "gunicorn dashboard_one_page:app -b 0.0.0.0:5003 -w 1 --timeout 90 &",
+  "gunicorn dashboard_navbar_accordions:app -b 0.0.0.0:5004 -w 1 --timeout 90 &",
+  "gunicorn dashboard_navbar_pages:app -b 0.0.0.0:5005 -w 1 --timeout 90 &",
+  "gunicorn dashboard_navbar_navlink:app -b 0.0.0.0:5006 -w 1 --timeout 90 &",
+  "tests/tests_utils/e2e/vizro/dashboards/wait-for-it.sh 127.0.0.1:5002 -t 30",
+  "tests/tests_utils/e2e/vizro/dashboards/wait-for-it.sh 127.0.0.1:5003 -t 30",
+  "tests/tests_utils/e2e/vizro/dashboards/wait-for-it.sh 127.0.0.1:5004 -t 30",
+  "tests/tests_utils/e2e/vizro/dashboards/wait-for-it.sh 127.0.0.1:5005 -t 30",
+  "tests/tests_utils/e2e/vizro/dashboards/wait-for-it.sh 127.0.0.1:5006 -t 30",
+  "pytest -vs --reruns 1 tests/e2e/vizro/test_screenshots/ --headless {args}"
+]
 test-integration = "pytest tests/integration --headless {args}"
 test-js = "./tools/run_jest.sh {args}"
 test-unit = "pytest tests/unit {args}"

@@ -85,7 +85,12 @@ filterwarnings = [
   "ignore:HTTPResponse.getheader():DeprecationWarning",
   # Ignore deprecation warning as it comes from the plotly default template. In our templates `vizro_dark` and
   # `vizro_light`, we do not use mapbox anymore, see: https://github.com/mckinsey/vizro/pull/974
-  "ignore:.*scattermapbox.*is deprecated.*Use.*scattermap.*instead:DeprecationWarning"
+  "ignore:.*scattermapbox.*is deprecated.*Use.*scattermap.*instead:DeprecationWarning",
+  # ignore this warning for firefox screenshot tests
+  "ignore:get_logs always return None with webdrivers other than Chrome"
+]
+markers = [
+  "mobile_screenshots: marks tests for chrome mobile screenshots"
 ]
 norecursedirs = ["tests/tests_utils", "tests/js"]
 pythonpath = ["tests/tests_utils"]

@@ -1,35 +1,57 @@
+import os
+
 import e2e.vizro.constants as cnst
 import pytest
 from e2e.vizro.checkers import browser_console_warnings_checker
+from e2e.vizro.waiters import callbacks_finish_waiter
 from selenium.common import WebDriverException
 from selenium.webdriver.chrome.options import Options as ChromeOptions
 
 
 # dash_br_driver options hook
 def pytest_setup_options():
-    options = ChromeOptions()
-    options.add_argument("--headless")
-    options.add_argument("--window-size=1920,1080")
-    return options
+    if os.getenv("BROWSER") == "chrome_mobile":
+        options = ChromeOptions()
+        options.add_experimental_option("mobileEmulation", {"deviceName": "iPhone 14 Pro Max"})
+        return options
 
 
 def make_teardown(dash_br):
+    # TODO: move it after the specific test execution (after moving test to vizro repo)
+    # rewriting dynamic_filters_data.yml after each test
+    # data = {
+    #     "max": 7,
+    #     "min": 6,
+    #     "setosa": 5,
+    #     "versicolor": 10,
+    #     "virginica": 15,
+    # }
+    # with open(cnst.DYNAMIC_FILTERS_DATA_CONFIG, "w") as file:
+    #     yaml.dump(data, file)
+
     # checking for browser console errors
-    try:
-        log_levels = [level for level in dash_br.get_logs() if level["level"] == "SEVERE" or "WARNING"]
-        if log_levels:
-            for log_level in log_levels:
-                browser_console_warnings_checker(log_level, log_levels)
-    except WebDriverException:
-        pass
+    if os.getenv("BROWSER") in ["chrome", "chrome_mobile"]:
+        try:
+            error_logs = [log for log in dash_br.get_logs() if log["level"] == "SEVERE" or "WARNING"]
+            for log in error_logs:
+                browser_console_warnings_checker(log, error_logs)
+        except WebDriverException:
+            pass
 
 
 @pytest.fixture(autouse=True)
 def dash_br_driver(dash_br, request):
     """Built-in driver from the dash library."""
     port = request.param.get("port", cnst.DEFAULT_PORT) if hasattr(request, "param") else cnst.DEFAULT_PORT
     path = request.param.get("path", "") if hasattr(request, "param") else ""
+    dash_br.driver.set_window_size(1920, 1080)
     dash_br.server_url = f"http://127.0.0.1:{port}/{path}"
+    return dash_br
+
+
+@pytest.fixture(autouse=True)
+def wait_for_callbacks(dash_br):
+    callbacks_finish_waiter(dash_br)
 
 
 @pytest.fixture(autouse=True)

@@ -0,0 +1,24 @@
+.anchor-container {
+  align-items: center;
+  background: var(--text-primary);
+  border-top-left-radius: 8px;
+  bottom: 0;
+  color: var(--text-primary-inverted) !important;
+  display: flex;
+  font-size: 0.8rem;
+  font-weight: 500;
+  height: 24px;
+  padding: 0 12px;
+  position: fixed;
+  right: 0;
+}
+
+.anchor-container:focus,
+.anchor-container:hover {
+  background: var(--text-secondary);
+  color: var(--text-primary-inverted);
+}
+
+img#banner {
+  height: 16px;
+}
@@ -1,27 +1,51 @@
 import e2e.vizro.constants as cnst
 from pages.ag_grid_page import ag_grid_page
 from pages.datepicker_page import datepicker_page
+from pages.dynamic_data_page import dynamic_data_page
+from pages.dynamic_filters_pages import dynamic_filters_categorical_page, dynamic_filters_numerical_page
+from pages.filter_interactions_page import filter_interactions_page
 from pages.filters_page import filters_page
 from pages.homepage import homepage
 from pages.kpi_indicators_page import kpi_indicators_page
 from pages.parameters_page import parameters_page
+from pages.table_interactions_page import table_interactions_page
+from pages.table_page import table_page
 
 import vizro.models as vm
 from vizro import Vizro
 
 dashboard = vm.Dashboard(
     title="Vizro dashboard for integration testing",
-    pages=[homepage, filters_page, parameters_page, kpi_indicators_page, datepicker_page, ag_grid_page],
+    pages=[
+        homepage,
+        filters_page,
+        parameters_page,
+        filter_interactions_page,
+        kpi_indicators_page,
+        datepicker_page,
+        ag_grid_page,
+        table_page,
+        table_interactions_page,
+        dynamic_data_page,
+        dynamic_filters_categorical_page,
+        dynamic_filters_numerical_page,
+    ],
     navigation=vm.Navigation(
         pages={
             cnst.GENERAL_ACCORDION: [
                 cnst.HOME_PAGE_ID,
                 cnst.FILTERS_PAGE,
                 cnst.PARAMETERS_PAGE,
+                cnst.FILTER_INTERACTIONS_PAGE,
                 cnst.KPI_INDICATORS_PAGE,
             ],
             cnst.DATEPICKER_ACCORDION: [cnst.DATEPICKER_PAGE],
-            cnst.AG_GRID_ACCORDION: [cnst.TABLE_AG_GRID_PAGE],
+            cnst.AG_GRID_ACCORDION: [cnst.TABLE_PAGE, cnst.TABLE_INTERACTIONS_PAGE, cnst.TABLE_AG_GRID_PAGE],
+            cnst.DYNAMIC_DATA_ACCORDION: [
+                cnst.DYNAMIC_DATA_PAGE,
+                cnst.DYNAMIC_FILTERS_NUMERICAL_PAGE,
+                cnst.DYNAMIC_FILTERS_CATEGORICAL_PAGE,
+            ],
         }
     ),
     theme="vizro_light",

@@ -0,0 +1,40 @@
+import dash_bootstrap_components as dbc
+import e2e.vizro.constants as cnst
+from dash import get_asset_url, html
+from pages.homepage import homepage
+from pages.kpi_indicators_page import kpi_indicators_page
+
+import vizro.models as vm
+from vizro import Vizro
+
+dashboard = vm.Dashboard(
+    title="Vizro dashboard for integration testing",
+    pages=[
+        homepage,
+        kpi_indicators_page,
+    ],
+    navigation=vm.Navigation(
+        pages={
+            cnst.GENERAL_ACCORDION: [cnst.HOME_PAGE_ID],
+            cnst.KPI_ACCORDION: [cnst.KPI_INDICATORS_PAGE],
+        },
+        nav_selector=vm.NavBar(),
+    ),
+)
+
+app = Vizro(assets_folder="../assets").build(dashboard)
+app.dash.layout.children.append(
+    dbc.NavLink(
+        [
+            "Made with ",
+            html.Img(src=get_asset_url("banner.svg"), id="banner", alt="Vizro logo"),
+            "vizro",
+        ],
+        href="https://github.com/mckinsey/vizro",
+        target="_blank",
+        className="anchor-container",
+    )
+)
+
+if __name__ == "__main__":
+    app.run(debug=True)