diff --git a/.gitignore b/.gitignore
index 08ab4294b3..46c1cd6d9f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,6 +21,7 @@ frontend/npm-debug.log*
frontend/yarn-debug.log*
frontend/yarn-error.log*
frontend/src/constants/env.ts
+frontend/cypress/**/*.mp4
.idea
diff --git a/frontend/cypress.json b/frontend/cypress.json
new file mode 100644
index 0000000000..0967ef424b
--- /dev/null
+++ b/frontend/cypress.json
@@ -0,0 +1 @@
+{}
diff --git a/frontend/cypress/fixtures/example.json b/frontend/cypress/fixtures/example.json
new file mode 100644
index 0000000000..02e4254378
--- /dev/null
+++ b/frontend/cypress/fixtures/example.json
@@ -0,0 +1,5 @@
+{
+ "name": "Using fixtures to represent data",
+ "email": "hello@cypress.io",
+ "body": "Fixtures are a great way to mock data for responses to routes"
+}
diff --git a/frontend/cypress/integration/1-getting-started/todo.spec.ts b/frontend/cypress/integration/1-getting-started/todo.spec.ts
new file mode 100644
index 0000000000..887f791b3f
--- /dev/null
+++ b/frontend/cypress/integration/1-getting-started/todo.spec.ts
@@ -0,0 +1,152 @@
+/// , which is lowest-level element that contains the text.
+ // In order to check the item, we'll find the
+ // by traversing up the dom to the parent element. From there, we can `find`
+ // the child checkbox element and then use the `parents` command
+ // to traverse multiple levels up the dom until we find the corresponding element.
+ // Once we get that element, we can assert that it has the completed class.
+ cy
+ .contains("Pay electric bill")
+ .parents("li")
+ .should("have.class", "completed");
+ });
+
+ context("with a checked task", () => {
+ beforeEach(() => {
+ // We'll take the command we used above to check off an element
+ // Since we want to perform multiple tests that start with checking
+ // one element, we put it in the beforeEach hook
+ // so that it runs at the start of every test.
+ cy
+ .contains("Pay electric bill")
+ .parent()
+ .find("input[type=checkbox]")
+ .check();
+ });
+
+ it("can filter for uncompleted tasks", () => {
+ // We'll click on the "active" button in order to
+ // display only incomplete items
+ cy.contains("Active").click();
+
+ // After filtering, we can assert that there is only the one
+ // incomplete item in the list.
+ cy
+ .get(".todo-list li")
+ .should("have.length", 1)
+ .first()
+ .should("have.text", "Walk the dog");
+
+ // For good measure, let's also assert that the task we checked off
+ // does not exist on the page.
+ cy.contains("Pay electric bill").should("not.exist");
+ });
+
+ it("can filter for completed tasks", () => {
+ // We can perform similar steps as the test above to ensure
+ // that only completed tasks are shown
+ cy.contains("Completed").click();
+
+ cy
+ .get(".todo-list li")
+ .should("have.length", 1)
+ .first()
+ .should("have.text", "Pay electric bill");
+
+ cy.contains("Walk the dog").should("not.exist");
+ });
+
+ it("can delete all completed tasks", () => {
+ // First, let's click the "Clear completed" button
+ // `contains` is actually serving two purposes here.
+ // First, it's ensuring that the button exists within the dom.
+ // This button only appears when at least one task is checked
+ // so this command is implicitly verifying that it does exist.
+ // Second, it selects the button so we can click it.
+ cy.contains("Clear completed").click();
+
+ // Then we can make sure that there is only one element
+ // in the list and our element does not exist
+ cy
+ .get(".todo-list li")
+ .should("have.length", 1)
+ .should("not.have.text", "Pay electric bill");
+
+ // Finally, make sure that the clear button no longer exists.
+ cy.contains("Clear completed").should("not.exist");
+ });
+ });
+});
+
+export {};
diff --git a/frontend/cypress/plugins/index.ts b/frontend/cypress/plugins/index.ts
new file mode 100644
index 0000000000..70100f1464
--- /dev/null
+++ b/frontend/cypress/plugins/index.ts
@@ -0,0 +1,24 @@
+///