ToolVaults

Playwright & Cypress Test Script Generator

Build end-to-end test scripts visually. Add steps — navigate, click, fill, assert — and get ready-to-run Playwright (TypeScript) or Cypress test code instantly. No coding required.

Runs 100% in your browser — nothing is uploaded.

Steps (3)

1
2
3

Generated Playwright (TypeScript) test

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

test('Homepage smoke test', async ({ page }) => {
  await page.goto('https://example.com');
  await expect(page).toHaveTitle(/Example Domain/i);
  await expect(page.locator('h1')).toBeVisible();
});
How to run this test

1. Install Playwright

npm init playwright@latest

2. Save the generated code

Save as tests/my-test.spec.ts

3. Run

npx playwright test

Add --ui for the visual test runner, --headed to watch the browser.

How to use

  1. 1
    Choose your framework

    Select Playwright (TypeScript) or Cypress (JavaScript). Both output complete, runnable test files.

  2. 2
    Name your test

    Enter the test name and (for Cypress) the describe() suite name. These map directly to the test runner output.

  3. 3
    Add steps

    Choose a step type from the dropdown — navigate, click, fill a form, assert text, take a screenshot, and more. Fill in the selector and value fields for each step.

  4. 4
    Reorder and remove

    Use the ↑/↓ arrows to reorder steps and ✕ to delete any step. The code preview updates live.

  5. 5
    Copy and run

    Click "Copy" to grab the generated code, paste it into a .spec.ts (Playwright) or .cy.js (Cypress) file, and run it with the commands shown in "How to run this test."

Examples

Login form test (Playwright)
Input
navigate → fill email → fill password → click Submit → assert text "Dashboard"
Output
test('Login form', async ({ page }) => {
  await page.goto('https://myapp.com/login');
  await page.locator('#email').fill('user@example.com');
  await page.locator('#password').fill('secret');
  await page.locator('button[type=submit]').click();
  await expect(page.getByText('Dashboard')).toBeVisible();
});
Page smoke test (Cypress)
Input
navigate → assert title → assert element visible → screenshot
Output
describe('Smoke', () => {
  it('Homepage loads', () => {
    cy.visit('https://myapp.com');
    cy.title().should('include', 'My App');
    cy.get('nav').should('be.visible');
    cy.screenshot('homepage');
  });
});

Frequently asked

What is Playwright?

Playwright is a modern end-to-end testing framework by Microsoft that lets you write scripts to control a real browser — Chrome, Firefox, or Safari — to test your web app. It supports TypeScript, Python, Java, and C#.

What is Cypress?

Cypress is a JavaScript-based end-to-end testing framework that runs directly inside the browser. It has a visual test runner and is popular for React/Vue/Angular apps. It supports JavaScript and TypeScript.

Can I use CSS selectors or text in the selector field?

Yes. For Playwright, any valid CSS selector works (e.g. #id, .class, button[type=submit]). You can also use Playwright's locator shortcuts like text=Submit or role=button. For Cypress, use standard CSS selectors passed to cy.get().

Is the generated code production-ready?

It is a working, runnable starting point. For real test suites you may want to add page-object models, fixtures, retry logic, and CI configuration. The generator gives you the core test steps — the scaffolding around them is up to you.

Which should I choose — Playwright or Cypress?

Playwright is generally faster, supports multiple browsers natively, has excellent TypeScript support, and handles complex async scenarios well. Cypress has a friendlier visual runner and a large plugin ecosystem. Both are excellent choices in 2026.

Related tools