In this article, we will explore some of the critical aspects of test automation by comparing two prominent tools: Selenium and Playwright.

Selenium, a widely adopted tool, has a good hold in the test automation community for years.

On the other hand, Playwright is a newer, emerging tool that promises to bring a futuristic approach to test automation.

Our focus will be on understanding the technical differences between these tools, examining how they operate under the hood. Rather than simply determining which tool is better, we aim to provide insights into their respective architectures, capabilities, and unique features.

This comparison will help you understand the strengths and potential use cases for each tool, aiding you in making an informed decision based on your specific testing needs.

Architecture: Playwright vs Selenium

We can see how the respective APIs interact with browsers and how communication happens.

Playwright:

Selenium:

Instantiation

It provides a test runner and include ‘tests and assertions’ out of the box. | ‘TestNG’ is a testing framework for Java that provides functionalities similar to those of @playwright/test. This also supports fixtures[annotations], parallelisation, assertions, test configurations. The thing is the setup and integration is little bit complex when compared to Playwright. |

Playwright:

First approach:

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

(async () => {
    // Launch a new browser instance
    const browser = await chromium.launch({ headless: false });

    // Create a new browser context
    const context = await browser.newContext();

    // Open a new page/tab
    const page = await context.newPage();

    await page.goto('https://www.example.com');
    await page.click('selector');
    await browser.close();
})();

Second approach:

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

test.describe('My Test Suite', () => {

    test('Basic Navigation Test', async ({ page }) => {

              //here we can directly goto the url, sending the 'page' as an argument
               await page.goto('https://www.example.com');
               await expect(page).toHaveTitle('Example Domain');
               await page.click('selector');
               await page.fill('input#search', 'Playwright');

            });
});

Selenium:

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class SeleniumExample {
    public static void main(String[] args) {
        // Set the path to the browser driver
        System.setProperty("webdriver.chrome.driver", "/path/to/chromedriver");

        // Instantiate a WebDriver (ChromeDriver in this case)
        WebDriver driver = new ChromeDriver();
        driver.get("https://www.example.com");
        driver.findElement(By.id("element_id")).click();
        driver.quit();
    }
}

Synchronization-Waits

Here we can see how the tools ensure that the browser and page elements are in the expected state before performing further actions or assertions

Playwright:

• In Playwright, automatic waits are built into the framework to help manage the synchronization of actions with the state of the webpage

• Playwright automatically waits for elements to be ready before performing actions like clicking, typing, or asserting

• Assertions with auto-waiting are a powerful feature that helps ensure your tests are robust and reliable. These assertions automatically retry until the expected condition is met or a timeout is reached

// Navigate to a page and wait for it to load
  await page.goto('http://example.com');
  // Wait for an element to be visible and click it
  await page.click('button#submit');

//assertion with auto wait
await expect(page.locator('h1')).toHaveText('Example Domain');

//explicit or manual wait
await page.waitForTimeout(3000); // Wait for 3 seconds

Selenium:

Implicit Wait:

• Applies to all elements in the WebDriver instance. Once set, it will be used for the lifetime of the WebDriver object.

• It’s used to instruct the WebDriver to wait for a certain period when trying to locate an element before throwing a NoSuchElementException.

  Explicit Wait:

• Applies only to the specific element(s) and condition(s) for which it is set. It needs to be specified each time for each condition.

• It’s used to wait for a specific condition to occur before proceeding further in the code execution. Commonly used conditions include element visibility, element clickability, and presence of an element.

WebDriver driver = new ChromeDriver();

        // Implicit wait
        driver.manage().timeouts().implicitlyWait(10, TimeUnit.SECONDS);

        driver.get("https://example.com");

//Explicit wait
        WebDriverWait wait = new WebDriverWait(driver, 10);
        WebElement element = wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("element_id")));

Supporting browsers: : Playwright vs Selenium

Playwright:

Playwright can run your tests in multiple browsers and configurations by setting up projects in the config.

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    /* Test against desktop browsers */
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
    /* Test against mobile viewports. */
    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },
    {
name: 'Mobile Safari',
      use: { ...devices['iPhone 12'] },
    },
    /* Test against branded browsers. */
    {
      name: 'Google Chrome',
      use: { ...devices['Desktop Chrome'], channel: 'chrome' }, // or 'chrome-beta'
    },
    {
      name: 'Microsoft Edge',
      use: { ...devices['Desktop Edge'], channel: 'msedge' }, // or 'msedge-dev'
    },
  ],
});

Selenium:

Launching different browsers using the respective webDrivers.

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class ChromeTest {
    public static void main(String[] args) {
        // Set the path to the ChromeDriver executable
        System.setProperty("webdriver.chrome.driver", "/path/to/chromedriver");

        // Initialize the ChromeDriver
        WebDriver driver = new ChromeDriver();

        // Navigate to a website
        driver.get("https://www.example.com");

        // Perform actions
        // ...

        // Close the browser
        driver.quit();
    }
}

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.firefox.FirefoxDriver;

public class FirefoxTest {
    public static void main(String[] args) {
        // Set the path to the GeckoDriver executable
        System.setProperty("webdriver.gecko.driver", "/path/to/geckodriver");

        // Initialize the FirefoxDriver
        WebDriver driver = new FirefoxDriver();

        // Navigate to a website
        driver.get("https://www.example.com");

        // Perform actions
        // ...

        // Close the browser
        driver.quit();
    }
}

Parallelization

Playwright:

-By default, Playwright runs test files in parallel
-In order to achieve even greater parallelization, you can further scale Playwright test execution by running tests on multiple machines simultaneously. We call this mode of operation “sharding”

playwright.dev/docs/test-sharding#sharding-..

Selenium:

In Selenium, test sharding is typically achieved through various strategies depending on the testing framework and setup you are using:

TestNG:

<suite name="Suite" parallel="methods" thread-count="4">
  <test name="Test">
    <classes>
      <class name="com.example.YourTestClass"/>
    </classes>
  </test>
</suite>

Selenium Grid:’

{
  "capabilities": [
    {
      "browserName": "chrome",
      "maxInstances": 5
    },
    {
      "browserName": "firefox",
      "maxInstances": 5
    }
  ],
  "maxSession": 10
}

Types of testing supported

Supporting languages

Performance: Selenium vs Playwright

Dependencies

Community support

Conclusion

And finally both Playwright and Selenium offer compelling advantages. Playwright, with its modern architecture and native support for multiple browsers contexts, waiting, reporting, debugging etc represents a robust solution for engineers looking for speed and simplicity in managing concurrent tests across various environments.

Selenium, on the other hand, stands as the time-tested giant with extensive browser support and a vast community, making it a versatile choice for complex, long-term projects.

Source: This blog was originally published at testgrid.io/blog/playwright-vs-selenium