|
| 1 | +/// <reference types="cypress" /> |
| 2 | + |
| 3 | +// Welcome to Cypress! |
| 4 | +// |
| 5 | +// This spec file contains a variety of sample tests |
| 6 | +// for a todo list app that are designed to demonstrate |
| 7 | +// the power of writing tests in Cypress. |
| 8 | +// |
| 9 | +// To learn more about how Cypress works and |
| 10 | +// what makes it such an awesome testing tool, |
| 11 | +// please read our getting started guide: |
| 12 | +// https://on.cypress.io/introduction-to-cypress |
| 13 | + |
| 14 | +describe('example to-do app', () => { |
| 15 | + beforeEach(() => { |
| 16 | + // Cypress starts out with a blank slate for each test |
| 17 | + // so we must tell it to visit our website with the `cy.visit()` command. |
| 18 | + // Since we want to visit the same URL at the start of all our tests, |
| 19 | + // we include it in our beforeEach function so that it runs before each test |
| 20 | + cy.visit('https://example.cypress.io/todo'); |
| 21 | + }); |
| 22 | + |
| 23 | + it('displays two todo items by default', () => { |
| 24 | + // We use the `cy.get()` command to get all elements that match the selector. |
| 25 | + // Then, we use `should` to assert that there are two matched items, |
| 26 | + // which are the two default items. |
| 27 | + cy.get('.todo-list li').should('have.length', 2); |
| 28 | + |
| 29 | + // We can go even further and check that the default todos each contain |
| 30 | + // the correct text. We use the `first` and `last` functions |
| 31 | + // to get just the first and last matched elements individually, |
| 32 | + // and then perform an assertion with `should`. |
| 33 | + cy.get('.todo-list li').first().should('have.text', 'Pay electric bill'); |
| 34 | + cy.get('.todo-list li').last().should('have.text', 'Walk the dog'); |
| 35 | + }); |
| 36 | + |
| 37 | + it('can add new todo items', () => { |
| 38 | + // We'll store our item text in a variable so we can reuse it |
| 39 | + const newItem = 'Feed the cat'; |
| 40 | + |
| 41 | + // Let's get the input element and use the `type` command to |
| 42 | + // input our new list item. After typing the content of our item, |
| 43 | + // we need to type the enter key as well in order to submit the input. |
| 44 | + // This input has a data-test attribute so we'll use that to select the |
| 45 | + // element in accordance with best practices: |
| 46 | + // https://on.cypress.io/selecting-elements |
| 47 | + cy.get('[data-test=new-todo]').type(`${newItem}{enter}`); |
| 48 | + |
| 49 | + // Now that we've typed our new item, let's check that it actually was added to the list. |
| 50 | + // Since it's the newest item, it should exist as the last element in the list. |
| 51 | + // In addition, with the two default items, we should have a total of 3 elements in the list. |
| 52 | + // Since assertions yield the element that was asserted on, |
| 53 | + // we can chain both of these assertions together into a single statement. |
| 54 | + cy.get('.todo-list li') |
| 55 | + .should('have.length', 3) |
| 56 | + .last() |
| 57 | + .should('have.text', newItem); |
| 58 | + }); |
| 59 | + |
| 60 | + it('can check off an item as completed', () => { |
| 61 | + // In addition to using the `get` command to get an element by selector, |
| 62 | + // we can also use the `contains` command to get an element by its contents. |
| 63 | + // However, this will yield the <label>, which is lowest-level element that contains the text. |
| 64 | + // In order to check the item, we'll find the <input> element for this <label> |
| 65 | + // by traversing up the dom to the parent element. From there, we can `find` |
| 66 | + // the child checkbox <input> element and use the `check` command to check it. |
| 67 | + cy.contains('Pay electric bill') |
| 68 | + .parent() |
| 69 | + .find('input[type=checkbox]') |
| 70 | + .check(); |
| 71 | + |
| 72 | + // Now that we've checked the button, we can go ahead and make sure |
| 73 | + // that the list element is now marked as completed. |
| 74 | + // Again we'll use `contains` to find the <label> element and then use the `parents` command |
| 75 | + // to traverse multiple levels up the dom until we find the corresponding <li> element. |
| 76 | + // Once we get that element, we can assert that it has the completed class. |
| 77 | + cy.contains('Pay electric bill') |
| 78 | + .parents('li') |
| 79 | + .should('have.class', 'completed'); |
| 80 | + }); |
| 81 | + |
| 82 | + context('with a checked task', () => { |
| 83 | + beforeEach(() => { |
| 84 | + // We'll take the command we used above to check off an element |
| 85 | + // Since we want to perform multiple tests that start with checking |
| 86 | + // one element, we put it in the beforeEach hook |
| 87 | + // so that it runs at the start of every test. |
| 88 | + cy.contains('Pay electric bill') |
| 89 | + .parent() |
| 90 | + .find('input[type=checkbox]') |
| 91 | + .check(); |
| 92 | + }); |
| 93 | + |
| 94 | + it('can filter for uncompleted tasks', () => { |
| 95 | + // We'll click on the "active" button in order to |
| 96 | + // display only incomplete items |
| 97 | + cy.contains('Active').click(); |
| 98 | + |
| 99 | + // After filtering, we can assert that there is only the one |
| 100 | + // incomplete item in the list. |
| 101 | + cy.get('.todo-list li') |
| 102 | + .should('have.length', 1) |
| 103 | + .first() |
| 104 | + .should('have.text', 'Walk the dog'); |
| 105 | + |
| 106 | + // For good measure, let's also assert that the task we checked off |
| 107 | + // does not exist on the page. |
| 108 | + cy.contains('Pay electric bill').should('not.exist'); |
| 109 | + }); |
| 110 | + |
| 111 | + it('can filter for completed tasks', () => { |
| 112 | + // We can perform similar steps as the test above to ensure |
| 113 | + // that only completed tasks are shown |
| 114 | + cy.contains('Completed').click(); |
| 115 | + |
| 116 | + cy.get('.todo-list li') |
| 117 | + .should('have.length', 1) |
| 118 | + .first() |
| 119 | + .should('have.text', 'Pay electric bill'); |
| 120 | + |
| 121 | + cy.contains('Walk the dog').should('not.exist'); |
| 122 | + }); |
| 123 | + |
| 124 | + it('can delete all completed tasks', () => { |
| 125 | + // First, let's click the "Clear completed" button |
| 126 | + // `contains` is actually serving two purposes here. |
| 127 | + // First, it's ensuring that the button exists within the dom. |
| 128 | + // This button only appears when at least one task is checked |
| 129 | + // so this command is implicitly verifying that it does exist. |
| 130 | + // Second, it selects the button so we can click it. |
| 131 | + cy.contains('Clear completed').click(); |
| 132 | + |
| 133 | + // Then we can make sure that there is only one element |
| 134 | + // in the list and our element does not exist |
| 135 | + cy.get('.todo-list li') |
| 136 | + .should('have.length', 1) |
| 137 | + .should('not.have.text', 'Pay electric bill'); |
| 138 | + |
| 139 | + // Finally, make sure that the clear button no longer exists. |
| 140 | + cy.contains('Clear completed').should('not.exist'); |
| 141 | + }); |
| 142 | + }); |
| 143 | +}); |
0 commit comments