Rm id use (#912)

* rm unecessary code on output rendering on pyscript.py

* Remove all ids from repl

* Fix problems on rendering outside repl

* fixing tests

* Fixes repl and tes_py_repl

* Fix zz tests

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* test 864now works consistently

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

pyscriptjs/src/python/pyscript.py

@@ -228,19 +228,18 @@ class Element:
         return self.element.innerHtml
 
     def write(self, value, append=False):
-        out_element_id = self.id
-
         html, mime_type = format_mime(value)
         if html == "\n":
             return
 
         if append:
             child = document.createElement("div")
-            exec_id = self.element.childElementCount + 1
-            out_element_id = child.id = f"{self.id}-{exec_id}"
             self.element.appendChild(child)
 
-        out_element = document.querySelector(f"#{out_element_id}")
+        if self.element.children:
+            out_element = self.element.children[-1]
+        else:
+            out_element = self.element
 
         if mime_type in ("application/javascript", "text/html"):
             script_element = document.createRange().createContextualFragment(html)

pyscriptjs/tests/integration/test_02_output.py

@@ -13,9 +13,10 @@ class TestOutput(PyScriptTest):
             </py-script>
         """
         )
-        inner_html = self.page.content()
+        node_list = self.page.query_selector_all(r'[id^="py-internal"]')
-        pattern = r'<div id="py-.*">hello world</div>'
+        pattern = r"<div>hello world</div>"
-        assert re.search(pattern, inner_html)
+        assert re.search(pattern, node_list[0].inner_html())
+        assert len(node_list) == 1
 
     def test_consecutive_display(self):
         self.pyscript_run(
@@ -183,9 +184,10 @@ class TestOutput(PyScriptTest):
             </py-script>
         """
         )
