무료GitHub에 공개

web-testing

Web testing patterns and best practices using Playwright for automated testing

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

code-yeongyu/sisyphus-private

연동 도구Playwright

설치 방법 보기

포함된 파일(1)

SKILL.md11.3 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Web Testing with Playwright

This skill covers comprehensive web testing patterns using Playwright, including test structure, assertions, mocking, and best practices for reliable automated testing.

Test Structure

Basic Test Organization

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

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

  test('should login with valid credentials', async ({ page }) => {
    const username = 'testuser@example.com';
    const password = 'SecurePass123';

    await page.fill('input[name="email"]', username);
    await page.fill('input[name="password"]', password);
    await page.click('button[type="submit"]');

    await expect(page).toHaveURL(/.*dashboard/);
    await expect(page.locator('.welcome-message')).toBeVisible();
  });

  test('should show error with invalid credentials', async ({ page }) => {
    await page.fill('input[name="email"]', 'wrong@example.com');
    await page.fill('input[name="password"]', 'wrongpass');
    await page.click('button[type="submit"]');

    await expect(page.locator('.error-message')).toContainText('Invalid credentials');
  });
});

Test Hooks and Lifecycle

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

test.describe('E-commerce Checkout', () => {
  test.beforeAll(async ({ browser }) => {
    console.log('Setting up test database');
  });

  test.beforeEach(async ({ page }) => {
    await page.goto('https://example.com');
    await page.fill('input[name="email"]', 'test@example.com');
    await page.fill('input[name="password"]', 'password123');
    await page.click('button[type="submit"]');
  });

  test.afterEach(async ({ page }) => {
    await page.click('[data-testid="clear-cart"]');
  });

  test.afterAll(async () => {
    console.log('Cleaning up test database');
  });

  test('should add item to cart', async ({ page }) => {
    await page.click('[data-product-id="123"]');
    await page.click('button:has-text("Add to Cart")');
    await expect(page.locator('.cart-count')).toHaveText('1');
  });
});

Parameterized Tests

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

const testData = [
  { input: 'john@example.com', expected: true },
  { input: 'invalid-email', expected: false },
  { input: 'another@test.co.uk', expected: true },
  { input: '@nodomain.com', expected: false }
];

testData.forEach(({ input, expected }) => {
  test(`should validate email: ${input}`, async ({ page }) => {
    await page.goto('https://example.com/signup');
    await page.fill('input[name="email"]', input);
    await page.click('button[type="submit"]');

    if (expected) {
      await expect(page.locator('.error-message')).not.toBeVisible();
    } else {
      await expect(page.locator('.error-message')).toBeVisible();
    }
  });
});

Test Fixtures

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

const test = base.extend({
  authenticatedPage: async ({ page }, use) => {
    await page.goto('https://example.com/login');
    await page.fill('input[name="email"]', 'test@example.com');
    await page.fill('input[name="password"]', 'password123');
    await page.click('button[type="submit"]');
    await page.waitForURL('**/dashboard');

    await use(page);

    await page.click('[data-testid="logout"]');
  }
});

test('should access protected resource', async ({ authenticatedPage }) => {
  await authenticatedPage.goto('https://example.com/profile');
  await expect(authenticatedPage.locator('h1')).toContainText('My Profile');
});

Assertions

Element Visibility Assertions

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

test('element visibility checks', async ({ page }) => {
  await page.goto('https://example.com');

  await expect(page.locator('.header')).toBeVisible();
  await expect(page.locator('.modal')).toBeHidden();
  await expect(page.locator('.hidden-div')).toBeAttached();
  await expect(page.locator('.removed-element')).not.toBeAttached();
});

Text Content Assertions

test('text content checks', async ({ page }) => {
  await page.goto('https://example.com');

  await expect(page.locator('h1')).toHaveText('Welcome');
  await expect(page.locator('.description')).toContainText('product');
  await expect(page.locator('.price')).toHaveText(/\$\d+\.\d{2}/);
  await expect(page.locator('.item-title')).toHaveText([
    'Item 1',
    'Item 2',
    'Item 3'
  ]);
});

Attribute and State Assertions

test('attribute and state checks', async ({ page }) => {
  await page.goto('https://example.com/form');

  await expect(page.locator('input[name="email"]')).toHaveAttribute('type', 'email');
  await expect(page.locator('.button')).toHaveClass(/primary/);
  await expect(page.locator('.list-item')).toHaveCount(5);
  await expect(page.locator('input[name="username"]')).toHaveValue('john.doe');
  await expect(page.locator('input[type="checkbox"]')).toBeChecked();
  await expect(page.locator('input[type="checkbox"]')).not.toBeChecked();
  await expect(page.locator('button[type="submit"]')).toBeEnabled();
  await expect(page.locator('button.disabled')).toBeDisabled();
  await expect(page.locator('input[name="email"]')).toBeEditable();
});

