Todomvc app testing with playwright and pytest

Playwright is a new test automation option came with several language supports like python, node.js, java etc. Why we should use playwright there is page in playwright dev ( https://playwright.dev/python/docs/why-playwright ) to take a look if anyone feels interested.

This article is mainly focus on people with python background who wants to take a quick check on playwright and its support for pytest plugin. We will use https://demo.playwright.dev/todomvc/#/ appand try with few tests on it. Tests are mainly inspired from cypress todomvc practice tests.

Installation and Setup environment

For setup its pretty straightforward as described in playwright dev pytest plugin setup in https://playwright.dev/python/docs/intro and https://playwright.dev/python/docs/test-runners pages.Note installation and setup done on macOS.

Scenarios can cover

• To see todos can be added and verify
• To see text input field gets clear when item is added
• To see that todo can be “completed”
• To see “clear completed” clears all completed todos
• To see that we can edit a todo
• To see number of todos left to be completed
• To see todos are persisted when browser gets refreshed
• To see that only completed todos gets displayed when completed button clicked

Set conftest.py file

Pytest has nice feature conftest.py file which helps to setup fixtures for all tests. The fixtures that we will define will be shared among all tests in our test suite. To know more about it, there is a nice thread in stackoverflow https://stackoverflow.com/questions/34466027/in-pytest-what-is-the-use-of-conftest-py-files which is quite informative.

To set conftest.py, we will go to our root directory of the project and just create a file name conftest.py where we can have our code test setup and teardown.

from playwright.sync_api import Playwright, expect


@pytest.fixture(scope='function')
def set_up(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=True)
    context = browser.new_context()
    # Open new page
    page = context.new_page()
    # Go to https://demo.playwright.dev/todomvc/#/
    page.goto("https://demo.playwright.dev/todomvc/#/")

    yield page
    page.close()

we used yield instead of return so can pass page to one test to another and after running all tests can close with page.close(). Also, fixture scope is function as our tests separated with corresponding functions.

We will try with one test scenario -To see “clear completed” clears all completed todos in practice file i.e test_practice.py . pytest has the convention that file which needs to run by pytest, should have test*.py format, same goes with functions which we use for our test as test* format

from playwright.sync_api import expect
def test_clear_all_completed_todos(set_up):
    page = set_up

    page.click('.new-todo')
    page.fill('.new-todo', 'item')
    page.locator('.new-todo').press('Enter')
    page.click('.toggle')

    page.click('.clear-completed')

    expect(page.locator('.todo-list li')).to_have_count(0)

Notice that we don’t have to import conftest.py for setup function, not even pytest- just taken care of , only thing we have to import expect for verifying the test.

Feel free to try with other scenarios and happy learning!