playwright_test_framework

🥈Silver

Automated end-to-end testing framework built with Playwright and Java, tailored for any website. Designed for scalability and maintainability, this framework covers critical test scenarios with strong assertions and clean, modular code. Perfect for those looking to speed up their test automation journey or enhance their Playwright skills!

35130Updated 1mo ago

Intermediate30min to implementautomation

Saves ~240 min per use

Quick InstallView Source

git clone https://github.com/iamcharankumar/playwright_test_framework.git

Works with:

Claude

Overview

About This Skill

How to Use

1. **Initialize Project**: Run `npm init playwright@latest` in your project directory to scaffold a new Playwright project. Select TypeScript/JavaScript based on your preference. 2. **Configure Environment**: Update `playwright.config.js` with your [WEBSITE_URL], set parallel workers (recommended: 3-5 for medium projects), and configure reporters (HTML/JSON recommended). 3. **Implement Page Objects**: Create modular page classes (e.g., `LoginPage.js`, `DashboardPage.js`) in `/pages` to encapsulate selectors and actions. Use consistent naming conventions (e.g., `getXButton()`, `fillXField()`). 4. **Write Tests**: Add test files in `/tests` using the Page Object Model. Include setup/teardown hooks (e.g., `test.beforeEach` for login) and assertions for UI states, API calls, and performance (e.g., `expect(page).toHaveURL()`). 5. **Run & Debug**: Execute tests via `npx playwright test` (headless) or `npx playwright test --headed` (headed). Use `npx playwright show-report` to view HTML reports. Debug with `npx playwright codegen [WEBSITE_URL]` to auto-generate selectors. **Pro Tips**: - Use `testData.json` for reusable test inputs to avoid hardcoding. - Add `expect(page).toHaveScreenshot()` for visual regression testing. - Integrate with CI/CD (GitHub Actions, Jenkins) using `playwright test --reporter=line`.

Setup & Installation

Quick Install

No install command available. Check the GitHub repository for manual installation instructions.

Alternative Install (Git Clone)

git clone https://github.com/iamcharankumar/playwright_test_framework

Requirements

Claude Code or compatible AI agent
Works with: Claude

Quick Start Guide

Install the Skill

Copy the install command above and run it in your terminal.

Open Your AI Agent

Launch Claude Code, Cursor, or your preferred AI coding agent.

Try It Out

Use the prompt template or examples below to test the skill.

Customize

Adapt the skill to your specific use case and workflow.

Usage Examples

Prompt Template

Create a Playwright test suite for [WEBSITE_URL] that validates the following critical user flows: [FLOW_1], [FLOW_2], and [FLOW_3]. Include setup for headless/headed mode, parallel execution, and a report generation step. Use [TEST_DATA] as input values where applicable. Ensure tests follow Page Object Model (POM) pattern and include assertions for UI elements, API responses, and performance metrics.

Example Output

```javascript
// playwright.config.js
module.exports = {
  testDir: './tests',
  timeout: 30000,
  fullyParallel: true,
  retries: 1,
  workers: 3,
  reporter: [['list'], ['json', { outputFile: 'test-results.json' }]],
  use: {
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
};

// tests/login.spec.js
const { test, expect } = require('@playwright/test');
const { LoginPage } = require('../pages/login.page');
const { DashboardPage } = require('../pages/dashboard.page');
const testData = require('../test-data.json');

test.describe('Login Flow Tests', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('https://acme-corp.com/login');
  });

  test('Successful login with valid credentials', async ({ page }) => {
    const loginPage = new LoginPage(page);
    const dashboardPage = new DashboardPage(page);

    await loginPage.fillEmail(testData.validUser.email);
    await loginPage.fillPassword(testData.validUser.password);
    await loginPage.clickLoginButton();

    await expect(dashboardPage.getWelcomeMessage()).toBeVisible();
    await expect(dashboardPage.getWelcomeMessage()).toContainText('Welcome, John Doe!');
    await expect(page).toHaveURL('https://acme-corp.com/dashboard');
  });

  test('Failed login with invalid credentials', async ({ page }) => {
    const loginPage = new LoginPage(page);

    await loginPage.fillEmail(testData.invalidUser.email);
    await loginPage.fillPassword(testData.invalidUser.password);
    await loginPage.clickLoginButton();

    await expect(loginPage.getErrorMessage()).toBeVisible();
    await expect(loginPage.getErrorMessage()).toContainText('Invalid email or password');
  });

  test('Password reset flow', async ({ page }) => {
    const loginPage = new LoginPage(page);
    const resetPage = new ResetPasswordPage(page);

    await loginPage.clickForgotPasswordLink();
    await resetPage.fillEmail(testData.validUser.email);
    await resetPage.clickSendLinkButton();

    await expect(resetPage.getSuccessMessage()).toBeVisible();
    await expect(resetPage.getSuccessMessage()).toContainText('Password reset link sent');

    const email = await resetPage.getLastEmail();
    expect(email.subject).toContain('Password Reset');
    expect(email.body).toContain('Reset your password');
  });
});

// reports/html-report/index.html
// Generated after test execution showing 3/3 tests passed with 0 failures
```