Fix Makefile and e2e_playwright test for CustomComponents (streamlit#…

…8617)

## Describe your changes

The `Makefile` step for the e2e_playwright custom component step was
broken since streamlit#8437 and is
fixed here.
Also, the popular_custom_components test did not wait for an app run,
which means that an exception triggered by using a custom component
would not have been caught properly.
Extracts these fixes from the PR
streamlit#8610

## GitHub Issue Link (if applicable)

## Testing Plan

- fixes an existing e2e test

---

**Contribution License Agreement**

By submitting this pull request you agree that all contributions to this
project are made under the Apache 2.0 license.

Makefile

@@ -353,14 +353,14 @@ playwright:
 playwright-custom-components:
 	cd e2e_playwright; \
 	rm -rf ./test-results; \
-	pip_args="extra-streamlit-components streamlit-ace streamlit-antd-components streamlit-aggrid streamlit-autorefresh streamlit-chat streamlit-echarts streamlit-folium streamlit-lottie streamlit-option-menu streamlit-url-fragment";\
+	pip_args="extra-streamlit-components streamlit-ace streamlit-antd-components streamlit-aggrid streamlit-autorefresh streamlit-chat streamlit-echarts streamlit-folium streamlit-lottie streamlit-option-menu streamlit-url-fragment"; \
 	if command -v "uv" > /dev/null; then \
-		echo "Running command: uv pip install $(pip_args)"; \
-		uv pip install $(pip_args); \
+		echo "Running command: uv pip install $${pip_args}"; \
+		uv pip install $${pip_args}; \
 	else \
-		echo "Running command: pip install $(pip_args)"; \
-		pip install $(pip_args); \
-	fi;\
+		echo "Running command: pip install $${pip_args}"; \
+		pip install $${pip_args}; \
+	fi; \
 	pytest ${custom_components_test_folder} --browser webkit --browser chromium --browser firefox --video retain-on-failure --screenshot only-on-failure --output ./test-results/ -n auto --reruns 1 --reruns-delay 1 --rerun-except "Missing snapshot" --durations=5 -r aR -v
 
 .PHONY: loc

e2e_playwright/custom_components/popular_components.py

@@ -127,8 +127,7 @@ def use_echarts():
 def use_extra_streamlit_components():
     from extra_streamlit_components import CookieManager
 
-    st.title("Cookies!")
-    st.help(CookieManager)
+    CookieManager()
 
 
 def use_folium():

e2e_playwright/custom_components/popular_components_test.py

@@ -14,23 +14,33 @@
 
 from playwright.sync_api import Page, expect
 
+from e2e_playwright.conftest import wait_for_app_run
+
 
 def _select_component(app: Page, component: str):
     selectbox_input = app.get_by_test_id("stSelectbox").locator("input")
 
     # Type an option (defined in the test app):
     selectbox_input.type(component)
     selectbox_input.press("Enter")
+    wait_for_app_run(app)
 
 
 def _expect_no_exception(app: Page):
+    """If there is an issue with importing / using the custom component, Streamlit throws an exception. So, expect that no exception was thrown."""
     expect(app.get_by_test_id("stException")).not_to_be_visible()
 
 
+def _expect_iframe_attached(app: Page):
+    """Expect the CustomComponent iframe to be attached to the DOM."""
+    expect(app.locator("iframe")).to_be_attached()
+
+
 def test_components_html(app: Page):
     """Test that components.html can be imported and used"""
     _select_component(app, "componentsHtml")
     _expect_no_exception(app)
+    _expect_iframe_attached(app)
     iframe = app.frame_locator("iframe")
     expect(iframe.locator("div", has_text="Hello World!")).to_be_attached()
 
@@ -39,18 +49,21 @@ def test_ace(app: Page):
     """Test that the ace component renders"""
     _select_component(app, "ace")
     _expect_no_exception(app)
+    _expect_iframe_attached(app)
 
 
 def test_aggrid(app: Page):
     """Test that the aggrid component renders"""
     _select_component(app, "aggrid")
     _expect_no_exception(app)
+    _expect_iframe_attached(app)
 
 
 def test_antd(app: Page):
     """Test that the ace component renders"""
     _select_component(app, "antd")
     _expect_no_exception(app)
+    _expect_iframe_attached(app)
 
 
 def test_autorefresh(app: Page):
@@ -62,6 +75,7 @@ def test_autorefresh(app: Page):
 def test_chat(app: Page):
     """Test that the chat component renders"""
     _select_component(app, "chat")
+    _expect_iframe_attached(app)
 
 
 def test_echarts(app: Page):
@@ -74,26 +88,31 @@ def test_extra_streamlit_components(app: Page):
     """Test that the extra-strealit-components component renders"""
     _select_component(app, "extraStreamlitComponents")
     _expect_no_exception(app)
+    _expect_iframe_attached(app)
 
 
 def test_folium(app: Page):
     """Test that the folium component renders"""
     _select_component(app, "folium")
+    _expect_iframe_attached(app)
 
 
 def test_lottie(app: Page):
     """Test that the lottie component renders"""
     _select_component(app, "lottie")
     _expect_no_exception(app)
+    _expect_iframe_attached(app)
 
 
 def test_option_menu(app: Page):
     """Test that the option-menu component renders"""
     _select_component(app, "optionMenu")
     _expect_no_exception(app)
+    _expect_iframe_attached(app)
 
 
 def test_url_fragment(app: Page):
     """Test that the url-fragment component renders"""
     _select_component(app, "urlFragment")
     _expect_no_exception(app)
+    _expect_iframe_attached(app)