Exercise 3.1: Generate a Login Fixture

Overall

Learn how to use Claude Code to create a reusable login fixture that establishes an authenticated session for all your tests. You'll see how fixtures eliminate repetitive login code and handle timing constraints with TOTP-based authentication.

Download Exercise Files

📦 Download Exercise 3 Starter Files

Extract the ZIP file to get started with this exercise.

Project Structure

3-create-login-fixture/
├── package.json
├── playwright.config.ts
├── tsconfig.json
├── LOGIN_FLOW.md
└── tests/
    └── example.spec.ts

Steps

Step 1: Open the Exercise Folder

Open the exercise folder in your preferred IDE (VSCode, IntelliJ, or any other):

---

Step 2: Add Playwright MCP (if not already installed)

Command:

claude mcp add playwright npx -- @playwright/mcp@latest

---

Step 3: Launch Claude Code

Command:

claude

Now verify the MCP connection:

Command to verify MCP:

/mcp

---

Step 4: Ask Claude Code to Generate the Login Fixture

Use natural language to instruct Claude Code to create a login fixture based on the documented login flow.

Prompt:

@LOGIN_FLOW.md Based on the login flow, generate a login fixture that establishes a logged-in environment for subsequent tests.

Login credentials:
url: https://sso.uat.bgl360.com.au/?app=smartdocs&&appFilter=smartdocs
username: [YOUR USERNAME FROM WORKSHOP USERS PAGE]
password: [YOUR PASSWORD FROM WORKSHOP USERS PAGE]
totpKey: [YOUR TOTP KEY FROM WORKSHOP USERS PAGE]

Requirements:
1. Do not save the login session to a file. Perform the login every time it runs.
2. TOTP code can only be used once every 30s. Record the beforeEach start time and in afterEach wait so each test lasts at least 30s.
3. Implement a single test to verify the logged-in page URL contains "/host/#/", and run it using one browser and one worker.

What does "@" do?

The at symbol @ is used to reference files or folders in your prompts, allowing Claude Code to read and understand their content. For example, @LOGIN_FLOW.md tells Claude to read the LOGIN_FLOW.md file and use that information when generating code. This ensures Claude has the exact context it needs. See the Claude Code Context References guide for more ways to provide context.

What to Expect:

• Claude Code will read and analyze the LOGIN_FLOW.md documentation
• Generate a fixture file with reusable login logic
• Create a test file that uses the fixture

What to Observe:

• Fixture File Creation: A new fixture file (e.g., tests/fixtures/auth.fixture.ts) containing the login setup code
• Test File Updates: A test file that imports and uses the loggedInPage fixture
• Timing Logic: beforeEach and afterEach hooks that ensure tests run for at least 30 seconds
• TOTP Handling: Automatic generation and input of time-based authentication codes

Why This Matters:

• Eliminates Repetition: Write login logic once, reuse in all tests
• Handles Complexity: TOTP timing constraints managed automatically in one place
• Ensures Reliability: Single worker prevents TOTP code conflicts between parallel tests
• Maintainability: When login flow changes, update only the fixture file

---

Step 5: Run the Test in UI Mode

Once Claude Code completes the fixture generation, run the test in UI mode to observe the login process:

Run in a New Terminal

Important: Open a new terminal window to run this command. Do NOT run it in your Claude Code conversation, as it will launch an interactive UI that keeps the terminal busy.

Command:

npm run test:ui

What to Observe:

• Login Automation: Browser opens and automatically navigates through the login flow
• TOTP Generation: Authentication code is generated and entered automatically
• Verification: Test confirms the logged-in URL contains "/host/#/"
• Timing Control: Test waits to ensure 30-second minimum duration (if needed)
• Success Indicator: Green checkmark when test passes

---

Step 6: Enable Multiple Browsers (Optional)

If you want to test across different browsers, install additional browser engines and update the configuration:

Install Browser Engines:

npx playwright install chromium firefox webkit

Update Configuration: Ask Claude Code to enable multiple browsers:

Update playwright.config.ts to run tests on all installed browsers (chromium, firefox, webkit) while keeping workers=1 to avoid TOTP conflicts.

Run Tests Across Browsers:

npm run test

View Test Report:

npx playwright show-report

What to Observe:

• Sequential Execution: Tests run one browser at a time (due to workers=1)
• Cross-Browser Compatibility: Login works identically across browsers
• TOTP Timing Respected: 30-second minimum ensures no TOTP conflicts even across browsers

---

Expected Outcome

You should have:

• A working login fixture that handles authentication automatically
• A test that verifies successful login
• Understanding of TOTP timing constraints and how to handle them
• A reusable foundation for creating additional tests

In the next workshop, you'll use this login fixture across multiple test scenarios, demonstrating how fixtures enable rapid test creation without repeating setup code.