Basic 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 

1. 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 

1. 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: 

1. Create a New Directory:

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

2. Open the Directory in VS Code:

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

3. Open a Terminal:

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

4. 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!). 

5. 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 

In this article, we’ve provided a basic step-by-step guide to setting up a project using Playwright for test automation.  

By following these instructions, you’ll be equipped to initiate your journey into automated testing with confidence.  

With Playwright’s comprehensive APIs and TypeScript’s type safety, you can build resilient and maintainable test suites for your web applications. 

Happy testing! 

learn more about Playwright features

Author’s Bio:

As CEO of TestLeaf, I’m dedicated to transforming software testing by empowering individuals with real-world skills and advanced technology. With 24+ years in software engineering, I lead our mission to shape local talent into global software professionals. Join us in redefining the future of test engineering and making a lasting impact in the tech world.

Babu Manickam

CEO – Testleaf