End-to-End Web Testing with Cypress: Explore techniques for automated frontend web testing with Cypress and JavaScript

✍ Scribed by Waweru Mwaura

• Publisher: Packt Publishing Ltd
• Year: 2021
• Tongue: English
• Leaves: 241
• Category: Library

✦ Synopsis

Get to grips with the Cypress framework and learn how to best implement end-to-end automation testing with JavaScript with the help of expert tips, best practices, and real-world testing examples

Key Features

• Write your first end-to-end test and find out how to modernize your testing environment
• Execute test-driven web development and cross-browser testing using Cypress
• Discover the advantages of using Cypress over Selenium and refactor testing for modern web apps

Book Description

Cypress is a modern test automation framework for web-based frontend apps. Learning Cypress will help you overcome the shortcomings of conventional testing solutions such as dependency graph problems, the steep learning curve in setting up end-to-end testing packages, and difficulties in writing explicit time waits for your tests.

In End-to-End Web Testing with Cypress, you’ll learn how to use different Cypress tools, including time travel, snapshots, errors, and console output, to write fail-safe and non-flaky tests. You’ll discover techniques for performing test-driven development (TDD) with Cypress and write cross-browser tests for your web applications. As you advance, you’ll implement tests for a sample application and work with a variety of tools and features within the Cypress ecosystem. Finally, this Cypress book will help you grasp advanced testing concepts such as visual testing and networking.

By the end of this book, you’ll have the skills you need to be able to set up Cypress for any web app and understand how to use it to its full potential.

What you will learn

• Get to grips with Cypress and understand its advantages over Selenium
• Explore common Cypress commands, tools, and techniques for writing complete tests for web apps
• Set up and configure Cypress for cross-browser testing
• Understand how to work with elements and animation to write non-flaky tests
• Discover techniques for implementing and handling navigation requests in tests
• Implement visual regression tests with Applitools eyes

Who this book is for

This book is for automation testing professionals, software and web testers, and frontend web developers who have intermediate-level JavaScript and beginner-level test automation knowledge, as well as for complete beginners who are looking to get started with Cypress and learn how it works. You’ll also find this book useful if you are a Selenium tester who wants to migrate to Cypress and leverage its capabilities. An intermediate-level understanding of JavaScript programming and beginner-level knowledge of web testing are required.

✦ Table of Contents

