Answer

Writing a Simple Test with Playwright

Creating a test with Playwright is a breeze. Let's start by navigating to the page you want to test using page.goto(). Playwright automatically waits for actions to be ready before executing them, so you don't need to add any waits.

Here's a basic test example:

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

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

In this test, we're checking if the page title contains "Ray". We use await because these methods are asynchronous.

Playwright also supports assertions. They describe the expected outcomes and are designed to avoid race conditions. This means you don't have to worry about flaky timeouts or racy checks.

Here's another example:

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

test('get started link', async ({ page }) => {
  await page.goto('https://ray.run/');
  await page.getByRole('link', { name: 'Get started' }).click();
  await expect(page).toHaveURL(/.*intro/);
});

In this test, we're checking if clicking the "Get started" link takes us to a URL containing "intro".

When writing tests in TypeScript using VS Code, it's recommended to add // @ts-check at the start of each file for automatic type checking.

Writing tests with Playwright is straightforward thanks to its built-in methods and assertions. They're designed to avoid race conditions and flaky timeouts, making your testing process smoother. For more tips on writing efficient Playwright tests, check out this blog post.