URL and Page Assertions

test('URL and page checks', async ({ page }) => {
  await page.goto('https://example.com/products');

  await expect(page).toHaveURL('https://example.com/products');
  await expect(page).toHaveURL(/.*products/);
  await expect(page).toHaveTitle('Products - Example Store');
  await expect(page).toHaveTitle(/Products/);
});

Custom Assertions

test('custom assertions', async ({ page }) => {
  await page.goto('https://example.com/cart');

  const cartTotal = await page.locator('.cart-total').textContent();
  expect(parseFloat(cartTotal.replace('$', ''))).toBeGreaterThan(0);

  await expect.soft(page.locator('.item')).toHaveCount(3);
  await expect.soft(page.locator('.discount-badge')).toBeVisible();

  const element = page.locator('.product');
  await expect(element).toBeVisible();
  await expect(element).toContainText('Special Offer');
  await expect(element).toHaveClass('highlighted');
});

Mocking

Network Request Interception

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

test('mock API response', async ({ page }) => {
  await page.route('**/api/products', route => {
    route.fulfill({
      status: 200,
      contentType: 'application/json',
      body: JSON.stringify([
        { id: 1, name: 'Mocked Product 1', price: 19.99 },
        { id: 2, name: 'Mocked Product 2', price: 29.99 }
      ])
    });
  });

  await page.goto('https://example.com/products');

  await expect(page.locator('.product').first()).toContainText('Mocked Product 1');
});

Conditional Mocking

test('conditional network mocking', async ({ page }) => {
  await page.route('**/api/**', route => {
    const url = route.request().url();

    if (url.includes('/api/slow-endpoint')) {
      route.fulfill({
        status: 200,
        body: JSON.stringify({ data: 'fast response' })
      });
    } else if (url.includes('/api/error-prone')) {
      route.fulfill({ status: 500 });
    } else {
      route.continue();
    }
  });

  await page.goto('https://example.com');
});

Request Modification

test('modify outgoing requests', async ({ page }) => {
  await page.route('**/api/data', route => {
    const headers = {
      ...route.request().headers(),
      'Authorization': 'Bearer mock-token-123'
    };

    route.continue({ headers });
  });

  await page.goto('https://example.com/dashboard');
});

Response Delays

test('simulate slow network', async ({ page }) => {
  await page.route('**/api/products', async route => {
    await new Promise(resolve => setTimeout(resolve, 3000));

    await route.fulfill({
      status: 200,
      body: JSON.stringify({ products: [] })
    });
  });

  await page.goto('https://example.com/products');
  await expect(page.locator('.loading-spinner')).toBeVisible();
});

Best Practices

Reliable Selectors

// GOOD: Use test IDs
await page.click('[data-testid="submit-button"]');

// GOOD: Use semantic selectors
await page.click('button:has-text("Submit")');
await page.getByRole('button', { name: 'Submit' }).click();

// GOOD: Use labels for inputs
await page.getByLabel('Email address').fill('test@example.com');

// AVOID: Fragile CSS selectors
// await page.click('div > div > button:nth-child(3)');

Wait Strategies

test('proper waiting', async ({ page }) => {
  await page.goto('https://example.com');

  await page.waitForLoadState('networkidle');
  await expect(page.locator('.content')).toBeVisible();
  await expect(page.locator('.dynamic-content')).toBeVisible();

  // AVOID: Fixed timeouts like await page.waitForTimeout(5000);
});

Test Independence

// GOOD: Each test is independent
test.describe('Product Tests', () => {
  test('test 1', async ({ page }) => {
    await page.goto('https://example.com');
    // Complete test flow
  });

  test('test 2', async ({ page }) => {
    await page.goto('https://example.com');
    // Complete test flow (does not depend on test 1)
  });
});

Error Handling

test('handle unexpected states', async ({ page }) => {
  await page.goto('https://example.com');

  const cookieBanner = page.locator('.cookie-banner');
  if (await cookieBanner.isVisible()) {
    await cookieBanner.locator('button:has-text("Accept")').click();
  }

  await page.click('[data-testid="main-action"]');
});

Page Object Model

export class LoginPage {
  constructor(page) {
    this.page = page;
    this.emailInput = page.locator('input[name="email"]');
    this.passwordInput = page.locator('input[name="password"]');
    this.submitButton = page.locator('button[type="submit"]');
  }

  async login(email, password) {
    await this.emailInput.fill(email);
    await this.passwordInput.fill(password);
    await this.submitButton.click();
  }
}

