🎨 Building Playwright Framework Step By Step - Create User Snippets

🎯 Introduction

User snippets frequently go unnoticed in conversations about Automation Testing, yet I believe they represent a secret weapon in an automation tester's arsenal! 🔥

💡 What are User Snippets?: Custom code templates in VS Code or Windsurf that boost productivity and maintain consistency across your codebase

User snippets are a powerful tool for developers aiming to:

• ⚡ Boost productivity - Reduce repetitive typing

• 🎯 Maintain consistency - Ensure alignment with coding standards

• 📈 Enhance code quality - Follow best practices automatically

• 🚀 Save time - Insert complex code templates instantly

By defining your own snippets, you can ensure they align with your project's or team's coding standards and best practices, thus enhancing code quality and readability.

✅ Prerequisites

This article builds directly on the concepts from our first one. To get the most out of it, you should have:

• Initialized Playwright Framework

🛠️ How to Create User Snippets

Step 1: Access Snippets Configuration

📝 Note: Instructions work for both VS Code and Windsurf

1. Open Command Palette: Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac)

2. Search for: Preferences: Configure User Snippets

3. Select: New Global Snippets file...

4. Name your file: playwright-snippets.json

Step 2: Understanding Snippet Structure

Every snippet follows this JSON structure:

{
  "Snippet Name": {
    "scope": "typescript",
    "prefix": "trigger-word",
    "body": [
      "line 1 of code",
      "line 2 of code",
      "$1 // cursor position"
    ],
    "description": "What this snippet does"
  }
}

🔍 Key Components:

• scope: Language where snippet works (typescript, javascript, etc.)

• prefix: What you type to trigger the snippet

• body: The actual code template (array of strings)

• description: Helpful description for the snippet

🎯 Essential Playwright Snippets

{
    "Print to Console": {
        "scope": "javascript,typescript",
        "prefix": "cl",
        "body": [
            "console.log(${1});",
        ],
        "description": "Log output to the console"
    },
    "Playwright Describe": {
        "scope": "javascript,typescript",
        "prefix": "pwd",
        "body": [
            "test.describe('${1}', () => {${2}});",
        ],
        "description": "Generate a Playwright describe function"
    },
    "Playwright Test": {
        "scope": "javascript,typescript",
        "prefix": "pwt",
        "body": [
            "test('${1}',{tag:'@${2}'}, async ({ ${3} }) => {${4}});",
        ],
        "description": "Generate a Playwright test function"
    },
    "Playwright Test Step": {
        "scope": "javascript,typescript",
        "prefix": "pwts",
        "body": [
            "await test.step('${1}', async () => {${2}});",
        ],
        "description": "Generate a Playwright test step function"
    },
    "Expect toBeVisible": {
        "scope": "javascript,typescript",
        "prefix": "exv",
        "body": [
            "await expect(${1}).toBeVisible();",
        ],
        "description": "Generate expect locator to be visible code"
    },
    "Expect toEqual": {
        "scope": "javascript,typescript",
        "prefix": "exe",
        "body": [
            "await expect(${1}).toEqual(${2});",
        ],
        "description": "Generate expect recieved value to be equal to predefined value"
    },
    "Expect toHaveText": {
        "scope": "javascript,typescript",
        "prefix": "ext",
        "body": [
            "await expect(${1}).toHaveText(${2});",
        ],
        "description": "Generate expect locator to have predefined text"
    },
    "API Request": {
        "scope": "javascript,typescript",
        "prefix": "req",
        "body": [
            "const { status, body } = await apiRequest<${1}>({method:'${2}',url: '${3}', baseUrl: ${4}, body: ${5}, headers: ${6}}); expect(status).toBe(${7});",
        ],
        "description": "Generate API request"
    },
    "API Route": {
        "scope": "javascript,typescript",
        "prefix": "rou",
        "body": [
            "await page.route(`${1}`, async (route) => {await route.fulfill({status: 200, contentType: 'application/json',body: JSON.stringify(${2})});});"],
        "description": "Generate API route"
    },
    "Environment Variable": {
        "scope": "javascript,typescript",
        "prefix": "pr",
        "body": [
            "process.env.${1}",
        ],
        "description": "Generate environment variable"
    },
    "Intercept API Response":{
        "scope": "javascript,typescript",
        "prefix": "int",
        "body": [
            "const interceptedResponse = await page.waitForResponse(`${${1}}${2}`); const interceptedResponseBody = await interceptedResponse.json(); const ${3} = interceptedResponseBody.${4};",
        ],
        "description": "Intercept API response"
    },
    "Class for Page Object Model":{
        "scope": "javascript,typescript",
        "prefix": "pom",
        "body": [
            "import { Page, Locator, expect } from '@playwright/test';",
            "/**",
            " * This is the page object for the Home Page.",
            " * @export",
            " * @class ${1}",
            " * @typedef {${1}}",
            " */",
            "export class ${1}{",
            "    constructor(private page: Page) {}",
            "",
            "    get ${2} (): Locator {return ${3}};",
            "}",
        ],
        "description": "Class for Page Object Model"
    },
    "Getter for Class": {
        "scope": "javascript,typescript",
        "prefix": "ge",
        "body": [
            "get ${1}(): Locator {return this.page.${2};}",
        ],
        "description": "get locator"
    }
}

💡 Pro Tips for Effective Snippets

⚡ Productivity Boosters:

🎯 Use Descriptive Prefixes - Find these, which work best for you

• pwt for Playwright tests

• req for API request

• exv Assertion to be visible

📍 Strategic Cursor Placement

Use ${1}, ${2}, ${3} etc. to define tab stops where you'll input specific values:

"body": [
  "test('${1}',{tag:'@${2}'}, async ({ ${3} }) => {${4}});"
  "});"
]

🔄 Include Common Patterns

Create snippets for:

• 🎭 Boilerplate code (describe, test and test step blocks)

• ✅ Assertions (expect)

• 🔍 API Request/Intercept

🎯 What's Next?

In the next article we will dive into Environment Variables - managing configuration like a pro!

💬 Community: Please feel free to initiate discussions on this topic, as every contribution has the potential to drive further refinement.

✨ Ready to supercharge your testing skills? Let's continue this journey together!

🙏🏻 Thank you for reading! Building robust, scalable automation frameworks is a journey best taken together. If you found this article helpful, consider joining a growing community of QA professionals 🚀 who are passionate about mastering modern testing.

Join the community and get the latest articles and tips by signing up for the newsletter.