Playwright Like Cypress

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

Installation

npm install playwright-like-cypress

Setup

To use this library, ensure your Playwright environment is set up. Add this library to your Playwright tests for a more streamlined experience.

Usage

import { SimplePage, SimpleElement } from 'playwright-like-cypress';

// Example usage in a test
const sp = new SimplePage(page);

// Navigate to a URL
await sp.visit('https://example.com');

// Interact with an element
const button = await sp.get('#submit-button');
await button.click();

// Perform assertions
const message = await sp.get('.success-message');
await message.toBeVisible();

// Chainable actions
await (await sp.get('#input-field')).type('Test Input').and();

API Reference

SimplePage

SimplePage serves as the starting point for interacting with your test page.

• visit(url: string): Promise<void>
  Navigate to the specified URL.

• get(selector: string): Promise<SimpleElement>
  Find and return a SimpleElement by its selector.

• contains(text: string, selector?: string): Promise<SimpleElement>
  Find an element containing the specified text, optionally within a specific selector.

• scrollTo(target: string | { x: number; y: number }): Promise<void>
  Scroll to a position or an element.

• wait(msOrSelector: number | string): Promise<void>
  Wait for a specific time or element.

• url(): Promise<string>
  Get the current URL.

SimpleElement

SimpleElement provides easy methods to interact with and test elements.

Interaction Methods

• click(options?: { force?: boolean }): Promise<void>
  Click the element.

• type(text: string, options?: { delay?: number }): Promise<void>
  Type text into the element.

• clear(): Promise<void>
  Clear the input field.

• check(): Promise<void>
  Check a checkbox or radio button.

• uncheck(): Promise<void>
  Uncheck a checkbox.

• select(values: string | string[]): Promise<void>
  Select options in a dropdown.

• scrollIntoView(): Promise<void>
  Scroll the element into view.

Assertion Methods

• toBeVisible(): Promise<void>
  Assert that the element is visible.

• toBeEnabled(): Promise<void>
  Assert that the element is enabled.

• toBeDisabled(): Promise<void>
  Assert that the element is disabled.

• toBeChecked(): Promise<void>
  Assert that a checkbox or radio is checked.

• toHaveText(text: string): Promise<void>
  Assert that the element contains the specified exact text.

• toContainText(text: string): Promise<void>
  Assert that the element contains the specified text.

• toHaveValue(value: string): Promise<void>
  Assert that an input field has the specified value.

• toHaveCount(count: number): Promise<void>
  Assert the number of matching elements.

Navigation and Query Methods

• eq(index: number): Promise<SimpleElement>
  Find an element at a specific index.

• find(selector: string): Promise<SimpleElement[]>
  Find child elements matching the selector.

• parent(): Promise<SimpleElement | null>
  Get the parent element.

• parents(selector?: string): Promise<SimpleElement[]>
  Get all parent elements, optionally filtered by selector.

• next(): Promise<SimpleElement>
  Get the next sibling element.

• prev(): Promise<SimpleElement>
  Get the previous sibling element.

• not(selector: string): Promise<SimpleElement[]>
  Get elements that do not match the selector.

Example Test Workflow

import { test } from '@playwright/test';
import { SimplePage } from 'playwright-like-cypress';

test('example test', async ({ page }) => {
  const sp = new SimplePage(page);

  // Navigate to the homepage
  await sp.visit('https://example.com');

  // Perform some actions
  const input = await sp.get('#username');
  await input.type('myusername');

  const submit = await sp.get('#submit');
  await submit.click();

  // Validate the results
  const successMessage = await sp.get('.success');
  await successMessage.toBeVisible();
});

License

MIT