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

How to Maximize a Browser window using Playwright Java

  Playwright itself does not have a direct maximize () method like some other browser automation tools, but you can achieve the effect by setting the viewport to the screen size of your display. Below are ways to handle Maximize a browser in Playwright Java  Ø   Setting the viewport to the screen size  o    setViewportSize(1920, 1080): This sets the browser window to a full HD resolution, effectively maximizing it. o    setHeadless(false): Ensures the browser runs in a visible mode so you can see the window being maximized.  Code Snapshot  Playwright playwright = Playwright. create ()   ;   Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));     // Create a new browser context   BrowserContext context = browser.newContext(new Browser.NewContextOptions()          .setViewportSize(1920, 1080));     ...
Post a Comment
Read more