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

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