Streamline Your Frontend Development with Cypress End-to-End Testing
When building large-scale applications, complexity can quickly spiral out of control, especially as teams grow and more people contribute to the same codebase. That’s why testing is an essential aspect of software engineering, particularly in frontend development. While unit and functional tests are crucial, they may not be enough to ensure your application’s correctness. This is where end-to-end (E2E) testing comes in, allowing you to replicate user behavior and verify that everything works as expected.
Getting Started with Cypress
To follow along with this tutorial, you’ll need recent versions of Node.js and npm installed. You can access the full source code used for this tutorial on GitHub. Let’s dive in!
Setting Up Cypress
First, create a new project and set up Cypress by running the following commands:
npm init -y
npm install --save-dev cypress
Next, open the package.json file in the root of your project and update the scripts property:
"scripts": {
"test": "cypress run"
}
Create a cypress.json file in the root folder of your project, which is where you can customize Cypress’ behavior for this specific project. Add the following code to the file and save it:
{
"chromeWebSecurity": false
}
Writing Cypress End-to-End Tests
To write effective E2E tests, follow the Agile methodology’s user story format. For each test, simulate the action the user is expected to take, then assert that the resulting application state matches your expectations.
Test 1: A User Performs a Search from the Homepage
When a user visits the homepage, types in the search box, and clicks on the search icon, they should see a new page populated with the results from their search term.
Create a new test file called homepage_search_spec.js and add the following code:
cy.visit('https://www.wikipedia.org/')
cy.get('[name="search"]').type('Cypress')
cy.get('[type="submit"]').click()
cy.url().should('contain', '/wiki/Cypress')
cy.get('h1').should('contain', 'Cypress')
Test 2: A User Switches Languages from the Homepage
When a user visits the homepage, clicks on the language switcher, and selects a new language, they should be redirected to the appropriate domain for the selected language.
Create a new test file called homepage_switch_language_spec.js and add the following code:
cy.visit('https://www.wikipedia.org/')
cy.get('#searchLanguage').click()
cy.get('[data-value="yo"]').click()
cy.url().should('contain', 'https://yo.wikipedia.org/')
cy.get('h1').should('contain', 'Ẹ kú àbọ̀')
Test 3: A User Checks the Definition of a Word on Wiktionary
When a user visits the homepage and clicks on the link to Wiktionary, they should be redirected to wiktionary.org. When a user on wiktionary.org searches for a definition by typing in the search bar and hitting enter, they should be redirected to a page with the definition of that search term.
Create a new test file called homepage_search_definition_spec.js and add the following code:
cy.visit('https://www.wikipedia.org/')
cy.get('.interwiki-wo').eq(2).click()
cy.url().should('contain', 'https://en.wiktionary.org/')
cy.get('#search').type('svelte{enter}')
cy.url().should('contain', '/wiki/svelte')
cy.get('h1').should('contain', 'velte')
Running Your Tests
Run your tests using the command npm test or by running them in the browser with npx cypress open. You can also run a specific test using the --spec option.
Conclusion
In this tutorial, you’ve seen how easy it is to verify the correctness of your web app by writing E2E tests using Cypress. With Cypress, you can write tests that mimic user behavior, ensuring that your application works as expected. By incorporating Cypress into your development workflow, you can catch bugs and unexpected behaviors before they make it to production. Happy coding!