Getting Started with Your First Playwright Test Case

Automation testing has become a vital part of modern software development, enabling teams to deliver high-quality web applications with confidence. One of the emerging tools in the automation space is Playwright, a robust framework developed by Microsoft. Playwright allows you to automate browsers such as Chromium, Firefox, and WebKit, making it easier to test complex web applications across multiple platforms.

In this guide, we'll walk you through creating and running your first test case using Playwright. Whether you're a beginner or an experienced developer, this article will help you get started with ease.

Why Choose Playwright?

Before diving into writing your first test case, let's explore why Playwright is an excellent choice for web automation:

• Cross-browser Testing: Playwright supports multiple browser engines (Chromium, Firefox, WebKit), allowing you to write a single test that works across different browsers.
• Modern Web Support: It handles modern web features such as single-page applications (SPAs), dynamic content, and even WebSockets with ease.
• Automatic Waiting: Playwright automatically waits for elements to be available before interacting with them, reducing the need for manual waits in your test scripts.
• Fast Parallel Execution: It supports running tests in parallel, speeding up the overall execution time.

Step 1: Install Node.js

Playwright requires Node.js to run. If you haven't already installed Node.js, follow these steps:

• Go to the Node.js website.
• Download and install the latest Long Term Support (LTS) version.
• Verify the installation by running the following commands in your terminal or command prompt:

  node -v
  npm -v

Both commands should return version numbers indicating that Node.js and npm are installed successfully.

Step 2: Set Up a New Project

Now that you have Node.js installed, let's set up a new project for Playwright.

• Open your terminal and create a new project folder:

  mkdir playwright-example
  cd playwright-example

• Initialize the project by running the following command. This will create a package.json file, which is essential for managing dependencies:

  npm init -y

Step 3: Install Playwright

Now that the project is set up, you can install Playwright using npm. Run the following command to install Playwright along with its browser binaries:

npm install playwright
npx playwright install

This will download and install the necessary files for Chromium, Firefox, and WebKit browsers.

Step 4: Write Your First Playwright Test

With Playwright installed, you’re ready to write your first test case.

• Create a new folder named tests inside your project directory to store your test files:

  mkdir tests

• Inside the tests folder, create a new test file called example.spec.js:

  touch tests/example.spec.js

• Open this file in your favorite code editor and add the following test code:

  const { chromium } = require('playwright');
  
  (async () => {
     // Launch a Chromium browser instance
     const browser = await chromium.launch();
     const page = await browser.newPage();
     
     // Navigate to the website
     await page.goto('https://example.com');
  
     // Capture a screenshot
     await page.screenshot({ path: 'example.png' });
  
     // Close the browser
     await browser.close();
  })();

Step 5: Run Your Test

To execute your test, run the following command in your terminal:

node tests/example.spec.js

This command will launch a Chromium browser, navigate to the example.com website, take a screenshot, and close the browser. A screenshot file named example.png will be saved in your project directory.

Step 6: Expand Your Test Case

Now that you have successfully run your first Playwright test, you can expand it to include more steps, such as:

• Interacting with web elements (e.g., clicking buttons, entering text).
• Asserting conditions (e.g., checking if an element exists or verifying text on the page).
• Running tests in different browsers (Chromium, Firefox, WebKit).

Here’s an example of a more advanced test case that interacts with a search input field and verifies the result:

const { chromium } = require('playwright');

(async () => {
   const browser = await chromium.launch();
   const page = await browser.newPage();

   // Go to Google
   await page.goto('https://www.google.com');

   // Type 'Playwright' into the search box
   await page.fill('input[name="q"]', 'Playwright');

   // Press Enter to search
   await page.press('input[name="q"]', 'Enter');

   // Wait for results to load
   await page.waitForSelector('h3');

   // Verify if the first result contains the word 'Playwright'
   const firstResult = await page.textContent('h3');
   console.log('First result: ', firstResult);

   await browser.close();
})();

Step 7: Parallelism and Browser Choices

Playwright makes it easy to run tests across different browsers and in parallel to speed up your testing. For example, you can add a configuration file (playwright.config.js) to run tests in multiple browsers:

module.exports = {
   projects: [
       { name: 'Chromium', use: { browserName: 'chromium' } },
       { name: 'Firefox', use: { browserName: 'firefox' } },
       { name: 'WebKit', use: { browserName: 'webkit' } },
   ],
};

This setup allows you to run tests in parallel across different browser environments using a single command:

npx playwright test

Conclusion

Congratulations! You’ve now successfully installed Playwright, set up your first test case, and learned how to run it. Playwright’s simplicity, combined with its powerful features like automatic waiting and cross-browser testing, makes it an excellent tool for both beginners and experienced developers. By integrating Playwright into your workflow, you can automate repetitive testing tasks, catch bugs early, and ensure that your web application works flawlessly across all major browsers.

As you continue to explore Playwright, try incorporating more advanced features such as network interception, page interactions, and mobile device emulation to extend the power of your automated tests.