top of page

Angular Automated Testing: Playwright and Typescript

Duration

Course Code

2 Days

IV-DC-002

About the Course

Playwright - test automation framework developed by Microsoft. Modern, highly customizable and reliable. This class covers all fundamental concepts of the framework. We begin from scratch, starting with setup and configuration and then a hands-on framework overview to familiarize yourself with the environment. Then from lesson to lesson, we slowly increase complexity. All lessons have a logical progression and are connected. The next lesson in the section builds up a new concept on top of what was learned in the previous lesson. This is also related to the code demonstrated in the class. We will have two test applications, and slowly over the course will add more and more code uncovering new

topics.


What you will learn

  1. How to install Playwright from scratch as a new independent project or add to an existing front-end application project.

  2. JavaScript Fundamentals in case you are a beginner to programming.

  3. How to run tests using the command line interface, UI mode, Playwright extension, and debug tests.

  4. How to organize tests, structure tests, use test hooks.

  5. HTML terminology, locator syntax rules, and Playwright best practices to locate web elements.

  6. Different types of assertions, how auto-waiting concept works, and how to configure different timeouts.

  7. How to work with different UI components, such as input fields, radio buttons, checkboxes, lists, tooltips, dialog boxes, date pickers, web tables, iFrames, sliders, drag and drop.

  8. What is the Page Object Model. How to organize test framework code with Page Objects. Recommended architecture for Page Object model with Playwright.

  9. How to work with APIs: API mocking, API requests, intercept API calls, shared storage state, API authentication.

  10. Multiple advanced topics: fixtures, global setup and teardown, parallel execution, test tags, test retries, visual testing, mobile device emulation, reporters, environment variables, and test execution in Docker container.


Prerequisites

  • Basic Typescript knowledge is required. Typescript Fundamentals section is included in the class.

  • HTML and CSS.


Target Audience

  • Quality Engineers who willing to pick up a first test automation framework.

  • SDETs and Automation Engineers who is transitioning from other frameworks to the Playwright.

  • Developers who what quickly understand Playwright best practices and framework capabilities.

  • Playwright beginners to learn this tool faster.


Course Outline


Introduction to Playwright

  1. Quick introduction to the class, what will be covered in, and how to work with this class.

  2. Comparison of the main features of Playwright and Cypress frameworks.

  3. Configuration of development environment, installation of needed components to follow the class:

    1. VS Code installation configuration.

    2. Git Installation.

    3. Node.js installation.


Typescript Fundamentals

  1. Overview.

  2. Environment setup.

  3. Static typing.

  4. Common basic Types.

  5. Custom data types.

  6. Functions.

  7. Typescript OOP:

    1. Classes.

    2. Access modifiers.

    3. Interfaces.

    4. Generics.

    5. Modules.


Writing your First Playwright

  1. Playwright installation.

  2. Using CLI.

  3. Using User interface.

  4. Trace view and debug.

  5. Tests structure.

  6. Hooks and control flow.


Interaction with Web Elements

  1. Document Object Model.

  2. Locator syntax rules.

  3. User-facing locators.

  4. Child elements.

  5. Parent elements.

  6. Reusing locators.

  7. Extracting values.

  8. Assertions.

  9. Auto-waiting.

  10. Timeouts .


Automating with UI components

  1. Input fields.

  2. Radio buttons.

  3. Checkboxes.

  4. List and dropdowns.

  5. Tooltips.

  6. Dialog boxes.

  7. Tables.

  8. Datepicker.

  9. Sliders.

  10. Drag and drop with iFrames.


Organizing with Page Object Model

  1. What is POM?

  2. Navigation page object.

  3. Locators in page object.

  4. Parameterized modules.

  5. Date picker page object.

  6. Page object manager.

  7. Page object helper base.


Automating API testing

  1. What is API and setting up API?

  2. Mocking API.

  3. Modify API response.

  4. Perform API request.

  5. Intercept Browser API response.

  6. Sharing authentication state.

  7. API authentication.


Advance Concepts

  1. a. NPM and CLI commands.

  2. b. Test data generation.

  3. Test retries.

  4. Parallel execution.

  5. Screenshots and videos.

  6. Environment variables.

  7. Configuration file.

  8. Fixtures.

  9. Project setup and teardown.

  10. Global setup and teardown.

  11. Test tags.

  12. Mobile device emulator.

  13. Reporting.

  14. Integration with Docker and container.

  15. Integration with GitHub Actions for CI/CD.

bottom of page