Project ยท 30 min
Project: test the todo app
The task
You now know how to find elements, act on them, check results, wait for facts, and catch bugs. In this project you write a complete set of tests for the todo app, from an empty file.
Work in this order, and press Check my work after each test.
- Read the task.
- Do the steps by hand in the practice browser on the right, so you know what the app does.
- Write the test.
- Run it. Read the report. Fix what is wrong.
- Check your work. If the test does not catch the bug, read the message, and think about what differs on the app with the bug.
A tip for a set of tests
Six of the seven tests need the same first steps: open the app, and wait until the three todos are there. Put those steps in a test.beforeEach hook. Then every test starts with a list that is loaded, and no test needs its own wait.
The app is the one from the earlier lessons. It has a text box with the label New todo, an Add button, a list of todos, a count, three filters, and a delete button on each row. The server keeps the todos while the page is open, so a page reload does not remove them.
What a good set of tests looks like
- Each test has a name that tells a person what the app must do.
- Each test checks the result with an assertion that waits.
- No test depends on another test. Each one gets a new page, with the three starting todos.
- No test waits for a fixed time.
Tasks
7 to do
Task 1, not checked yet. Add with the button. Fill the box
New todowithLearn Playwrightand clickAdd. Check that the list has 4 todos, thatLearn Playwrightis visible, and that the box is empty again.Task 2, not checked yet. Do not add a blank todo. Click
Addwith an empty box. Check the alertWrite something first.and that the list still has 3 todos.Task 3, not checked yet. Add with the Enter key. Type a todo into the box and press
Enter. Do not clickAdd. Check that the list has 4 todos.Task 4, not checked yet. Count the items that are left. At the start the count shows
2 items left. TickBuy milkand check1 item left. Untick it and check2 items leftagain.Task 5, not checked yet. Delete the todo that was clicked. Delete
Write a test. Check that 2 todos are left, thatWrite a testis hidden, and thatBuy milkis still visible.Task 6, not checked yet. Filter by state. Click the link
Completed. Check that onlyWalk the dogshows. ClickActive. Check that 2 todos show and thatWalk the dogis hidden.Task 7, not checked yet. Keep the todos. Add a todo named
Still here, and wait until it shows. Reload the page withpage.reload(). Check thatStill hereis visible after the reload.
Task 1 of 7
Add with the button. Fill the box New todo with Learn Playwright and click Add. Check that the list has 4 todos, that Learn Playwright is visible, and that the box is empty again.