In this post, we’re going to write some BDD cases for a To-Do App.

To-Do App

Here is the GitHub link:

And a live demo:


Have node_installed on your machine.

Then git clone the project.

Cd in the project folder.

Run npm start.

User Stories

We will write the user stories, acceptance criteria, and concrete examples.

The biggest difference between BDD and Test Driven Development (TDD) is the importance of concrete examples to illustrate scenarios.

As a user, I want to see the todo app.

  • wait for the page to load
  • Example: wait for the heading Vuejs Todo app to appear

As a user, I want to add a new task.

  • click on the input
  • enter the text
  • press enter
  • the new task should be displayed


  • click on the input with label “What needs to be done?”
  • enter “Buy new coffee”
  • press enter
  • the task “Buy new coffee” appears

As a user, I want to see the list of tasks I’ve added.

  • add another task
  • a list of tasks should appear


  • add “Morning walk 30 minutes”

As a user, I want to check off the task I’ve completed.

  • when I check a task off, it should be greyed out


  • when I check off the task “Buy new coffee”, the text should be strikethrough

As a user, I want to remove a task that I’ve checkout.

BDD Gherkin  Syntax

Add a new task:

Given I load the Todo App
And I wait for the page to load
When I enter a task in the input
And I type on enter
Then the new task should appear in the list

Check the task:

Given that I see my list of tasks
When I check off a task
Then the task should be strikethrough and greyed