HomeCoursesA Front-End Web Developer’s Guide to Testing

Beginner

11h

Updated 3 months ago

A Front-End Web Developer’s Guide to Testing

Gain insights into web automation testing frameworks, explore Selenium, Cypress, Puppeteer, Playwright, and learn to build evolving testing strategies to ensure high-quality front-end development.

Join 2.7 million developers at

Overview

Content

Reviews

Web automation testing frameworks ensure faster and more reliable delivery of high-quality software when integrated into the front-end development workflow. You’ll start with the advanced web technologies and application types to understand common trends and challenges. Next, you’ll learn about the four leading web testing frameworks and how to choose the right framework, whether you’re a developer or a test automation engineer. You’ll also learn the KPIs that measure applications’ quality. Additionally, you’ll learn to build a testing strategy that evolves with the changing objectives and market events. Finally, you’ll learn about the main features of Selenium, Cypress, Puppeteer, and Playwright, with examples of how to use these frameworks and best practices. By the end of the course, you’ll have gained sufficient knowledge of the leading frameworks to help you choose the most suitable framework for your application’s needs and integrate it into your web development workflow.

Web automation testing frameworks ensure faster and more reliable delivery of high-quality software when integrated into the fro...Show More

WHAT YOU'LL LEARN

Ability to ensure web applications’ quality over time with changing features and technologies

Hands-on experience with behavior-driven development and visual and accessibility testing with Selenium

Working knowledge of test retires, stubs, spies, clocks, component testing, API testing, supported plugins, and cloud testing in Cypress

Familiarity with the advanced features of Playwright, such as Inspector, mobile device emulation, test annotations, assertions, network mocking, test reporting, test runners, and trace viewer

Familiarity with the advanced features of Puppeteer, such as accessibility testing, web app tracing, and API testing

Ability to ensure web applications’ quality over time with changing features and technologies

Content

99 Lessons13 Quizzes

Getting Started

1 Lessons

Get familiar with essential testing skills and automation frameworks for front-end web development.

Introduction to the Course

Cross-Browser Testing Methodologies

7 Lessons

Unpack the core of cross-browser testing to ensure web app quality and compatibility.

Introduction to Cross-Browser Testing Methodologies

An Overview of the Web Landscape

Understanding Web Application Types

Testing Types for Web Applications

Understanding Headless and Headed Browsers within App Development

Summary: Cross-Browser Testing Methodologies

Quiz: Cross-Browser Testing Methodologies

Challenges Faced by Front-End Web Application Developers

7 Lessons

Work your way through front-end development challenges in performance, accessibility, and security.

Introduction to Challenges Faced by Front-End Web Developers

Web Application Development Challenges

Coverage Challenges for Web Application Developers

Nonfunctional Challenges in Web Application Development

Compliance Challenges for Web Applications

Summary: Challenges Faced by Front-End Web Application Developers

Quiz: Challenges Faced by Front-End Web Application Developers

Top Web Test Automation Frameworks

10 Lessons

Grasp the fundamentals of top JavaScript test automation frameworks and their capabilities.

Introduction to Top Web Test Automation Frameworks

An Overview of the Web Testing Market

Getting Started with the Selenium WebDriver Framework

Getting Started with the Cypress Framework

Getting Started with the Puppeteer Framework

Getting Started with the Microsoft Playwright Framework

Summary: Top Web Test Automation Frameworks

Quiz: Top Web Test Automation Frameworks

Challenge: Selenium-Supported Element Locators

Solution: Selenium-Supported Element Locators

Automated Testing using Python and Selenium

Project

Premium

Matching Personas and Use Cases to Testing Frameworks

6 Lessons

Evaluate test automation frameworks for web apps based on personas and use cases.

Introduction to Use Cases and Testing Frameworks

Web Testing Personas Overview

Use Cases and Considerations for Picking a Solid Test Automation

Testing Automation Evaluation Matrix

Summary: Matching Personas and Use Cases to Testing Frameworks

Quiz: Matching Personas and Use Cases to Testing Frameworks

