Skill: zhanghengyi1986-afk/web-tester (version 1.0.0)

--- name: web-tester description: > Web UI testing and browser automation using Playwright or Selenium. Navigate pages, interact with elements, take screenshots, validate UI state, generate E2E test scripts. Requires Node.js and npx for Playwright. Use when: (1) UI functional testing, (2) E2E test scripting, (3) screenshot comparison, (4) form testing, (5) cross-browser testing, (6) accessibility checks, (7) "UI测试", "页面测试", "自动化测试", "截图对比", "E2E测试", "浏览器自动化", "Playwright", "Selenium". NOT for: API testing (use api-tester), mobile app testing, or performance/load testing. metadata: openclaw: emoji: "🌐" requires: bins: [node] --- # Web Tester Browser-based UI testing and E2E automation. ## When to Use ✅ **USE this skill when:** - Testing web page functionality (click, fill, navigate) - Writing E2E test scripts (Playwright/Selenium) - Taking screenshots for visual regression - Validating page content, forms, navigation - Accessibility testing - "帮我测试这个页面" / "写个E2E自动化脚本" ❌ **DON'T use this skill when:** - API testing → use `api-tester` - Mobile app testing → use dedicated mobile tools - Load/stress testing → use k6/JMeter/locust ## Quick Start: Playwright ### One-shot Page Test ```bash # Navigate and screenshot npx -y playwright@latest test --browser=chromium -g "test name" # Or write inline script node -e " const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch({ headless: true }); const page = await browser.newPage(); await page.goto('https://example.com'); console.log('Title:', await page.title()); await page.screenshot({ path: '/tmp/screenshot.png' }); await browser.close(); })(); " ``` ### Generate Playwright Test Script When user provides a page URL and test scenario, generate: ```javascript // tests/example.spec.js const { test, expect } = require('@playwright/test'); test.describe('Login Page Tests', () => { test('TC001: Successful login', async ({ page }) => { await page.goto('https://app.example.com/login'); // Fill form await page.fill('input[name="username"]', 'admin'); await page.fill('input[name="password"]', 'Admin@123'); await page.click('button[type="submit"]'); // Verify redirect await expect(page).toHaveURL(/dashboard/); await expect(page.locator('h1')).toContainText('Welcome'); }); test('TC002: Login with empty fields', async ({ page }) => { await page.goto('https://app.example.com/login'); await page.click('button[type="submit"]'); // Verify validation messages await expect(page.locator('.error-message')).toBeVisible(); }); test('TC003: Login with wrong password', async ({ page }) => { await page.goto('https://app.example.com/login'); await page.fill('input[name="username"]', 'admin'); await page.fill('input[name="password"]', 'wrongpass'); await page.click('button[type="submit"]'); await expect(page.locator('.error-alert')).toContainText('Invalid'); }); }); ``` Run tests: ```bash # Install Playwright browsers (first time) npx playwright install chromium # Run tests npx playwright test tests/example.spec.js --reporter=list # Run with headed browser (visible) npx playwright test --headed # Run specific test npx playwright test -g "TC001" # Generate HTML report npx playwright test --reporter=html npx playwright show-report ``` ## Common UI Test Patterns ### Element Locator Strategies (priority order) 1. `data-testid` attribute (most stable) 2. `role` + accessible name 3. `placeholder` / `label` text 4. CSS selector 5. XPath (last resort) ```javascript // Preferred page.getByTestId('submit-btn') page.getByRole('button', { name: 'Submit' }) page.getByPlaceholder('Enter email') page.getByLabel('Username') // Fallback page.locator('button.submit-btn') page.locator('//button[contains(text(),"Submit")]') ``` ### Wait Strategies ```javascript // Wait for element await page.waitForSelector('.result-list'); // Wait for navigation await page.waitForURL('**/dashboard'); // Wait for network idle await page.waitForLoadState('networkidle'); // Wait for specific response const response = await page.waitForResponse('**/api/users'); ``` ### Screenshot & Visual Comparison ```javascript // Full page screenshot await page.screenshot({ path: 'full-page.png', fullPage: true }); // Element screenshot await page.locator('.chart').screenshot({ path: 'chart.png' }); // Visual comparison (Playwright built-in) await expect(page).toHaveScreenshot('homepage.png'); ``` ## Test Scenarios Checklist For any web page, consider testing: | Category | Test Points | |----------|-------------| | **Navigation** | Links work, breadcrumbs correct, back button, deep links | | **Forms** | Required fields, validation messages, submit, reset | | **Auth** | Login, logout, session expiry, role-based access | | **Responsive** | Mobile viewport, tablet, desktop breakpoints | | **Accessibility** | Tab order, screen reader, color contrast, ARIA | | **Error States** | 404 page, network error, empty state, timeout | | **Data Display** | Pagination, sorting, filtering, search | | **File Operations** | Upload, download, preview | ## Accessibility Quick Check ```javascript // Install axe-core for a11y testing // npm install @axe-core/playwright const { test, expect } = require('@playwright/test'); const AxeBuilder = require('@axe-core/playwright').default; test('accessibility scan', async ({ page }) => { await page.goto('https://example.com'); const results = await new AxeBuilder({ page }).analyze(); expect(results.violations).toEqual([]); }); ``` ## Tips - Always use `headless: true` in CI environments - Set reasonable timeouts (default 30s is often too long) - Use `page.waitForLoadState('networkidle')` before assertions - For flaky tests: add retries in config, not in test code - Screenshot on failure is invaluable for debugging ## Selenium (Python) Reference When Playwright is not available or user prefers Selenium: ```python """Selenium E2E Test Example""" import pytest from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC from selenium.webdriver.chrome.options import Options @pytest.fixture def driver(): opts = Options() opts.add_argument('--headless') opts.add_argument('--no-sandbox') opts.add_argument('--disable-dev-shm-usage') d = webdriver.Chrome(options=opts) d.implicitly_wait(10) yield d d.quit() class TestLogin: def test_successful_login(self, driver): driver.get('https://app.example.com/login') driver.find_element(By.NAME, 'username').send_keys('admin') driver.find_element(By.NAME, 'password').send_keys('Admin@123') driver.find_element(By.CSS_SELECTOR, 'button[type=submit]').click() WebDriverWait(driver, 10).until( EC.url_contains('/dashboard') ) assert 'dashboard' in driver.current_url def test_screenshot_on_failure(self, driver): driver.get('https://app.example.com/broken-page') driver.save_screenshot('/tmp/failure.png') ``` Install: `pip install selenium webdriver-manager` ### Playwright vs Selenium — When to Choose | 维度 | Playwright | Selenium | |------|-----------|----------| | 安装 | `npx playwright install` 一键搞定 | 需要 WebDriver + 浏览器匹配 | | 速度 | 更快（原生 CDP/WebSocket） | 较慢（HTTP 协议通信） | | 自动等待 | 内置智能等待 | 需手动写 WebDriverWait | | 多浏览器 | Chromium/Firefox/WebKit | Chrome/Firefox/Edge/Safari | | 语言 | JS/TS/Python/Java/.NET | Python/Java/C#/Ruby/JS | | 适合 | 新项目、快速验证、CI | 已有 Selenium 框架的团队 | **建议**: 新项目优先 Playwright，已有 Selenium 资产的项目继续用 Selenium。


Security scan verdicts — ClawScan: clean | static analysis: clean | VirusTotal: clean | SkillSpector: clean (LOW)