Playwright Authentication: Storage State, Setup Project, Roles | Playwright with TypeScript #08

Code & Test Automation |    / @codetestautomation   Learn how to sign in once and reuse the session across your Playwright tests with TypeScript. We give our practice app real accounts with a signed session cookie, watch an unauthenticated test get redirected, then save the browser's cookies and localStorage with storageState and load them with test.use. Next we build the setup project pattern: an auth.setup.ts file, a setup project, and a chromium project that depends on it, and we show with four workers that the login runs once per test run, not once per worker. Then we create user, admin and guest states, test what each role may see, and run a multi-user flow with two browser contexts in one test. Finally we cover 2FA and SSO, replace the form login with a test-only login endpoint called through the request fixture, prove that endpoint is off unless the test runner enables it, and look at what storage state does not save. Every file and run shown was run for real. Video 8 of 10 in Playwright with TypeScript, for fresher and experienced engineers: installation, writing tests, locators, auto-waiting and assertions, configuration, the Page Object Model, debugging, authentication, network mocking and API testing, and CI with sharding. CHAPTERS 0:00 Introduction 1:14 Saving Storage State 6:24 The Setup Project 10:44 Roles and Multiple Users 14:17 2FA, SSO and Test Logins 18:55 Recap 20:11 Subscribe HOW THE DEMOS WERE MADE Every command, test run and terminal output in this video was run for real (Node v24.22.2, @playwright/test 1.64.1, Chromium 156.0.8078.4 (build 1248), Firefox 157.0 (build 1555), WebKit 27.2 (build 2370); Debian 13 Linux) in throwaway Playwright + TypeScript projects created for this video, against playwright.dev and a small practice app served locally. Durations in the test output are whatever that run took. TYPED ONLY: the PowerShell form of setting TEST_LOGIN is shown typed. Real SSO, 2FA providers and production systems are discussed but not automated here. Any screen marked ILLUSTRATION is a simplified mockup, not a screenshot. PRACTICE Add a login setup project to your config, make your browser projects depend on it with storageState, and confirm your tests start already signed in. Then add a second role and a guest test. Practice tip: pause at each code and terminal scene, type the test yourself in your own Playwright project, run it, and compare your output with what you see on screen. Next video: #09 Network Mocking, API Testing, and Advanced Interactions. #Playwright #TypeScript #TestAutomation #CodeAndTestAutomation Subscribe to Code & Test Automation for more Playwright, coding and test automation tutorials:    / @codetestautomation