Cover
Copyright
About PACKT
Contributors
Table of Contents
Preface
Section 1: Cypress as an End-to-End Testing Solution for Frontend Applications
Chapter 1: Installing and Setting Up Cypress
Technical requirements
Installing Cypress on Windows
Downloading and installing Node.js
Initializing the project
Installing Cypress on Windows
Recap – Installing Cypress on Windows
Installing Cypress on MacOS
Installing Node.js
Initializing the project
Installing Cypress on Mac
Installing Cypress using Yarn
Installing Cypress via direct download
Recap – Installing Cypress on macOS
Opening Cypress
Running with Npx
Running with Yarn
Running with the node modules path
Desktop application launch
Recap – Opening Cypress
Switching browsers
Exercise
Recap – Switching browsers
Adding npm scripts
Opening a Cypress command script
Recap – Adding npm scripts
Running Cypress tests
Combining Cypress commands using scripts
Recap – Running Cypress tests
Summary
Chapter 2: Differences between Selenium WebDriver and Cypress
Why choose Cypress?
Recap – why choose Cypress?
Comparing Cypress and Selenium WebDriver
Browser driver
Retries and waits
Target usage
Architecture
Cross-browser compatibility
Cypress trade-offs
Summarizing the differences
Recap – comparing Cypress and Selenium WebDriver
Cypress for frontend applications
Test Runner
Setup process
Implementation and debugging
Exhaustive testing capabilities
Recap – Cypress for frontend applications
Summary
Chapter 3: Working with Cypress Command-Line Tools
Technical requirements
Running Cypress commands
Global and local commands
Recap – running Cypress commands
Understanding basic Cypress commands
cypress run
cypress open
Using the cypress info command
Using the cypress version command
Optional exercise for Cypress command usage
Recap – understanding basic Cypress commands
Cypress debugging on the command line
Optional exercise for Cypress debugging
Recap – Cypress debugging on the command line
Summary
Chapter 4: Writing Your First Test
Technical requirements
Creating test files
Testfiles location
Testfiles extensions
Testfile structure
Creating our test file
Recap – creating test files
Writing your first test
Example test
Test classification
Exercise on tests classification
Recap – writing your first test
Writing practical tests
Visiting the Todo application page
Searching for an element
Interacting with the Todo input element
Asserting the application state
Exercise on practical testing
Recap – writing practical tests
Cypress' auto-reload feature
Recap – Cypress' auto-reload feature
Cypress assertions
Implicit subjects
Explicit subjects
Exercise–implicit and explicit subjects
Recap – Cypress assertions
Summary
Chapter 5: Debugging Cypress Tests
Technical requirements
Understanding page events
Recap – understanding page events
Understanding errors on a test runner
Error name
Error message
Code frame file
Code frame
Stack trace
Print to console
Learn more
Recap – understanding errors on a test runner
Understanding time travel on executed tests
Recap – understanding time travel on executed tests
Understanding test snapshots
Recap – understanding test snapshots
Understanding the console debug output
macOS
Windows/Linux OS
Recap – understanding the console debug output
Special debugging commands
cy.debug
cy.pause
Recap – special debugging commands
Summary
Section 2: Automated Tests with the TDD Approach
Chapter 6: Writing Cypress Tests Using the TDD approach
Technical requirements
Understanding TDD
Advantages of TDD
Disadvantages of TDD
Recap – understanding TDD
Writing TDD tests in Cypress
Setting up the application
Adding new todo items
Deleting a Todo item
Viewing a count of the added todo items
Recap – setting up the application
Modifying TDD tests
Adding new todo items
Deleting a todo item
Viewing added todo items
Viewing the count of added todo items
Recap – modifying TDD tests
Summary
Chapter 7: Understanding Element Interaction in Cypress
Technical requirements
Understanding actionability
Visibility
Disability
Detached
Readonly
Animations
Covering
Scrolling
Coordinates
Recap – understanding actionability
Forcing actionability
Overriding Cypress actionability checks
Recap – forcing actionability
Summary
Chapter 8: Understanding Variables and Aliases in Cypress
Technical requirements
Understanding Cypress variables
Closures
Recap – Understanding Cypress variables
Understanding Cypress aliases
Sharing contexts between test hooks and tests
Accessing element references
Accessing route references
Accessing request references
Recap – Understanding Cypress aliases
Summary
Chapter 9: Advanced Uses of Cypress Test Runner
Technical requirements
Understanding the instrument panel
Intercepts
Stubs
Spies
Recap – understanding the instrument panel
Understanding the Selector Playground
Selecting unique elements
Editing selector elements
Recap – understanding the Selector Playground
Test Runner keyboard shortcuts
Recap – Test Runner keyboard shortcuts
Summary
Section 3: Automated Testing for Your Web Application
Chapter 10: Exercises – Navigation and Network Requests
Technical requirements
Implementing navigation requests
cy.visit()
Exercise 1
cy.go()
Exercise 2
cy.reload()
Exercise 3
Recap – implementing navigation requests
Implementing network requests
cy.request()
Exercise 4
cy.intercept()
Exercise 5
Recap – implementing network requests
Advanced navigation request configuration
cy.visit() configuration options
Recap – advanced navigation request configuration
Summary
Chapter 11: Exercise – Stubbing and Spying XHR Requests
Technical requirements
Understanding XHR requests
Utilizing XHR requests in tests
Recap – utilizing XHR requests in tests
Understanding how to stub requests
Stubbing XHR requests
Exercise 1
Recap – understanding how to stub requests
Understanding how to spy on methods in a test
Why spy?
Exercise 2
Recap – understanding how to spy on methods in a test
Summary
Chapter 12: Visual Testing in Cypress
Technical requirements
Visual testing
Why visual testing?
Recap – visual testing
Understanding viewports
Viewports and testing
Viewports and automated visual testing
Recap – viewports
Automated visual testing tools
Percy
Applitools
Recap – automated visual testing tools
Summary
Other Books You May Enjoy
Index