Setup & Re-Use Authentication with Playwright Dependencies!

• 01:59 Setup Conversion in Global Setup File
• 03:38 Modifying the Playwright Config File
• 06:06 Running Tests After Converting Global Setup
• 08:30 UI Watch Mode with Dependency Setups

In this video, Jared from Commit Quality demonstrates how to convert an old Global Setter into a test using Playwright's dependency functionality. This functionality was added in version 1.31, so make sure your Playwright test version is at least 1.31 or higher before proceeding.

A GitHub repository is available to clone, providing the same setup as shown in the video. The project's setup includes a simple test navigating to the Commit Quality demo website, a global setup for logging in and storing state in a JSON file, and a Playwright config file.

To convert the Global setup to the new dependency functionality, follow these steps:

1. In the Global setup file, create a new test named login and pass the page fixture.
2. Remove unnecessary code related to creating a browser and cleaning up from the Global setup file, since the page fixture takes care of that functionality.
3. Modify the Playwright config file: a) Remove or comment the globalSetup attribute. b) Move the storageState attribute from the top-level use statement to the specific project (in this case, Chromium). c) Add a new project named setup with a testMatch pointing to the Global setup.ts file. d) Add the dependencies attribute/functionality to the Chromium project.

After these changes, running the test should execute the setup code, followed by the actual test. This method allows for a cleaner code organization and easier debugging with trace files generated for both the setup and test files.

Once you've updated to version 1.32, you can use the new UI watch mode feature to view your dependency setups and tests in the Playwright Test UI tool. This offers a convenient way to run tests and debug them.

As always, feel free to ask any questions or share feedback in the comments section, and don't forget to like and subscribe!