Exercise 2.1: Login to SmartDocs 360

Overall

Learn how to use Playwright MCP tools with Claude Code to automate and document a login flow. You'll see how Claude can explore a web application, interact with login forms including two-factor authentication (TOTP), and create comprehensive documentation of the process.

Download Exercise Files

📦 Download Exercise 2 Starter Files

Extract the ZIP file to get started with this exercise.

Project Structure

2-explore-sd360-login/
├── package.json
├── playwright.config.ts
├── tsconfig.json
└── 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

Open the terminal within the IDE. Install the Playwright MCP (Model Context Protocol) tool to enable Claude Code to control web browsers:

Command:

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

What to Expect:

• The Playwright MCP package will be registered with Claude Code
• Installation confirmation message will appear
• The MCP tool configuration will be saved for future use

Why This Matters: MCP tools must be installed before using Claude Code with browser automation. They extend Claude's capabilities beyond just writing code - with Playwright MCP, Claude can actually open browsers, interact with web pages, take screenshots, and observe application behavior. This is a one-time setup that persists across Claude Code sessions.

---

Step 3: Launch Claude and Verify MCP Connection

Start Claude Code:

Command to start Claude:

claude

Now verify the MCP connection:

Command to verify MCP:

/mcp

What does "/" do?

The forward slash / is used to invoke Claude Code slash commands - special built-in commands that provide quick access to specific features. For example, /mcp checks MCP tool connections, while /help shows available commands. See the Claude Code Commands Reference for a complete list of useful slash commands.

What to Expect:

• A list of connected MCP tools will be displayed
• Playwright MCP should appear in the list
• Connection status should show as active/ready

What to Observe:

• Confirmation that Playwright MCP is available
• Tool status showing it's properly connected
• Any other MCP tools that might be installed

Why This Matters: Verifying the MCP connection ensures that Claude Code has the necessary capabilities to control browsers. If Playwright MCP is not connected, the browser automation commands in the next step will not work. The /mcp command is a quick way to troubleshoot if something isn't working as expected.

---

Step 4: Ask Claude Code to Explore and Document the Login Flow

Use natural language to instruct Claude Code to explore the SmartDocs 360 login interface and document the flow.

Select Your User Account

Each workshop participant should pick a unique user account from the Workshop Users page. Please coordinate with other participants to avoid using the same account.

Prompt:

Explore the Login interface using the provided credentials, and document the login flow.
url: https://sso.uat.bgl360.com.au/?app=smartdocs&&appFilter=smartdocs
username: [SELECT FROM WORKSHOP USERS PAGE]
password: [SELECT FROM WORKSHOP USERS PAGE]
totpKey: [SELECT FROM WORKSHOP USERS PAGE]

What to Expect:

• Claude Code will open a browser window using Playwright
• The login page will load automatically
• Claude will interact with the page step-by-step
• A documentation file will be created describing the login flow

What to Observe:

• Browser Opens: A browser window launches showing the SmartDocs 360 login page
• Data Entry: The username and password fields are automatically filled in
• Screenshot Analysis: Claude takes screenshots to understand the page structure and next steps
• TOTP Generation: Claude generates a Time-based One-Time Password (TOTP) using the provided totpKey
• Navigation: The browser navigates through the login process
• Documentation: Claude creates a comprehensive login flow document (e.g., LOGIN_FLOW.md)

Why This Matters: This demonstrates Claude Code's ability to not just write test code, but to actively explore an application like a QA engineer would.

---

Step 5: Review and Update Login Flow (Optional)

Examine the documentation that Claude Code created:

What to Expect:

• A markdown file (likely named LOGIN_FLOW.md) in your project directory
• Detailed step-by-step description of the login process
• Information about form fields, buttons, and authentication steps
• Notes about TOTP requirements and timing

What to Observe:

• Clear documentation of each login step
• Element selectors (IDs, classes, or roles) identified during exploration
• Authentication flow including two-factor authentication
• Any edge cases or special considerations noted

Why This Matters: Having accurate documentation of the login flow is essential for:

• Creating reliable automated tests
• Understanding application behavior for test planning
• Communicating requirements to team members (BA, PM, developers)
• Serving as a reference when the login process changes

You can ask Claude Code to update or refine the documentation if needed.

---

Expected Outcome

You should see:

• A browser successfully completing the login process
• Documented login flow in a markdown file
• Understanding of how MCP tools enable interactive exploration
• A foundation for creating login fixtures and automated tests