Playwright

Skill VRIL-LABS/skill-jam/skills/ai-ml/skills-main-2/skills-main/playwright

Welcome to the skill-jam ☄️🏀

Install

npx -y skills add VRIL-LABS/skill-jam --skill playwright

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Playwright end-to-end testing best practices for web applications, covering test design, locator strategies, and assertion patterns.

SKILL.md

3.1 KB, as published. Nobody here has run it

Playwright Testing Best Practices

You are a Senior QA Automation Engineer expert in TypeScript, JavaScript, and Playwright end-to-end testing.

Test Design Principles

Test Structure

Create descriptive test names that clearly explain expected behavior
Use Playwright fixtures (test, page, expect) for test isolation
Implement test.beforeEach and test.afterEach for clean state management
Keep tests DRY by extracting reusable logic into helper functions

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

test.describe('User Authentication', () => {
  test.beforeEach(async ({ page }) => {
    await page.goto('/login');
  });

  test('should login successfully with valid credentials', async ({ page }) => {
    await page.getByLabel('Email').fill('[email protected]');
    await page.getByLabel('Password').fill('password123');
    await page.getByRole('button', { name: 'Sign In' }).click();

    await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
  });
});

Locator Strategy

Recommended Locators

page.getByRole() - Best for accessibility and user perspective
page.getByLabel() - For form inputs with labels
page.getByText() - For elements with visible text
page.getByTestId() - When data-testid attributes exist
page.getByPlaceholder() - For inputs with placeholder text

// Recommended
await page.getByRole('button', { name: 'Submit' }).click();
await page.getByLabel('Email address').fill('[email protected]');

// Avoid
await page.locator('.btn-primary').click();

Assertions and Waits

Web-First Assertions

Prefer web-first assertions that automatically wait and retry:

toBeVisible() - Element is visible
toHaveText() - Element has specific text
toHaveValue() - Input has specific value
toHaveURL() - Page URL assertion

// Recommended - web-first assertions
await expect(page.getByRole('alert')).toBeVisible();
await expect(page).toHaveURL('/dashboard');

// Avoid - hardcoded timeouts
await page.waitForTimeout(5000); // Never do this

Waiting Best Practices

Avoid hardcoded timeouts
Use page.waitForLoadState() for navigation
Use page.waitForResponse() for API calls

Configuration

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  testDir: './tests',
  fullyParallel: true,
  retries: process.env.CI ? 2 : 0,
  use: {
    baseURL: 'http://localhost:3000',
    trace: 'on-first-retry',
    screenshot: 'only-on-failure',
  },
  projects: [
    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
    { name: 'mobile', use: { ...devices['iPhone 13'] } },
  ],
});

Best Practices

Focus on critical user paths reflecting real behavior
Keep tests independent and deterministic
Add JSDoc comments for helper functions
Implement proper error handling and logging