Cypress
An open source, front-end testing tool, built for the modern web.
End to End Testing, or UI testing is one the many approaches for testing a web application. An end to end test is supposed to check whether a web application works as expected or not, by testing the user flow.
Cypress is a Javascript test automation framework for web applications.
Features
Cypress comes fully baked, batteries included. Here is a list of things it can do that no other testing framework can:
- Time Travel: Cypress takes snapshots as your tests run. Hover over commands in the Command Log to see exactly what happened at each step.
- Debuggability: Stop guessing why your tests are failing. Debug directly from familiar tools like Developer Tools. Our readable errors and stack traces make debugging lightning fast.
- Automatic Waiting: Never add waits or sleeps to your tests. Cypress automatically waits for commands and assertions before moving on. No more async hell.
- Spies, Stubs, and Clocks: Verify and control the behavior of functions, server responses, or timers. The same functionality you love from unit testing is right at your fingertips.
- Network Traffic Control: Easily control, stub, and test edge cases without involving your server. You can stub network traffic however you like.
- Consistent Results: Our architecture doesn’t use Selenium or WebDriver. Say hello to fast, consistent and reliable tests that are flake-free.
- Screenshots and Videos: View screenshots taken automatically on failure, or videos of your entire test suite when run from the CLI.
Reference- [https://www.cypress.io/features]
Installing Cypress
Cypress is a desktop application and can be installed directly on your computer.
If using npm
to install, Node.js 8 or above is required. (recommended)
Installation
Install Cypress via npm
:
- Open your command prompt or terminal.
- Run
npm cypress install
- This will install Cypress locally as a dev dependency for your project.
Make sure that you have already run
npm init
or have anode_modules
folder orpackage.json
file in the root of your project to ensure cypress is installed in the correct directory.
If you’re not using Node or npm
in your project or you want to try Cypress out quickly, you can always download Cypress directly from the CDN.
Opening Cypress
- Go inside your project root from the command prompt or terminal.
- Run
npx cypress open
(npx is included withnpm > v5.2
or can be installed separately) - The Cypress Test Runner will launch.
Adding a Test File
- Create a
test.spec.js
file inside thecypress > integration
. - Launch the Cypress Test Runner.
- Click on the
test.spec.js
on the Test Runner - Cypress opens the test in a browser (note: it'll be blank since we haven't written any tests yet)
First Test
Let's write our first test for the AT&T Buyflow in test.spec.js
describe('AT&T Buyflow', function() {
it('visits the ATT App', function() {
cy.visit('https://shopatt.centerfieldqa.com/v1/?cookiereset=1')
})
});
The Test Runner should refresh itself and the test in the browser displays the AT&T Buyflow site
What are describe and it?
All of these functions come from Bundled Tools that Cypress bakes in.
describe
andit
come from MochaCypress builds on these popular tools and frameworks that you hopefully already have some familiarity and knowledge of. If not, that’s okay too.
Reference - [https://docs.cypress.io/guides/getting-started/writing-your-first-test.html#Write-your-first-test]