How do I create a test using Playwright?

Answer

To create a test using @playwright/test, follow these steps:

1. Install Playwright

First, install Playwright and its dependencies:

npm install -D playwright

2. Create a Test File

Create a new file named my-test.spec.ts in your project directory.

3. Write the Test

In my-test.spec.ts, import the test object from @playwright/test and write your test using the test function. Here's a simple example that navigates to https://ray.run/ and checks if the title contains "Ray":

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

test('Check Ray title', async ({ page }) => {
  await page.goto('https://ray.run/');
  const title = await page.title();
  expect(title).toContain('Ray');
});

4. Configure Playwright

Create a playwright.config.ts file in your project directory with the following content:

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

const config: PlaywrightTestConfig = {
  use: {
    headless: true,
    viewport: { width: 1280, height: 720 },
    ignoreHTTPSErrors: true,
  },
};

export default config;

5. Run the Test

Execute your test using the playwright test command:

npx playwright test

That's it! You've successfully created and executed a test using @playwright/test.