Writing Your First Test in Playwright

 This is perfect for a tutorial script or blog post on Playwright + TypeScript basics.

1. Writing Your First Test in Playwright

Let’s start with a simple test to understand how Playwright works.

🔹 Step 1: Import Required Methods

First, we need to import the required methods (test and expect) from the Playwright testing library:

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

---

🔹 Step 2: Write Your First Test

The test method takes two parameters:

• A title (string) that describes the test case

• A callback function (arrow function) that contains the actual test code

Example:

test('First test case', () => {
  // Your test code goes here
});

You can add as many test cases as you want in the same format:

test('Second test case', () => {
  // Code for second test
});

test('Third test case', () => {
  // Code for third test
});

---

✅ 2. Grouping Test Cases using test.describe

To group related test cases, use the test.describe method. This is useful for organizing your tests (e.g., login-related tests):

test.describe('Login Test Suite 1', () => {

  test('Login with valid credentials', () => {
    // Add test steps here
  });

  test('Login with invalid credentials', () => {
    // Add test steps here
  });

  test('Login without credentials', () => {
    // Add test steps here
  });

});

---

✅ 3. Using the page Fixture

To interact with a web page (like opening a URL, clicking buttons, etc.), we use the page fixture provided by Playwright.

Fixtures like browser, context, and page are built-in tools that help run your tests in a clean environment.

Example of a test with page fixture:

test('Login page test case', async ({ page }) => {
  await page.goto('https://opensource-demo.orangehrmlive.com/web/index.php/auth/login');
});

---

⚠️ 4. Common Mistake: Handling Promises

In JavaScript/TypeScript, certain methods (like page.goto) return Promises.

A Promise represents an operation that hasn’t completed yet but is expected to in the future.
It can either:

• Resolve successfully, or

• Fail with an error

To handle Promises properly:

• Use await before methods that return a Promise

• Ensure the function is marked as async

Example:

test('Login page test case', async ({ page }) => {
  await page.goto('https://opensource-demo.orangehrmlive.com/web/index.php/auth/login');
});

If you forget await or async, the test will throw an error or not behave as expected.

---

💡

Run command :

npx playwright test firsttest.spec.ts --project=chromium --headed