SitePoint
Blog
Forum
Library
Login
Join Premium
Toggle sidebar
A Frontend Web Developer's Guide to Testing
Toggle community discussions
Close
Content
Files
Bookmarks
Preface
A Frontend Web Developer's Guide to Testing
Contributors
About the author
About the reviewer
Foreword
Who this book is for
What this book covers
To get the most out of this book
Download the example code files
Download the color images
Conventions used
Get in touch
Share Your Thoughts
1
Cross-Browser Testing Methodologies
Part 1 – Frontend Web Testing Overview
An overview of the web landscape
Understanding web application types
Traditional web applications
Responsive web applications
PWAs
Testing types for web applications
Functional testing of web applications
The non-functional testing of web applications
Understanding headless and headed browsers within app development and testing
Choosing between headed browsers and headless browsers
Headless browser testing frameworks
Summary
Challenges Faced by Frontend Web Application Developers
Web application development challenges
Quality vs velocity
Coverage challenges for web application developers
Non-functional challenges in web application development
Performance challenges
Accessibility challenges
Compliance challenges for web applications
Summary
Top Web Test Automation Frameworks
An overview of the web testing market
Getting started with the Selenium WebDriver framework
Setting up Selenium WebDriver
Selenium Grid
Getting started with the Cypress framework
Important features of Cypress
Getting started with the Google Puppeteer framework
Getting started with the Microsoft Playwright framework
Summary
Matching Personas and Use Cases to Testing Frameworks
Technical requirements
Web testing personas overview
Use cases and considerations for picking a solid test automation framework
Community considerations
Scale testing capabilities
Tool stack integrations and plugins
Ease of use and adoption
Reusability and maintainability
Reporting, test analysis, and intelligence
Testing automation evaluation matrix
Summary
Introducing the Leading Frontend Web Development Frameworks
Technical requirements
Introduction to the leading web development frameworks
Guidelines for picking a web development framework
ReactJS
AngularJS
Vue.js
Ember.js
Svelte
Summary
Map the Pillars of a Dev Testing Strategy for Web Applications
Part 2 – Continuous Testing Strategy for Web Application Developers
The key pillars of a web application testing plan and strategy
Know your target users
Building a test plan
Prep your tool stack and environments
Set quality criteria and objectives
Build a timeline and a schedule
Execute, monitor, measure, and document
Measuring the success of your continuous testing strategy
A case study – a real-life web application testing strategy
Summary
Core Capabilities of the Leading JavaScript Test Automation Frameworks
Comparing the test automation framework capabilities
Visual testing
API testing
Supported development languages
Mobile device testing
Performance testing
Accessibility testing
Network control testing and mock services
Working with elements
A re-evaluation of test automation frameworks due to compelling events
Summary
Measuring Test Coverage of the Web Application
Introduction to code coverage and test coverage
Test coverage
Code coverage
JavaScript code coverage tools for web application developers
Measuring JavaScript code coverage using Istanbul and Cypress
Complementing code coverage with test coverage
Summary
Working with the Selenium Framework
Part 3 – Frontend JavaScript Web Test Automation Framework Guides
Technical requirements
Understanding the Selenium framework and its components
Selenium WebDriver
The advanced features of Selenium
Various testing methods with Selenium
The future of the Selenium framework
Summary
Working with the Cypress Framework
Technical requirements
Getting started with Cypress
The Cypress GUI
Cypress IDE and command-line executions
Cypress's advanced test automation capabilities
Cypress test retries
Using stubs, spies, and clocks with Cypress
Running Cypress within CI
Component testing
Cypress Studio
Cypress plugins
Cypress API testing
The future of the Cypress framework
Summary
Working with the Playwright Framework
Technical requirements
Getting started with Playwright
Playwright's advanced test automation capabilities
Playwright Inspector
Emulating mobile devices
Playwright test annotations
Playwright API testing
Playwright assertions
Playwright network mocking
Playwright POM (Page Object Model)
Playwright test reporting
Playwright test runners
Playwright trace viewer
Playwright advanced configurations
Playwright integration with CI
The future of the Playwright framework
Summary
Working with the Puppeteer Framework
Technical requirements
Getting started with Puppeteer
Learning about Puppeteer's advanced test automation capabilities
Puppeteer namespaces
Puppeteer working with elements
Puppeteer load test option
Puppeteer and Cucumber BDD
Puppeteer accessibility testing
Puppeteer web app tracing
Puppeteer for API testing
Puppeteer with Google DevTools
Puppeteer and CodeceptJS integration
Puppeteer testing within CI
The future of the Puppeteer framework
Summary
Complementing Code-Based Testing with Low-Code Test Automation
Fundamental features of low-code/codeless testing tools
Codeless tool overview within the open source landscape
Open source codeless tool lineup
Leading commercial codeless testing tools for web applications
Perfecto scriptless web overview
Testim codeless web tool overview
Mabl codeless web testing tool overview
Summary
Wrapping Up
Major takeaways from the book
Useful references and bookmarks
Cypress framework-specific
Playwright framework-specific
Selenium framework-specific
Puppeteer framework-specific
Open text modal
Community Questions
Close