How to Run a Playwright Test in Chrome Browser: Step-by-Step Guide

How to Run a Playwright Test in Chrome Browser

Playwright has emerged as a leading tool in the field of web automation and browser testing. In this tutorial, I will show you how to run a test case using Playwright in Chrome browser, a must-have skill for anyone diving into automated testing. We’ll walk through a simple login test using a demo web app: https://opensource-demo.orangehrmlive.com/web/index.php/auth/login.

Why Use Playwright for Browser Automation?

Playwright is a powerful, open-source automation framework from Microsoft. It allows you to test web applications across all major browsers (Chromium, Firefox, WebKit), making it highly versatile. When you want to automate browser interactions such as form filling, button clicks, and more complex user flows, Playwright excels with its fast and reliable execution.

Getting Started with Playwright and Chrome

To begin automating with Playwright, you need to ensure you have Node.js installed on your machine. Then, proceed to install Playwright via npm by running the following command:

npm install @playwright/test

To install Chrome browser (Chromium) for Playwright, run:

npx playwright install chromium

This sets up Playwright to use Chromium, the engine behind Google Chrome, for automated testing.

Writing the Playwright Script for Chrome Browser

Let’s create a Playwright test to automate logging into the OrangeHRM demo website. Below is a simple script that will open the site in Chrome, fill in login credentials, and verify a successful login by checking the visibility of the dashboard.

Create a JavaScript file named loginTest.js and add the following code:

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

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();

  // Navigate to OrangeHRM Demo Login Page
  await page.goto('https://opensource-demo.orangehrmlive.com/web/index.php/auth/login');

  // Fill in username and password fields
  await page.fill('input[name="username"]', 'Admin');
  await page.fill('input[name="password"]', 'admin123');

  // Click the login button
  await page.click('button[type="submit"]');

  // Wait for navigation after login
  await page.waitForNavigation();

  // Check if the dashboard is visible to confirm successful login
  const dashboardVisible = await page.isVisible('h6:has-text("Dashboard")');

  if (dashboardVisible) {
    console.log('Login successful, Dashboard is visible!');
  } else {
    console.log('Login failed.');
  }

  // Close the browser
  await browser.close();
})();
    

Key Steps Explained:

• Launch Chrome (Chromium): We launch a Chromium browser instance (which powers Chrome) in non-headless mode (headless: false) so we can observe the actions.
• Navigate to the Test URL: The script navigates to OrangeHRM demo.
• Login Automation: We use page.fill() to input the username and password, and page.click() to simulate clicking the login button.
• Login Verification: The script checks if the dashboard is visible after login using page.isVisible().

Running the Playwright Test Case in Chrome

Once you’ve written the test, run it with:

node loginTest.js

This will launch the Chrome browser, perform the login automation, and print whether the login was successful or not.

Playwright Advantages for Browser Automation

Using Playwright for automated browser testing offers numerous benefits:

• Cross-browser testing: Playwright supports Chrome, Firefox, and WebKit.
• Fast execution: Playwright offers fast browser automation that can scale with your needs.
• Reliable tests: You can assert UI elements, handle navigation, and control browser settings easily, ensuring tests are robust and reliable.

Conclusion

By leveraging Playwright with Google Chrome, you can easily automate complex web interactions, speeding up your testing workflows. This Playwright login test example showcases how you can quickly get started with browser automation. Feel free to build on this example and tailor it to your specific testing needs.

If you enjoyed this guide, be sure to check out more of my content for additional Playwright tutorials and insights into automated testing.