End-to-End Web Testing with Cypress

End-to-End Web Testing with Cypress

by Waweru Mwaura
Released January 2021
Publisher(s): Packt Publishing
ISBN: 9781839213854

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Book description

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

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

Product information

  • Title: End-to-End Web Testing with Cypress
  • Author(s): Waweru Mwaura
  • Release date: January 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781839213854