Skip to main content

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

Comments

Post a Comment

Popular posts from this blog

Step-by-Step: Launch Browser, Context, and Page in Playwright and Run Test and Configuration (JavaScript)

🎥 Setup Browser, Context, Page & Run Config Test Scripts with package.json & playwright.config.js Step-by-Step: Launch Browser, Context, and Page in Playwright and Run Test and Configuration (JavaScript) 1. Install Playwright You can install Playwright using the following command: npm init playwright@latest 2. Create a Basic Test Script Understand the core Playwright architecture: Element Description browser Controls the browser instance (like Chrome, Firefox, etc.) context Acts like a separate browser profile (cookies, localStorage are isolated) page A single browser tab where interaction happens 3. Run the Test npx playwright test example.spec.js Ways to Run TypeScript Tests Way Command Notes 🟢 Via npx npx playwright test Uses built-in TypeScript support 🟢 With s...
Post a Comment
Read more

Playwright Test Structure in Details -Session-02

🎥 Playwright: test.only, Hooks & Grouping with test.describe Explained Let’s go step-by-step , showing how to build from a single test , to using beforeEach / afterEach , and then organizing things with test.describe . ✅ Step 1: Basic Single Test with test.only import { test, expect } from '@playwright/test' ; test. only ( '🚀 Basic test - check title' , async ({ page }) => { await page. goto ( 'https://example.com' ); await expect (page). toHaveTitle ( /Example Domain/ ); }); test.only ensures only this test runs — great for debugging. ✅ Step 2: Add beforeEach and afterEach import { test, expect } from '@playwright/test' ; test. beforeEach ( async ({ page }) => { console . log ( '🔄 Setting up before each test' ); await page. goto ( 'https://example.com' ); }); test. afterEach ( async ({ page }, testInfo) => { console . log ( `📦 Finished test: ${testInfo.title} `); }); test. only ( ...
Post a Comment
Read more

Playwright Locators in JavaScript (Complete Guide)

🎯 Playwright Locators in JavaScript (Complete Guide) This guide explains each Playwright locator with: ✅ What it is 🕐 When to use ⚙️ How to use it 🎯 Benefits 🧪 Code Examples 🔹 1. Locator by ID ✅ What: Selects an element with a unique id . 🕐 When: Element has a unique id . ⚙️ How: page.locator('#username') 🎯 Benefit: Fast and reliable. <input id="username" /> await page.locator('#username').fill('John'); 🔹 2. Locator by Class ✅ What: Selects by class . 🕐 When: Repeated or styled elements. ⚙️ How: page.locator('.password') 🎯 Benefit: Useful for shared styling. <input class="password" /> await page.locator('.password').fill('12345'); 🔹 3. Locator by Text ✅ What: Matches visible element text. 🕐 When: For buttons, links, etc. ⚙️ How: page.getByText('Login') 🎯 Benefit: Human-readable. <button>Login...
Post a Comment
Read more