Web Testing with Cypress: Run End-to-End tests, Integration tests, Unit Tests Across Web Apps, Browsers and Cross-Platforms

✍ Scribed by Lev Gelfenbuim

• Publisher: BPB Publications
• Year: 2022
• Tongue: English
• Leaves: 209
• Category: Library

✦ Synopsis

Perform fast, easy and reliable cross-browser testing with practical demonstrations.

Key Features:
- Access to Visual testing, Cypress Studio, GitHub Actions, and the Cypress Dashboard.
- Simple and practical illustrations on using Docker images, CI/CD pipelines and headless Cypress test runner.
- Examples and solutions on using Cucumber for cross-browser and cross-platform testing.

Description
"Web Testing with Cypress" teaches you to test web apps on any browser or platform with zero environment setup in a developer-friendly, end-to-end web testing environment.

When you read this book, you'll be able to create, run and debug test automation scripts in jаvascript without wasting any time. You will execute tests in real-time while you create your applications and begin troubleshooting. You will work on Cucumber + TDD/BDD integration, CI testing, Cypress Dashboard, GitHub Actions, and Cypress Docker Images. Advanced topics such as running sequential and parallel tests, load balancing, cross-platform testing and Cypress-Driven Development are also trained in this book. While you master in writing automated tests, you'll also learn about Cypress' time travel, real-time reloads, pictures and videos, network traffic control, and live debugging features.

As you progress through the book, you'll learn about cutting-edge testing methodologies, such as test-driven development (TDD), sanity testing (SST), and left shift testing (LTST). It also includes case studies and easy demos for non-technical users to help them write scripts in simple language to undertake application testing.

Web Testing with Cypress is one of just a few books that have been written on the subject. In recent years, the development of Web 2.0 has boomed in popularity. Angular, Vue, React, Svelte, and other modern web development frameworks made it easy and affordable to build blazing-fast modern web applications using jаvascript and TypeScript languages. Companies started to abandon legacy web technologies in favor of the new ones, and a generation of web developers have raised and brought the web to what it is today.

This book will talk about the less-adopted subject in web development – the quality assurance and testing of Web 2.0 applications. In particular, it will introduce the readers to Cypress, an open-source initiative for web testing framework, and to continuous integration and continuous delivery concepts, that are crucial for making quality web products.

This book is divided into 10 chapters. They will cover subjects such as testing core concepts, Cypress functionalities, CI/CD core concepts, and natural language testing using Cucumber.js.

What you will learn:
- Explore Cypress capabilities, including forms, elements, action fields, and Cypress Studio.
- Learn to write and run automated cross-browser and cross-platform tests.
- Execute Sequential and Parallel testing, Shift Left testing, and Sanity testing.
- Make use of GitHub Actions, Cypress Dashboard, Cucumber, and NodeJS.
- Write test code, run CI testing and record test results.

Who this book is for:
This book is for Test Automation Engineers, QA professionals, Web Developers, and anyone who wants to test their web apps from start to finish with automation. This book assumes no prior knowledge of Cypress or testing concepts.

✦ Table of Contents

1. Introduction to Cypress
   Introduction
   Structure
   Objective
   What is Cypress?
   The Web has evolved
   Testing has [evolved] too
   Fast, easy, and reliable
   Testing for anything that runs in a browser
   Installing Cypress
   Prerequisites
   Installation
   Directories' structure(9)
   cypress.json
   Cypress core concepts
   Closures
   Variables and aliases
   Commands
   Network interception
   Stubs
   Mocks
   Waiting
   Spies
   Test runner
   Command-line tools
   Screenshots and videos
   Cypress Studio
   Adding a new test
   Adding commands to existing test
   Conclusion
   References
2. Cypress vs. Selenium WebDriver
   Introduction
   Structure
   Objective
   Selenium WebDriver
   Modern Web testing challenges
   Supported programming languages
   Cross-browser functionalities
   User interactions emulation
   Working with IFrames
   Cypress tradeoffs
   Conclusion
   References
