How To Load a Custom Test Fixture or Setup Projects When Running Playwright Test Code Generator

I'm a big fan of the Playwright Test Generator when I first start writing tests. I find the tool very useful to quickly identify useful locators/selectors, and quickly generate some test code and assertions from recording my manual actions through a website. Though the code isn't perfect, it gives me a good starting place.

Limitations of Running Codegen From CLI

I have found that once I've built a test framework up I will typically include setup files and or fixtures to get the website in a state in which I want to start my tests. This may include logging in, setting certain cookies, creating test data, or even  setting variables that to use in my tests. Running the code generation tool from the command below will open the codegen tool but will not run any of the setup files in my project, and I won't have access to my authentication cookies.

npx playwright codegen

The example project I am using can be found below.

GitHub - playwrightsolutions/playwright-practicesoftwaretesting.com: Example using Playwright against site https://practicesoftwaretesting.com

Example using Playwright against site https://practicesoftwaretesting.com - playwrightsolutions/playwright-practicesoftwaretesting.com

GitHubplaywrightsolutions

A Better Way to Launch Code Generator

The work around to this problem is to create a new empty test within my suite, and add the command await page.pause(). With this method you will have to run the tests in headed mode for things to work properly. An example of a test file can be found below. In this example I've used test.use() to provide my storageState for my admin login. This file was created during my setup project.

// tests/account/accont.spec.ts

import { test, expect } from "@playwright/test";

test.describe("Admin my account specs", () => {
  test.use({ storageState: ".auth/admin.json" });

  test("validate admin dashboard", async ({ page }) => {
    await page.goto("/admin/dashboard");
    await page.pause();
  });
});

When running this, the command I'll use is:

npx playwright test tests/account/account.spec.ts --headed

At this point the setup files will run, and it will run the account.spec file until it hits the await page.pause() command. At this point the test will pause, and you will have access to the Playwright Inspector.

From the Playwright Inspector, you can click Record and as you interact with the page it will create a new record session. This unfortunately creates a new script in the inspector, you can set the type to Test Runner, and then Copy and paste code from the inspector to your original file account/account.spec.ts file after the pause command.

Here is a video example of what this looks like in real time.

I found this Playwright Solutions while in the Playwright Discord. The specific conversation can be found here. This is a great place to meet other Playwright enthusiasts, ask questions, help others with their questions, and learn from others!

Thanks for reading! If you found this helpful, reach out and let me know on LinkedIn or consider buying me a cup of coffee. If you want more content delivered to you in your inbox subscribe below, and be sure to leave a ❤️ to show some love.