Writing Your First Playwright Test

Writing Your First Playwright Test

Playwright is a powerful end-to-end testing framework developed by Microsoft. It allows you to automate web browsers such as Chrome, Firefox, and Safari with a single API. In this guide, we'll walk you through the steps to write your first Playwright test using JavaScript or TypeScript.

Step 1: Install Playwright

First, you need to install Playwright in your project. You can do this using npm:

bash

Copy

Edit

npm init -y

npm install -D @playwright/test

npx playwright install

The last command installs the necessary browser binaries.

Step 2: Create a Test File

Create a new file, for example, example.spec.js or example.spec.ts (if using TypeScript), and add the following code:

javascript

Copy

Edit

// example.spec.js

const { test, expect } = require('@playwright/test');

test('basic test', async ({ page }) => {

  await page.goto('https://example.com');

  const title = await page.title();

  expect(title).toBe('Example Domain');

});

This test:

Opens a browser.

Navigates to https://example.com.

Asserts that the page title is "Example Domain".

Step 3: Run the Test

To run your test, use the following command:

bash

Copy

Edit

npx playwright test

Playwright will detect any files that match the pattern *.spec.js or *.spec.ts and execute them.

Step 4: View the Test Report

After running the tests, Playwright generates a summary in the terminal. You can also open the detailed HTML report using:

bash

Copy

Edit

npx playwright show-report

This opens a visual report in your default browser, showing test results, screenshots, and more.

Bonus: Run Tests in UI Mode

To observe the browser while tests are running, use UI mode:

bash

Copy

Edit

npx playwright test --ui

This launches a test runner with a graphical interface—perfect for debugging.

Conclusion

Writing your first Playwright test is simple and quick. With just a few lines of code, you can start automating your web application. As you grow more comfortable, you can explore features like parallel testing, tracing, screenshots, and cross-browser support.

Would you like help with setting up Playwright using TypeScript or configuring tests for a specific framework like React or Angular?

Learn Playwright Course in Hyderabad

Read More

Understanding Browsers Supported by Playwright

Setting Up Your First Playwright Project

Visit Our IHUB Talent Training Institute in Hyderabad

Get Directions

Comments

Post a Comment

Popular posts from this blog

How to Install and Set Up Selenium in Python (Step-by-Step)

 Here’s your step-by-step guide to installing and setting up Selenium in Python — perfect if you're just getting started with browser automation. 🚀 🐍 Step 1: Install Python If you haven’t already: Download Python: https://www.python.org/downloads/ Make sure to check the box "Add Python to PATH" during installation Verify installation: bash Copy Edit python --version pip --version 📦 Step 2: Install Selenium Library Open your terminal or command prompt and run: bash Copy Edit pip install selenium To verify: bash Copy Edit pip show selenium 🌐 Step 3: Download WebDriver for Your Browser Depending on what browser you want to automate: 🔹 Chrome: Download ChromeDriver: ➡️ https://sites.google.com/chromium.org/driver/ Make sure the driver version matches your installed Chrome version. 🔹 Firefox: Download GeckoDriver: ➡️ https://github.com/mozilla/geckodriver/releases Unzip and place the executable somewhere on your system, like: Windows: C:\WebDrivers\ Mac/Linux: /usr/local...
Read more

Tosca for API Testing: A Step-by-Step Tutorial

Tosca for API Testing: A Step-by-Step Tutorial Tricentis Tosca is a powerful and user-friendly test automation tool that supports a wide range of testing types — including API testing. With Tosca, you can easily design, automate, and execute API tests without writing any code. It supports REST, SOAP, and other service types, making it a great choice for end-to-end API validation. 🧰 What is Tosca API Testing? Tosca’s API testing allows testers to: Send requests (GET, POST, PUT, DELETE, etc.) Validate responses (status codes, body, headers) Chain requests and share data between them Perform security, load, and functional tests on APIs ✅ Step-by-Step Guide: Tosca API Testing 🔹 Step 1: Open Tosca and Create a Workspace Launch Tosca Commander Create a new workspace (or open an existing one) Choose the workspace type as Multi-user or Single-user based on your setup 🔹 Step 2: Add a New API Test Case Navigate to the Modules section. Right-click and choose Scan > API Scan. The API Scan wi...
Read more

Waits in Playwright: Explicit, Implicit, and Auto

 In Playwright (a powerful end-to-end testing framework), waiting mechanisms help ensure your scripts interact with elements only when they’re ready. Playwright handles waits more intelligently than older tools like Selenium, but understanding the types of waits—Explicit, Implicit, and Auto-waiting—is key for writing reliable tests. 🕰️ Waits in Playwright: Explicit, Implicit, and Auto ✅ 1. Auto-Waiting (Built-in) – Playwright’s Default Behavior What it is: Playwright automatically waits for elements to be actionable before performing actions (like click, type, fill, etc.). This is its most powerful feature. How it works: Waits for the element to be attached to the DOM Waits for the element to be visible Waits for the element to be enabled (not disabled) Waits for stable animation or layout Example: python Copy Edit await page.click('#submit-button') No need for a separate wait — Playwright will wait until the button is ready. Benefits: Reduces the need for manual waits More re...
Read more