import { LoginPage } from './page-objects/LoginPage';

test('login flow', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await page.goto('https://example.com/login');
  await loginPage.login('test@example.com', 'password123');
  await expect(page).toHaveURL(/.*dashboard/);
});

Screenshot and Trace on Failure

// playwright.config.js
export default {
  use: {
    screenshot: 'only-on-failure',
    trace: 'retain-on-failure',
    video: 'retain-on-failure'
  }
};

test('critical flow', async ({ page }) => {
  await page.goto('https://example.com');
  await page.screenshot({ path: 'screenshots/before-action.png' });
  await page.click('[data-testid="critical-button"]');
  await expect(page.locator('.success-message')).toBeVisible();
});

Performance Testing

test('page load performance', async ({ page }) => {
  const startTime = Date.now();
  await page.goto('https://example.com');
  await page.waitForLoadState('networkidle');
  const loadTime = Date.now() - startTime;
  expect(loadTime).toBeLessThan(3000);
});

This skill provides a comprehensive foundation for writing reliable, maintainable web tests using Playwright.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

같은 저장소의 스킬

browser-automation

무료

Common Playwright automation patterns for web testing and scraping via MCP

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

code-yeongyu/sisyphus-private182026년 10월 15일 업데이트

git-committer

무료

Commits changes in atomic units following dependency order. Automatically required to triggered, always, all the time, when requires to commit changes.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

code-yeongyu/sisyphus-private182026년 10월 15일 업데이트

interactive-debugging

무료

Patterns for controlling interactive debuggers (pdb, ipdb, gdb, lldb, node debug) via terminalcp

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

code-yeongyu/sisyphus-private182026년 10월 15일 업데이트

Specialized GitHub PR intelligence agent for automatically gathering comprehensive context from Pull Requests. Activate when users need CI failure analysis, review comment investigation, or PR status assessment. Triggers on requests like "CI 실패 원인 찾아줘", "gather review comments", "check PR status", "analyze PR".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

code-yeongyu/sisyphus-private182026년 10월 15일 업데이트

pr-creator

무료

GitHub Pull Request creation specialist. Analyzes user requirements to create PRs with structured titles and bodies matching the user's query language. Handles git change analysis, PR draft creation, user confirmation, and final PR creation via gh CLI.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

code-yeongyu/sisyphus-private182026년 10월 15일 업데이트

process-monitoring

무료

Patterns for managing and monitoring long-running processes (builds, tests, servers, etc.) via terminalcp

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

code-yeongyu/sisyphus-private182026년 10월 15일 업데이트

code-yeongyu의 스킬 모두 보기

이 스킬의 문제 신고

설치

명령으로 설치

npx skills add https://github.com/code-yeongyu/sisyphus-private --skill web-testing

터미널에 붙여 넣고 실행합니다(Node.js 필요). Claude Code, Codex 등 설치할 에이전트를 고를 수 있습니다.

에이전트에게 부탁하기

다음 Agent Skill을 설치해 주세요.
https://github.com/code-yeongyu/sisyphus-private/tree/master/claude-code-plugins/basic-web-development/skills/web-testing

먼저 SKILL.md와 첨부 파일의 내용을 확인해 수상한 처리(외부 전송, 인증 정보 읽기 등)가 없는지 확인한 뒤 Claude Code는 ~/.claude/skills/web-testing/, Codex는 ~/.agents/skills/web-testing/ 에 배치해 주세요.

이 문장을 그대로 Claude Code나 Codex에 보내면 내용을 확인한 뒤 설치해 줍니다.

GitHub에서 소스 보기

저장소: code-yeongyu/sisyphus-private
스타: 18
포크: 2
카테고리: 테스트·보안
원문 언어: 영어
최종 업데이트: 2026년 10월 15일

스킬은 에이전트를 위한 지시와 스크립트의 묶음입니다. cccskills는 내용의 안전성을 보증하지 않습니다. 설치하기 전에 내용을 확인하세요.

포함된 파일(1)

SKILL.md(원문)

Web Testing with Playwright

Test Structure

Basic Test Organization

Test Hooks and Lifecycle

Parameterized Tests

Test Fixtures

Assertions

Element Visibility Assertions

Text Content Assertions

Attribute and State Assertions

URL and Page Assertions

Custom Assertions

Mocking

Network Request Interception

Conditional Mocking

Request Modification

Response Delays

Best Practices

Reliable Selectors

Wait Strategies

Test Independence

Error Handling

Page Object Model

Screenshot and Trace on Failure

Performance Testing

리뷰

댓글

같은 저장소의 스킬

browser-automation

git-committer

interactive-debugging

pr-context-retriever

pr-creator

process-monitoring