Professional Angular Testing: Playwright Edition

Quality assurance with modern tools: Playwright, Jest, and Storybook
Training for long-term quality assurance of Angular solutions
2 days
Next event
Basic knowledge of Angular required
English / German
Price from

Rainer Hahnekamp

Experienced developer and software architect for enterprise applications.
Runs Ng-News, a weekly Angular video newsletter.

Playwright, Jest, and Storybook – The perfect combination for long-term quality

This workshop covers all aspects of testing in Angular. Learn the various techniques and when and how to apply them. The major ingredients are the hands-on exercises and discussions where we can talk about your individual challenges.

After this 3-day workshop, you will be able to

  1. understand and know when to apply Unit, Component and End-to-End Tests
  2. Write tests for code that heavily depends on asynchrony
  3. interact with the DOM rendered by one or multiple components
  4. significantly reduce your testing boilerplate by using modern tools
  5. Verify the layout of your components by using screenshot-matching
  6. know various ways to work with a Test Seeded database in E2E Tests
  7. prevent flaky E2E Tests
  8. build an architecture that is well-suited for tests
  9. and much more…

🔥 Bonus: Latest Angular features

  • 🚥 Testing and Signals
  • Testing and standalone components
  • Testing and Standalone APIs


✅ Completely online – no travel required!
✅ Interactive: Ask questions and participate in discussions
✅ Many exercises and live coding
✅ Case study serves as a blueprint for your own projects
✅ Pair programming with your trainer


Part 1: End-to-End Tests with Playwright


  • Technological Approach: CDP vs. Webdriver
  • Inside-Browser vs. Outside-Browser Testing
  • Playwright compared to Webdriver and Cypress
  • Installation & Setup
  • Boosting Execution with Parallelisation
  • Code Generator for a Quick Start
  • Debugging Capabilities in VSCode
  • Improve your Productivity with the UI Mode
  • Analyse and find Bugs with the Trace Viewer
  • Basic Selecting with page.locator
  • Different Selector Engines
  • Chained, Nested and Relative Selecting
  • data-testid vs. a11y-based Selectors
  • Actions
  • Verify with Web Assertions


  • Miscellaneous: test steps, soft assertions, sequential mode
  • Clean Code with Page Objects
  • Playwrights “Dependency Injection”: Test Fixtures
  • Controlling the Network with page.route, page.on(‘request’), and request
  • Sharing localStorage and Cookies with Session Storage
  • Global Setup and TearDown with Project Dependencies

Unit Tests for Angular

  • Jasmine vs. Jest
  • Setup of Jest
  • Asynchrony
  • fakeAsync vs waitForAsync
  • Mocking: jest.fn, jest.mock, jest.spyOn
  • Testing with inject()


  • RxJS Marbles for pipe operators
  • Testing NgRx


  • TestBed and Dependency Injection
  • Differences Standalone and NgModule-based Tests
  • Mocking Components/Pipes/Directives with ng-mocks
  • Pro/Contra HttpTestingController
  • RouterTestingHarness

Component Tests

  • Mounting Components
  • Wrapper Components
  • Setting @Input Properties
  • Access to Angular’s DI

“Fallback” Technologies

  • Angular Harnesses
  • Spectator
  • Testing Library
  • Two Schools of Thought: London & Detroit
  • Test Strategies: When should I use what test type?
  • TDD in Frontend?
  • Testing Trophy vs. Testing Pyramid
  • Testable Architecture
  • Screenshottests with Playwright
  • Storybook
  • Visual Regression & CI

Upcoming events

All of our seminars are always available remotely or in-house. Contact us to make an appointment
11.12. - 13.12. | 14:00 - 18:30 (CET)
Very Early Bird until 15.10.2023
Group Discount (3+ People)
US Friendly Time Model:
8am to 12:30pm
Remote |
 |  Rainer Hahnekamp
from 930€

Individual In-House Company Workshops

All of our workshops are also available remotely or in-house at any time.
Contact us for an appointment

Inquire now

FAQs on our workshops

How do your workshops and courses work?

Our seminars around Angular are a mixture of lecture, live coding and actual exercises. Together we implement what we have learned during the workshop directly on a example project. This mixture guarantees that the course never gets boring and “hands-on” is required instead of gray theory.

Our Angular hands-on workshop is aimed at anyone who wants to develop applications with Angular in the future or is already doing so and now wants to better understand the background, context and building blocks of the framework.

Participants should have basic knowledge of web development (basic knowledge of HTML and JavaScript).

For advanced Angular developers we offer advanced seminars and intensive trainings on specific use cases.

Our trainings take place as public workshops in seminar rooms at central hotels in Germany, Austria and Switzerland. In-House company workshops take place at your office or conference room.

All courses are also available as remote workshops, where we meet online in a virtual classroom and do the training via video calls, screen sharing and live coding.

Our workshops are held by experienced trainers and software architects. In recent years, we have provided Angular training to well-known companies – including well-known banks, insurance companies, industrial groups. Trainers include well-known conference speakers, authors of books and professional articles, bloggers, Google Developer Experts and university lecturers.

Especially for dedicated company trainings, we are happy to accommodate you. Typical times are 9:00AM to 4:30PM / 5:00PM. Some of our English-language workshops are timed so that you can also attend at US friendly times.

Absolutely. In fact, since the pandemic, this has been our main business model and we have had very good experience with it. We use a combination of screen sharing, interactive online whiteboards, and are happy to connect to your computer for support during the exercises if you wish. As with our on-site training, we use a combination of short presentations, discussions, live coding and hands-on labs.

Since there is no travel involved, you also save time and money. We can also respond more flexibly to your scheduling needs.

Yes, very much so. In fact, that’s one of the benefits of dedicated corporate training. You are welcome to weight, shorten or add to our agenda proposals. As a rule, we also coordinate with your trainer about 2 weeks before the training. If you wish, we can also arrange it earlier.

Among other things, Angular’s wide distribution speaks for itself, but also the fact that Google, an Internet giant that also uses the framework very intensively, is behind it. Google alone has over 2600 solutions based on it. Due to the wide distribution, there is a large community and thus a lot of know-how on the market as well as (free and commercial) products that are adapted to Angular. In addition, Angular provides much of what you need for large applications out of the box: test automation, form management, routing, etc. In this respect, you get a stack whose components are coordinated and work together in the long term.

The good news up front is that participants with different levels of prior knowledge are the rule, not the exception, in adult education. That’s why you’ll find optional fade-in hints and bonus exercises on our exercise sheets, for those who are a little faster. Of course, we also provide personal support for the exercises.

If you book a company training with us, we leave this decision to you in principle. However, experience shows that there should not be more than 15 participants, especially since a seminar lives very much from questions, discussions and practical exercises.

Please install the following software packages on your computer:

– NodeJS in current version (we test with current LTS version).
– Angular CLI (npm i -g @angular/cli)
– Git
– Visual Studio (free) or WebStorm/IntelliJ (commercial)


Never miss anything - subscribe to our newsletter now!
Please enable JavaScript in your browser to complete this form.