Migrate hostframe test from Cypress to Playwright (streamlit#9436)

## Describe your changes Migrate the test from Cypress to Playwright. This is the last test to be migrated. Also, the new version of the app uses multi-page apps v2 instead of the old one! ## GitHub Issue Link (if applicable) ## Testing Plan - Explanation of why no additional tests are needed - Unit Tests (JS and/or Python) - E2E Tests - Migrate existing e2e test - Any manual testing needed? --- **Contribution License Agreement** By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.
souvikmaji · Sep 10, 2024 · c79500f · c79500f
1 parent d8f2901
commit c79500f
Show file tree

Hide file tree

Showing 23 changed files with 635 additions and 292 deletions.
diff --git a/e2e/scripts/hostframe/pages/02_App_Page_2.py b/e2e/scripts/hostframe/pages/02_App_Page_2.py
diff --git a/e2e/scripts/hostframe/pages/03_App_Page_3.py b/e2e/scripts/hostframe/pages/03_App_Page_3.py
diff --git a/e2e/specs/hostframe.spec.js b/e2e/specs/hostframe.spec.js
diff --git a/...hots__/linux/hostframe_app_test/hostframe_app-theme_message_after[chromium].png b/...hots__/linux/hostframe_app_test/hostframe_app-theme_message_after[chromium].png
diff --git a/...shots__/linux/hostframe_app_test/hostframe_app-theme_message_after[firefox].png b/...shots__/linux/hostframe_app_test/hostframe_app-theme_message_after[firefox].png
diff --git a/...pshots__/linux/hostframe_app_test/hostframe_app-theme_message_after[webkit].png b/...pshots__/linux/hostframe_app_test/hostframe_app-theme_message_after[webkit].png
diff --git a/...ots__/linux/hostframe_app_test/hostframe_app-theme_message_before[chromium].png b/...ots__/linux/hostframe_app_test/hostframe_app-theme_message_before[chromium].png
diff --git a/...hots__/linux/hostframe_app_test/hostframe_app-theme_message_before[firefox].png b/...hots__/linux/hostframe_app_test/hostframe_app-theme_message_before[firefox].png
diff --git a/...shots__/linux/hostframe_app_test/hostframe_app-theme_message_before[webkit].png b/...shots__/linux/hostframe_app_test/hostframe_app-theme_message_before[webkit].png
diff --git a/..._snapshots__/linux/hostframe_app_test/hostframe_app-toolbar_items[chromium].png b/..._snapshots__/linux/hostframe_app_test/hostframe_app-toolbar_items[chromium].png
diff --git a/...__snapshots__/linux/hostframe_app_test/hostframe_app-toolbar_items[firefox].png b/...__snapshots__/linux/hostframe_app_test/hostframe_app-toolbar_items[firefox].png
diff --git a/.../__snapshots__/linux/hostframe_app_test/hostframe_app-toolbar_items[webkit].png b/.../__snapshots__/linux/hostframe_app_test/hostframe_app-toolbar_items[webkit].png
diff --git a/e2e_playwright/conftest.py b/e2e_playwright/conftest.py
@@ -281,6 +281,9 @@ class IframedPageAttrs:
     src_query_params: dict[str, str] | None = None
     # additional HTML body
     additional_html_head: str | None = None
+    # html content to load. Following placeholders are replaced during the test:
+    # - $APP_URL: the URL of the Streamlit app
+    html_content: str | None = None
 
 
 @dataclass
@@ -334,7 +337,8 @@ def _open_app(iframe_element_attrs: IframedPageAttrs | None = None) -> FrameLoca
             if _iframe_element_attrs.additional_html_head
             else ""
         )
-        _iframed_body = f"""
+        _iframed_body = (
+            f"""
             <!DOCTYPE html>
             <html style="height: 100%;">
                 <head>
@@ -357,6 +361,9 @@ def _open_app(iframe_element_attrs: IframedPageAttrs | None = None) -> FrameLoca
                 </body>
             </html>
             """
+            if _iframe_element_attrs.html_content is None
+            else _iframe_element_attrs.html_content.replace("$APP_URL", app_url)
+        )
 
         def fulfill_iframe_request(route: Route) -> None:
             """Return as response an iframe that loads the actual Streamlit app."""

diff --git a/e2e/scripts/hostframe/hostframe_app.py → e2e_playwright/hostframe_app.py b/e2e/scripts/hostframe/hostframe_app.py → e2e_playwright/hostframe_app.py
@@ -16,6 +16,24 @@
 
 import streamlit as st
 
+
+def page2():
+    st.header("Page 2")
+
+
+def page3():
+    st.header("Page 3")
+
+
+# the multi-pages are added to populate the sidebar. In the test, we are not actually
+# use them.
+st.navigation(
+    [
+        st.Page(page2, title="02_App_Page_2", default=True),
+        st.Page(page3, title="03_App_Page_3"),
+    ]
+)
+
 st.slider("Enter a number", 0, 20, 0)
 st.checkbox("Check me out", value=True)
 st.radio("Radio Widget", ["Option 1", "Option 2", "Option 3"])