Migrate st_empty to playwright (streamlit#8539)

Migrate st_empty to playwright 

Co-authored-by: willhuang1997 <[email protected]>

e2e_playwright/st_empty.py

@@ -0,0 +1,48 @@
+# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2024)
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+import streamlit as st
+
+st.text("The space between this...")
+st.text("..and this should be the same as between this...")
+st.empty()
+st.text("...and this")
+
+replace_hello_text_button_clicked = st.button(
+    "Click here to replace text with a chart!"
+)
+replace_chart_button_clicked = st.button(
+    "Click here to replace chart with st.write with `placeholder.container`!"
+)
+empty_button_clicked = st.button("Empty the placeholder!")
+
+placeholder = st.empty()
+
+# Replace the placeholder with some text:
+placeholder.text("Hello")
+st.text("last element")
+
+if replace_hello_text_button_clicked:
+    # Replace the text with a chart:
+    placeholder.line_chart({"data": [1, 5, 2, 6]})
+
+if replace_chart_button_clicked:
+    # # Replace the chart with several elements:
+    with placeholder.container():
+        st.write("This is one element")
+        st.write("This is another")
+
+# # Clear all those elements:
+if empty_button_clicked:
+    placeholder.empty()

e2e_playwright/st_empty_test.py

@@ -0,0 +1,53 @@
+# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2024)
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+from playwright.sync_api import Page, expect
+
+from e2e_playwright.conftest import ImageCompareFunction, wait_for_app_run
+
+
+def test_st_empty(app: Page, assert_snapshot: ImageCompareFunction):
+    """Test that st.empty doesn't take any space on screen."""
+    expect(app.get_by_test_id("stEmpty")).to_have_count(1)
+
+    assert_snapshot(
+        app.get_by_test_id("stVerticalBlock"), name="st_empty-no_vertical_space_taken"
+    )
+
+
+def test_st_empty_as_a_container(app: Page, assert_snapshot: ImageCompareFunction):
+    expect(app.get_by_text("Hello")).to_be_visible()
+
+    app.get_by_test_id("stButton").nth(0).get_by_role("button").click()
+    wait_for_app_run(app)
+
+    expect(app.get_by_text("Hello")).to_have_count(0)
+    expect(app.get_by_test_id("stArrowVegaLiteChart")).to_have_count(1)
+
+    app.get_by_test_id("stButton").nth(1).get_by_role("button").click()
+    wait_for_app_run(app)
+
+    expect(app.get_by_test_id("stVegaLiteChart")).to_have_count(0)
+    expect(app.get_by_text("This is one element")).to_have_count(1)
+    expect(app.get_by_text("This is another")).to_have_count(1)
+
+    app.get_by_test_id("stButton").nth(2).get_by_role("button").click()
+    wait_for_app_run(app)
+
+    expect(app.get_by_text("This is one element")).to_have_count(0)
+    expect(app.get_by_text("This is another")).to_have_count(0)
+
+    assert_snapshot(
+        app.get_by_test_id("stVerticalBlock"), name="st_empty-order_after_replacement"
+    )

frontend/lib/src/components/core/Block/ElementNodeRenderer.tsx

@@ -329,7 +329,7 @@ const RawElementNodeRenderer = (
       )
 
     case "empty":
-      return <div className="stHidden" />
+      return <div className="stHidden" data-testid="stEmpty" />
 
     case "exception":
       return (