Simple TODO List - Instructions

About Page

Simple TODO List is a stateful browser application. It stores data locally in the browser and includes user-facing and admin-style functionality.

Use it to practice:

• creating, editing, completing, and deleting todos
• checking persistence across refreshes
• clearing or manipulating browser storage
• testing admin functionality
• designing page objects for a small but stateful workflow

Automated Execution

This is a good app for practicing setup and teardown. Because state is stored in the browser, tests should deliberately control local storage before and after execution.

Avoid assuming the app starts empty unless your test made it empty.

Exploratory Testing

Use the browser storage tools while testing. Compare what the UI shows with what has been written to local storage.

Console Setup And Teardown

The todo item page exposes a small window.app API. This makes it useful for practicing tactical automation from DevTools and for creating repeatable setup data while exploring the UI.

Open a todo list, for example /apps/simple-todo-list/todo.html#/&eviltester, then try these examples in the console.

Create 100 todo items:

for (var x = 0; x < 100; x++) {
    app.addItem("todo ".concat(x));
}

Mark every second item as completed:

app.read(function(items) {
    items.forEach(function(item, index) {
        if (index % 2 === 1) {
            app.toggleComplete(item.id, true, true);
        }
    });

    app.filter(true);
});

Amend every item title:

app.read(function(items) {
    items.forEach(function(item) {
        app.update(item.id, {
            title: item.title.concat("*TODO*")
        });
    });

    app.filter(true);
});

Delete all items in the current list:

app.read(function(items) {
    for (var x = items.length - 1; x >= 0; x--) {
        app.removeItem(items[x].id);
    }
});

Delete only completed items:

app.removeCompletedItems();

These snippets are deliberately close to what a browser automation setup or teardown might do, but they run directly in the page. Use them to compare UI-driven setup, storage-driven setup, and API-style setup through the app object.

Bookmarklet Practice

The same scripts can be wrapped as bookmarklets. This is a good target app for the Bookmarklet Generator because the page has visible state, local storage, and an exposed app object.

For example, this bookmarklet adds ten setup items to whichever todo list is open:

javascript:(function(){for(var x=0;x<10;x++){app.addItem("bookmarklet todo ".concat(x));}})()

This one clears completed items:

javascript:(function(){app.removeCompletedItems();})()