How do I use Playwright's test generator to create tests without manually writing .spec files?

Answer

To dynamically generate and run tests without creating .spec files, use Playwright's test generator feature. It's an excellent way to start testing quickly and efficiently.

Getting Started with Test Generator

1. Run the codegen command with the URL of the website you want to test (optional). If you don't provide the URL, you can add it directly in the browser window later.

   npx playwright codegen https://ray.run/

2. Interact with the website in the browser window that opens.

3. Playwright Inspector will record your actions and generate test code.

The test generator prioritizes role, text, and test id locators when examining rendered pages. If multiple elements match a locator, Playwright improves the locator to uniquely identify the target element(s). This reduces test failures due to locator issues.

Example

Here's a TypeScript example of a generated test using @playwright/test:

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

test('Generated test example', async ({ page }) => {
  await page.goto('https://ray.run/');
  await page.click('text=Sign in');
  await page.fill('input[name="email"]', '[email protected]');
  await page.fill('input[name="password"]', 'password123');
  await page.click('button:has-text("Sign in")');
  const welcomeText = await page.innerText('h1');
  expect(welcomeText).toBe('Welcome, User!');
});

In summary, Playwright's test generator allows you to dynamically create automated UI tests without manually writing .spec files.