-        inner_html = self.page.content()
+        node_list = self.page.query_selector_all(r'[id^="py-internal"]')
-        pattern = r'<div id="py-.*">hello world</div>'
+        pattern = r"<div>hello world</div>"
-        assert re.search(pattern, inner_html)
+        assert re.search(pattern, node_list[0].inner_html())
+        assert len(node_list) == 1
 
     def test_append_false(self):
         self.pyscript_run(
@@ -212,6 +214,19 @@ class TestOutput(PyScriptTest):
         inner_text = self.page.inner_text("html")
         assert inner_text == "hello\nworld"
 
+    def test_display_multiple_append_false(self):
+        self.pyscript_run(
+            """
+            <py-script>
+                display('hello', append=False)
+                display('world', append=False)
+            </py-script>
+        """
+        )
+        inner_html = self.page.content()
+        pattern = r'<py-script id="py-.*">world</py-script>'
+        assert re.search(pattern, inner_html)
+
     def test_display_list_dict_tuple(self):
         self.pyscript_run(
             """
@@ -306,6 +321,7 @@ class TestOutput(PyScriptTest):
             "print from python",
             "print from js",
         ]
+        print(self.console.error.lines)
         assert self.console.error.lines[-1] == "error from js"
 
     def test_console_line_break(self):

pyscriptjs/tests/integration/test_py_repl.py

@@ -80,7 +80,7 @@ class TestPyRepl(PyScriptTest):
         py_repl = self.page.locator("py-repl")
         py_repl.locator("button").click()
         out_div = py_repl.locator("div.py-repl-output")
-        assert out_div.inner_text() == "hello world"
+        assert out_div.all_inner_texts()[0] == "hello world"
 
     def test_show_last_expression(self):
         """
@@ -97,7 +97,7 @@ class TestPyRepl(PyScriptTest):
         py_repl = self.page.locator("py-repl")
         py_repl.locator("button").click()
         out_div = py_repl.locator("div.py-repl-output")
-        assert out_div.inner_text() == "42"
+        assert out_div.all_inner_texts()[0] == "42"
 
     def test_run_clears_previous_output(self):
         """
@@ -106,7 +106,7 @@ class TestPyRepl(PyScriptTest):
         """
         self.pyscript_run(
             """
-            <py-repl>
+            <py-repl  auto-generate="true">
                 display('hello world')
             </py-repl>
             """
@@ -114,12 +114,12 @@ class TestPyRepl(PyScriptTest):
         py_repl = self.page.locator("py-repl")
         out_div = py_repl.locator("div.py-repl-output")
         self.page.keyboard.press("Shift+Enter")
-        assert out_div.inner_text() == "hello world"
+        assert out_div.all_inner_texts()[0] == "hello world"
         #
         # clear the editor, write new code, execute
         self._replace(py_repl, "display('another output')")
         self.page.keyboard.press("Shift+Enter")
-        assert out_div.inner_text() == "another output"
+        assert out_div.all_inner_texts()[1] == "another output"
 
     def test_python_exception(self):
         """
@@ -150,7 +150,7 @@ class TestPyRepl(PyScriptTest):
     def test_python_exception_after_previous_output(self):
         self.pyscript_run(
             """
-            <py-repl>
+            <py-repl auto-generate="true">
                 display('hello world')
             </py-repl>
             """
@@ -158,13 +158,13 @@ class TestPyRepl(PyScriptTest):
         py_repl = self.page.locator("py-repl")
         out_div = py_repl.locator("div.py-repl-output")
         self.page.keyboard.press("Shift+Enter")
-        assert out_div.inner_text() == "hello world"
+        assert out_div.all_inner_texts()[0] == "hello world"
         #
         # clear the editor, write new code, execute
         self._replace(py_repl, "0/0")
         self.page.keyboard.press("Shift+Enter")
-        assert "hello world" not in out_div.inner_text()
+        assert "hello world" not in out_div.all_inner_texts()[1]
-        assert "ZeroDivisionError" in out_div.inner_text()
+        assert "ZeroDivisionError" in out_div.all_inner_texts()[1]
 
     def test_hide_previous_error_after_successful_run(self):
         """
@@ -174,7 +174,7 @@ class TestPyRepl(PyScriptTest):
         """
         self.pyscript_run(
             """
-            <py-repl>
+            <py-repl  auto-generate="true">
                 raise Exception('this is an error')
             </py-repl>
             """
@@ -182,11 +182,11 @@ class TestPyRepl(PyScriptTest):
         py_repl = self.page.locator("py-repl")
         out_div = py_repl.locator("div.py-repl-output")
         self.page.keyboard.press("Shift+Enter")
-        assert "this is an error" in out_div.inner_text()
+        assert "this is an error" in out_div.all_inner_texts()[0]
         #
         self._replace(py_repl, "display('hello')")
         self.page.keyboard.press("Shift+Enter")
-        assert out_div.inner_text() == "hello"
+        assert out_div.all_inner_texts()[1] == "hello"
 
     def test_output_attribute(self):
         self.pyscript_run(
@@ -206,7 +206,7 @@ class TestPyRepl(PyScriptTest):
         assert out_div.inner_text() == ""
         # check that we are using mydiv instead
         mydiv = self.page.locator("#mydiv")
-        assert mydiv.inner_text() == "hello world"
+        assert mydiv.all_inner_texts()[0] == "hello world"
 
     def test_output_attribute_does_not_exist(self):
         """
@@ -225,7 +225,7 @@ class TestPyRepl(PyScriptTest):
         #
         out_div = py_repl.locator("div.py-repl-output")
         msg = "py-repl ERROR: cannot find the output element #I-dont-exist in the DOM"
-        assert out_div.inner_text() == msg
+        assert out_div.all_inner_texts()[0] == msg
         assert "I will not be executed" not in self.console.log.text
 
     def test_auto_generate(self):

pyscriptjs/tests/integration/test_zz_examples.py

@@ -157,7 +157,7 @@ class TestExamples(PyScriptTest):
         # at the mpl-1 div which is rendered once the image is in the page
         # if this test fails, confirm that the div has the right id using
         # the --dev flag when running the tests
-        test = self.page.wait_for_selector("#mpl-1 >> img")
+        test = self.page.wait_for_selector("#mpl >> img")
         img_src = test.get_attribute("src").replace(
             "data:image/png;charset=utf-8;base64,", ""
         )
@@ -256,7 +256,6 @@ class TestExamples(PyScriptTest):
         assert self.page.title() == "PyScript/Panel Streaming Demo"
         wait_for_render(self.page, "*", "<div.*?class=['\"]bk-root['\"].*?>")
 
-    @pytest.mark.skip("flaky test, see issue #864")
     def test_repl(self):
         self.goto("examples/repl.html")
         self.wait_for_pyscript()
@@ -266,15 +265,15 @@ class TestExamples(PyScriptTest):
         self.page.locator("py-repl").type("display('Hello, World!')")
         self.page.locator("#runButton").click()
 
-        assert self.page.locator("#my-repl-2").text_content() == "Hello, World!"
+        assert self.page.locator("#my-repl-1").text_content() == "Hello, World!"
 
         # Confirm that using the second repl still works properly
         self.page.locator("#my-repl-2").type("display(2*2)")
         self.page.keyboard.press("Shift+Enter")
         # Make sure that the child of the second repl is attached properly
         # before looking into the text_content
-        assert self.page.wait_for_selector("#my-repl-2-1", state="attached")
+        assert self.page.wait_for_selector("#my-repl-2-2", state="attached")
-        assert self.page.locator("#my-repl-2-1").text_content() == "4"
+        assert self.page.locator("#my-repl-2-2").text_content() == "4"
 
     def test_repl2(self):
         self.goto("examples/repl2.html")
@@ -285,7 +284,7 @@ class TestExamples(PyScriptTest):
         self.page.locator("py-repl").type("import utils\ndisplay(utils.now())")
         self.page.wait_for_selector("#runButton").click()
         # Make sure the output is in the page
-        self.page.wait_for_selector("#my-repl-1-1")
+        self.page.wait_for_selector("#my-repl-1")
         # utils.now returns current date time
         content = self.page.content()
         pattern = "\\d+/\\d+/\\d+, \\d+:\\d+:\\d+"  # e.g. 08/09/2022 15:57:32