playwright-cypress

Playwright Simple

A simplified wrapper around Playwright that provides a Cypress-like API for easier test automation.

Installation

npm install playwright-cypress

Usage

import { SimplePage } from 'playwright-cypress';

// In your test:
const sp = new SimplePage(page);

// Visit page
await sp.visit('https://example.com');

// Find and interact with elements
const button = await sp.get('#submit-button');
await button.click();

// Type text
const input = await sp.get('#search-input');
await input.type('hello world');

// Check visibility
const message = await sp.get('.success-message');
await message.isVisible();

// Find multiple elements
const items = await sp.find('.list-item');

// Scroll to element
await sp.scrollTo('#bottom-section');

// Take screenshot
await sp.screenshot('test.png');

API Reference

SimplePage Methods

• get(selector: string): Find single element
• find(selector: string): Find multiple elements
• visit(url: string): Navigate to URL
• title(): Get page title
• wait(ms: number): Wait for specified time
• waitForVisible(selector: string, timeout?: number): Wait for element to be visible
• scrollTo(selector: string): Scroll to element
• screenshot(path: string): Take screenshot

SimpleElement Methods

• click(): Click element
• type(text: string): Type text into element
• text(): Get element text content
• isVisible(): Check if element is visible
• value(): Get input element value
• attr(name: string): Get element attribute
• exists(): Check if element exists

Configuration

Add to your playwright.config.ts:

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

const config: PlaywrightTestConfig = {
  use: {
    baseURL: 'http://localhost:3000',
    screenshot: 'only-on-failure',
    video: 'retain-on-failure',
  },
  reporter: [['html'], ['json', { outputFile: 'test-results.json' }]],
};

export default config;

License