3. Write Your First Tests
   Introduction
   Structure
   Objective
   The Real-World App (RWA)
   Installing RWA
   Starting RWA
   Techniques to locate elements
   The id attribute
   The class attribute
   Custom attributes
   XPath
   Interaction with DOM elements
   Text inputs
   Button
   Checkbox
   Interaction with forms
   State assertions
   The initial state
   Complex test scenarios
   Conclusion
   References
4. Advanced Testing Techniques
   Introduction
   Structure
   Objective
   Behavior-Driven Development (BDD)
   Cucumber
   Cucumber in the testing world
   Installing Cucumber
   Gherkin
   Step definitions
   Scenarios for RWA
   signin.feature
   Going beyond Cypress' boundaries
   E-mail confirmation flow
   Installing the gmail-tester library
   Modifying the RWA code
   Writing the spec
   Visual regression testing
   Installing the pixel match library
   Configuring the library
   Writing the spec
   Conclusion
   References
5. Introducing CI/CD
   Introduction
   Structure
   Objective
   Understanding CI/CD
   The role of Cypress in CI/CD
   Defining and setting up CI/CD pipelines
   The CI pipeline
   CI on developer's machine
   CI on a dedicated server
   Self-hosted Actions Runner installation
   The CI workflow
   The tests job
   The build job
   Triggering the CI
   The CD pipeline
   Conclusion
   References
6. Introduction to Cypress Dashboard
   Introduction
   Structure
   Objective
   Set up the Cypress Dashboard
   Cypress Dashboard in the CI/CD phase
   Adding the Cypress Dashboard to CI/CD pipeline
   Conclusion
   References
7. Integration of CI/CD into Existing Projects
   Introduction
   Structure
   Objective
   Example 1: Volt React Dashboard Bootstrap 5
   Step 1: Clone the repository
   Step 2: Learn the project
   Step 3: Manual execution
   Step 4: Add the CI workflow
   Step 5: Add the CD workflow
   Example 2: Angular RealWorld example app
   Step 1: Clone the repository
   Step 2: Learn the project
   Step 3: Manual execution
   Step 4: Add the CI workflow
   Step 5: Add the CD workflow
   Example 3: Vue Multi-Select
   Step 1: Clone the repository
   Step 2: Learn the project
   Step 3: Manual execution
   Step 4: Add the CI workflow
   Step 5: Add the CD workflow
   Conclusion
   References
8. Working with Tests as a Team
   Introduction
   Structure
   Objective
   Tests in Agile methodology
   Shift left testing approach
   Cypress tests troubleshooting and debugging
   The pause() command
   The debug() command
   The debugger statement
   Flaky tests
   Practical tips
   Conclusion
   References
9. Cypress Driven Development (CDD) Approach
   Introduction
   Structure
   Objective
   The Test-Driven Development (TDD) approach
   Example: A JavaScript function that sums two numbers
   Step 1: Writing a test
   Step 2: Running the test
   Step 3: Writing the code
   Step 4: Running the test
   Step 5: Writing the code
   Step 6: Running the test
   Step 7: Writing the code
   Step 8: Running the test
   TDD: pros and cons
   The Cypress-Driven Development (CDD) approach
   Example: A login form with custom validation
   Step 1: Write a test
   Step 2: Run the test
   Step 3: Add some markup
   Step 4: Run the test
   Step 5: Write a test
   Step 6: Add some markup
   Step 7: Run the test
   Step 8: Write a test
   Step 9: Add some code
   Step 10: Run the test
   CDD: pros and cons
   Conclusion
   References
10. Tests for Product Managers Using Cucumber
    Introduction
    Structure
    Objective
    Why testing is important for the organization?
    Behavior-Driven Development (BDD) use-cases and scenarios
    User journey scenarios
    Backend-related scenarios
    Conclusion
    References
    Index