Introducing the Leading Front-End Web Development Frameworks

8 Lessons

Investigate key front-end frameworks, their features, advantages, and appropriate testing tools.

Introduction to Front-End Web Development Frameworks

Summary: Leading Front-End Web Development Frameworks

Quiz: Leading Front-End Web Development Frameworks

Map the Pillars of a Dev Testing Strategy for Web Applications

6 Lessons

Practice using testing strategies, quality metrics, and adapting plans for web applications.

Introduction to Testing Strategies for Web Applications

The Key Pillars of a Web Application Testing Plan and Strategy

Measuring the Success of a Continuous Testing Strategy

A Case Study: A Real-Life Web Application Testing Strategy

Summary: Map the Pillars of a Dev Testing Strategy

Quiz: Map the Pillars of a Dev Testing Strategy

Core Capabilities of Top JavaScript Test Automation Frameworks

11 Lessons

Learn how to use JavaScript test frameworks for diverse testing needs and framework selection.

Introduction to Top JavaScript Test Automation Frameworks

Visual Testing

API Testing

Mobile Device Testing

Performance Testing

Accessibility Testing

Network Control Testing and Mock Services

Working with Elements

A Reevaluation of Test Automation Frameworks

Summary: JavaScript Automation Frameworks' Core Capabilities

Quiz: Core Capabilities of Top JavaScript Automation Frameworks

Measuring Test Coverage of a Web Application

5 Lessons

Walk through code and test coverage metrics essential for web application quality.

Introduction to Test Coverage of a Web Application

Code Coverage and Test Coverage

JavaScript Code Coverage Tools for Web Application Developers

Summary: Measuring Test Coverage of a Web Application

Quiz: Measuring Test Coverage of a Web Application

10.

Working with the Selenium Framework

7 Lessons

Examine the Selenium framework's core components, advanced features, testing methods, and future advancements.

Introduction to the Selenium Framework

Understanding the Selenium Framework and Its Components

The Advanced Features of Selenium

Various Testing Methods with Selenium

The Future of the Selenium Framework

Summary: Working with the Selenium Framework

Quiz: Working with the Selenium Framework

11.

Working with the Cypress Framework

7 Lessons

Grasp the fundamentals of Cypress, its advanced features, and future test automation improvements.

Introduction to the Cypress Framework

Getting Started with Cypress

Cypress’s Advanced Test Automation Capabilities

Cypress Proficiency: Studio, Plugins, and API Testing

The Future of the Cypress Framework

Summary: Working with the Cypress Framework

Quiz: Working with the Cypress Framework

12.

Working with the Playwright Framework

8 Lessons

Dig deeper into Playwright for automated testing, advanced features, and implementation strategies.

Introduction to the Playwright Framework

Getting Started with Playwright

Playwright: Advanced Features and Annotations

Playwright Essentials: API Testing & Network Mocking

Playwright’s Reporting, Runners, Viewer, Configuration, and CI

The Future of the Playwright Framework

Summary: Working with the Playwright Framework

Quiz: Working with the Playwright Framework

Automate Login-Workflow Testing with Playwright

Project

Premium

13.

Working with the Puppeteer Framework

6 Lessons

Follow the process of utilizing Puppeteer for automated web testing, advanced capabilities, and future enhancements.

Introduction to the Puppeteer Framework

Getting Started with Puppeteer

Learning about Puppeteer’s Advanced Test Automation Capabilities

The Future of the Puppeteer Framework

Summary: Working with the Puppeteer Framework

Quiz: Working with the Puppeteer Framework

14.

Complementing Code-Based Testing with Low-Code Test Automation

6 Lessons

Build on the integration of low-code testing with traditional methods to enhance coverage.

Introduction to Code-Based Testing

Fundamental Features of Low-Code Testing Tools

Codeless Tool Overview within the Open-Source Landscape

Leading Commercial Codeless Testing Tools for Web Applications

Summary: Complementing Code-Based Testing

Quiz: Complementing Code-Based Testing

