Step-by-Step Guide to Setting Up a Project Using Playwright

In today’s rapidly evolving landscape of web development, ensuring the reliability and quality of web applications is paramount. One effective way to achieve this is through test automation.

Playwright, a powerful automation library developed by Microsoft, offers developers a robust toolkit for automating interactions with web applications across various browsers.

In this article, we’ll provide a beginner-friendly, step-by-step guide to setting up a project using Playwright, enabling you to kickstart your journey into automated testing.

Before diving deeper into this article, it’s important to understand that Playwright offers cross-language support, enabling you to code in TypeScript, JavaScript, Python, .NET, and Java.

Playwright, is primarily built using TypeScript for robustness and developer productivity.

TypeScript’s static type-checking and modern features enhance the automation library’s capabilities.

You’ll need the following prerequisites to set up Playwright with TypeScript

Node.js: Ensure that you have Node.js installed on your system. You can download it from the official Node.js website https://nodejs.org/en/download

Code Editor: Choose your favorite code editor. If you’re not already using one, consider using Visual Studio Code (VS Code), which provides excellent TypeScript support.

With these prerequisites in place, you’ll be ready to set up Playwright with TypeScript and start automating your tests!

Setting Up Your Project

To set up Playwright with TypeScript (TS) in Visual Studio Code (VS Code), follow these steps:

Create a New Directory:

Create a fresh new directory (e.g., “PlaywrightDemo”) where you’ll organize your Playwright tests

Open the Directory in VS Code:

From VS Code, click on File > Open Folder.
Choose the newly created folder (e.g., “PlaywrightDemo”).

Open a Terminal:

Click on the Terminal menu in VS Code.
Select New Terminal.

Install Playwright:

In the terminal, enter the following command to start the Playwright installation:

npm init playwright@latest

otherwise follow the Playwright Installation guide from testleaf

This command initializes a new Playwright project by doing the following:

Creates a configuration file for your project.
Optionally adds example test files.
Sets up a GitHub Action workflow for continuous integration (CI).
Includes a basic test example (usually named example.spec.ts).
After running this command, you can start writing your Playwright tests in TypeScript!).

Configure Browsers:

You can later configure the browsers you’d like to run your tests on in the playwright.config file.

Start Writing Tests:

You’re all set! Start writing your Playwright tests in TypeScript within your chosen directory.

Create a new file named ‘firstTest.spec.ts’ in a directory named ‘tests’ and add the following code:

import { test, chromium, firefox } from “@playwright/test”;

test(`To launch the browser`,async () => {

//Create a new browser instance

const browser = await chromium.launch({headless:false, channel:’msedge’});

// Get the browser context

const browserContext = await browser.newContext();

// Create a new page

const page = await browserContext.newPage();

// Load the url

await page.goto(“http://leaftaps.com/opentaps/control/main”);

//To print the title

const title = await page.title();

console.log(title);

})

Running Your Tests

To execute your tests, you’ll use the Playwright test runner provided by the @playwright/test package. Run the following command in your terminal:

npx playwright test firstTest.spec.ts

The Playwright test runner will launch a browser instance, execute your test case, and provide detailed output regarding the test results.

Organizing Your Test Suites

As your test suite grows, it’s essential to organize your tests into logical groups.

Create separate test files for different features or components of your application. For example:

tests/

├── loginPage.spec.ts

└── homePage.spec.ts

Adding Assertions

Playwright provides a rich set of assertion functions for verifying the behavior of web applications. You can use these assertions to validate elements, text content, URLs, and more. Let’s illustrate by performing a search on Leaftaps application:

import { chromium, test } from “@playwright/test”;

test(`Locate different web elements`,async ({page}) => {

await page.goto(“http://leaftaps.com/opentaps/control/main”);

// Enter the username

await page.locator(“#username”).fill(“Demosalesmanager”);

// Enter the password

await page.locator(“[name=’PASSWORD’]”).fill(“crmsfa”);

// Click the login button

await page.locator(“.decorativeSubmit”).click();

expect(title).toBe(‘Leaftaps – TestLeaf Automation Platform’);

})

Conclusion