Testing HTML tables with Playwright Python

I figured out this pattern today for testing an HTML table dynamically added to a page by JavaScript, using Playwright Python:

table_js = """
function tableToJson() {
  return Array.from(document.querySelectorAll("table")).map((table) => {
    return {
      headers: Array.from(table.querySelectorAll("th")).map((th) =>
        th.textContent.trim(),
      ),
      rows: Array.from(table.querySelectorAll("tr"))
        .slice(1)
        .map((tr) => {
          return Array.from(tr.querySelectorAll("td")).map((cell) =>
            cell.textContent.trim(),
          );
        }),
    };
  });
}
"""


def test_search(ds_server, page):
    page.goto(ds_server + "/-/search?q=cleo")
    # Should show search results, after fetching them
    page.wait_for_selector("table")
    tables = page.evaluate(table_js)
    assert tables == [
        {
            "headers": ["rowid", "name", "description"],
            "rows": [["1", "Cleo", "A medium sized dog"]],
        },
    ]

ds_server there is a fixture that starts Datasette running on a local port and returns the base URL for the instance.

The pattern I'm interested in is table_js - where you define a block of JavaScript to run on the page that returns a JSON-style dictionary, then use page.evaluate(table_js) to get the result back as a Python data structure which you can use in assertions.

The full test can be found here.

Created 2024-09-03T22:10:51-07:00, updated 2024-09-03T23:42:07-07:00 · History · Edit

Testing HTML tables with Playwright Python

Related