convert test_table to use playwright

tests/integration/test_table.py → tests/integration/tests_playwright/test_table.py

@@ -3,10 +3,18 @@
 from typing import Generator
 
 import pytest
-from selenium.webdriver.common.by import By
+from playwright.sync_api import Page
 
 from reflex.testing import AppHarness
 
+expected_col_headers = ["Name", "Age", "Location"]
+expected_row_headers = ["John", "Jane", "Joe"]
+expected_cells_data = [
+    ["30", "New York"],
+    ["31", "San Fransisco"],
+    ["32", "Los Angeles"],
+]
+
 
 def Table():
     """App using table component."""
@@ -17,11 +25,6 @@ def Table():
     @app.add_page
     def index():
         return rx.center(
-            rx.input(
-                id="token",
-                value=rx.State.router.session.client_token,
-                is_read_only=True,
-            ),
             rx.table.root(
                 rx.table.header(
                     rx.table.row(
@@ -53,7 +56,7 @@ def index():
 
 
 @pytest.fixture()
-def table(tmp_path_factory) -> Generator[AppHarness, None, None]:
+def table_app(tmp_path_factory) -> Generator[AppHarness, None, None]:
     """Start Table app at tmp_path via AppHarness.
 
     Args:
@@ -71,47 +74,27 @@ def table(tmp_path_factory) -> Generator[AppHarness, None, None]:
         yield harness
 
 
-@pytest.fixture
-def driver(table: AppHarness):
-    """GEt an instance of the browser open to the table app.
+def test_table(page: Page, table_app: AppHarness):
+    """Test that a table component is rendered properly.
 
     Args:
-        table: harness for Table app
-
-    Yields:
-        WebDriver instance.
+        table_app: Harness for Table app
+        page: Playwright page instance
     """
-    driver = table.frontend()
-    try:
-        token_input = driver.find_element(By.ID, "token")
-        assert token_input
-        # wait for the backend connection to send the token
-        token = table.poll_for_value(token_input)
-        assert token is not None
+    assert table_app.frontend_url is not None, "frontend url is not available"
 
-        yield driver
-    finally:
-        driver.quit()
+    page.goto(table_app.frontend_url)
+    table = page.get_by_role("table")
 
+    # Check column headers
+    headers = table.get_by_role("columnheader").all_inner_texts()
+    assert headers == expected_col_headers
 
-def test_table(driver, table: AppHarness):
-    """Test that a table component is rendered properly.
+    # Check rows headers
+    rows = table.get_by_role("rowheader").all_inner_texts()
+    assert rows == expected_row_headers
 
-    Args:
-        driver: Selenium WebDriver open to the app
-        table: Harness for Table app
-    """
-    assert table.app_instance is not None, "app is not running"
-
-    thead = driver.find_element(By.TAG_NAME, "thead")
-    # poll till page is fully loaded.
-    table.poll_for_content(element=thead)
-    # check headers
-    assert thead.find_element(By.TAG_NAME, "tr").text == "Name Age Location"
-    # check first row value
-    assert (
-        driver.find_element(By.TAG_NAME, "tbody")
-        .find_elements(By.TAG_NAME, "tr")[0]
-        .text
-        == "John 30 New York"
-    )
+    # Check cells
+    rows = table.get_by_role("cell").all_inner_texts()
+    for i, expected_row in enumerate(expected_cells_data):
+        assert [rows[idx := i * 2], rows[idx + 1]] == expected_row