15.

Wrapping Up

1 Lessons

Learn how to use comprehensive testing methodologies for high-quality front-end web development.

Conclusion

16.

Appendix

3 Lessons

Look at the installation, upgrade to Selenium 4, and key resources for web testing apps.

Installation of Testing Frameworks

Upgrading Selenium Code to Selenium 4

Additional Resources and Source Code Repositories

Certificate of Completion

Showcase your accomplishment by sharing your certificate of completion.

Course Author:

Packt

Developed by MAANG Engineers

Every Educative lesson is designed by our in-house team of ex-MAANG software engineers and PhD computer science educators, and developed in consultation with developers and data scientists working at Meta, Google, and more. Our mission is to get you hands-on with the necessary skills to stay ahead in a constantly changing industry. No video, no fluff. Just interactive, project-based learning with personalized feedback that adapts to your goals and experience.

Trusted by 2.7 million developers working at companies

"These are high-quality courses. Trust me. I own around 10 and the price is worth it for the content quality. EducativeInc came at the right time in my career. I'm understanding topics better than with any book or online video tutorial I've done. Truly made for developers. Thanks"

Anthony Walker

@_webarchitect_

"Just finished my first full #ML course: Machine learning for Software Engineers from Educative, Inc. ... Highly recommend!"

Evan Dunbar

ML Engineer

"You guys are the gold standard of crash-courses... Narrow enough that it doesn't need years of study or a full blown book to get the gist, but broad enough that an afternoon of Googling doesn't cut it."

Software Developer

Carlos Matias La Borde

"I spend my days and nights on Educative. It is indispensable. It is such a unique and reader-friendly site"

Souvik Kundu

Front-end Developer

"Your courses are simply awesome, the depth they go into and the breadth of coverage is so good that I don't have to refer to 10 different websites looking for interview topics and content."

Vinay Krishnaiah

Software Developer

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Personalized Interview Prep

Skip the LeetCode grind with a custom roadmap that adapts to your goals. Hands-on practice for Coding Interviews, System Design, and more.

Mock Interviews

Test your skills in a simulated interview setting. Receive personalized feedback based on your performance. Available for Coding Interviews, System Design, and more.

AI Prompt

Build prompt engineering skills. Practice implementing AI-informed solutions.

Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

Course

Front-end Testing 101: Integration and End-to-end Testing

Delve into front-end testing principles, learn best practices for writing enduring tests, and discover strategies for E2E testing and integration into CI pipelines. Gain actionable testing insights.

3 h 30 m

intermediate

Course

Frontend End-to-End Testing with Cypress

Gain insights into Cypress, a fast, reliable testing tool. Discover its basics, create robust test cases, and enhance front-end quality with advanced concepts and accessibility integration.

2 h 10 m

beginner

Course

Performance Test Automation 101: Gatling, Lighthouse, & Jenkins

Gain insights into Gatling fundamentals, delve into advanced scripting, simulate network conditions with puppeteer and lighthouse, and set up Jenkins CI for scalable performance testing automation.

9 h

intermediate

Course

The Road to React: The One with Hooks

Gain insights into React fundamentals and Hooks. Delve into styling, app maintenance, and performance optimization. Discover hands-on experience by building a Hacker News app for your portfolio.

25 h

beginner

Course

Jump Start with Vue 3

Gain insights into Vue 3’s enhanced reactivity and Composition API. Explore fundamental concepts, components, routing, and TypeScript integration to craft scalable, maintainable web applications.

16 h

beginner

Course

Building Safer JavaScript Applications

Explore JavaScript web application security to mitigate vulnerabilities, handle user input, securely store and transmit data, and understand HTTP and API security. Gain insights for interviews and practice assessments.

5 h

beginner

Course

Front-end Testing 101: Integration and End-to-end Testing

intermediate

3 hour 30 min

Course

Frontend End-to-End Testing with Cypress

beginner

2 hour 10 min

Course

Performance Test Automation 101: Gatling, Lighthouse, & Jenkins