Playwright Alternative

End-to-end testing is an integral part of determining if the application under test is ready for mass consumption. With this type of testing, you verify if different parts of the application are working together to produce the expected results. Among the many tools available in the market for end-to-end testing, Playwright is gaining popularity. Although, due to its limitations and the emergence of other technological trends, you might find an alternative, such as testRigor, to deliver a better value. Let’s take a look at both of these tools below.

Writing tests with Playwright

With Playwright, you can easily write actions in the form of steps and then assert the state against expectations.There is no need to wait for anything before performing an action. Playwright automatically waits for many of the actionability checks to pass prior to performing each action. Actions include navigations and interactions.

Playwright includes test assertions in the form of expect function. To make an assertion, you need to call expect(value) and choose a matcher that reflects the expectation. There are many generic matchers like toEqual, toContain, and toBeTruthy that can be used to assert any conditions.

Additionally, you can use test hooks to declare a group of tests and test.beforeEach and test.afterEach which are executed before and after each test respectively. Other hooks include the test.beforeAll and test.afterAll which are executed once per worker before/after all tests.

Here's an example of a test using Playwright for checking products on Amazon.

const { test, expect } = require('@playwright/test');
test('Amazon search for headphones on PC page', async ({ page }) => {

  await page.goto('https://www.amazon.com/');
  
  await page.click('.nav-logo-link');
  
  // Check that page contains "Amazon Devices" below "Get to Know Us"
  const getToKnowUsText = await page.$eval('a[href="/amazon-devices/b/?ie=UTF8&node=2102313011"]', (el) => el.textContent);
  expect(getToKnowUsText).toContain('Amazon Devices');
  
  await page.click('a[href="/amazon-devices/b/?ie=UTF8&node=2102313011"]');
  
  // Check that page contains "Echo & Alexa"
  const echoAlexaText = await page.$eval('a[href="/Echo-Devices/b/?ie=UTF8&node=9818047011"]', (el) => el.textContent);
  expect(echoAlexaText).toContain('Echo & Alexa');
  
  await page.click('a[href="/Echo-Devices/b/?ie=UTF8&node=9818047011"]');
  
  // Check that page contains "Alexa App" below "Alexa Resources"
  const alexaResourcesText = await page.$eval('.s-navigation-indent-1 a[href="/gp/help/customer/display.html/?nodeId=GJDWQ6WJ6VYJX9XN"]', (el) => el.textContent);
  expect(alexaResourcesText).toContain('Alexa Resources');
  const alexaAppText = await page.$eval('.s-navigation-indent-2 a[href="/gp/help/customer/display.html/?nodeId=GDKGDTXNTH7A5BQA"]', (el) => el.textContent);
  expect(alexaAppText).toContain('Alexa App');
  
  await page.click('.s-navigation-indent-2 a[href="/gp/help/customer/display.html/?nodeId=GDKGDTXNTH7A5BQA"]');
  
  // Check that page contains "Search Amazon"
  const searchAmazonText = await page.$eval('label[for="GLUXSearchInput"]', (el) => el.textContent);
  expect(searchAmazonText).toContain('Search Amazon');
  
  await page.fill('#GLUXSearchInput', 'headphones');
  await page.press('#GLUXSearchInput', 'Enter');
  await page.waitForNavigation();
  await page.click('a[href*="headphones"]');
  await page.evaluate(() => window.scrollBy(0, window.innerHeight / 2));
  
  // Grab value from "Sony ZX Series Wired On-Ear Headphones, Black MDR-ZX110" and save it as "headphone1"
  const headphone1Text = await page.$eval('a[href*="MDR-ZX110"] span', (el) => el.textContent);
  const headphone1 = headphone1Text.trim();
  
  // Grab value from "Beats Solo3 Wireless On-Ear Headphones"
  const headphone2 = await page.innerText('text=Beats Solo3 Wireless On-Ear Headphones - Apple W1 Headphone Chip, Class 1 Bluetooth, 40 Hours of Listening Time, Built-in Microphone - Black (Latest Model)');
  await page.evaluate(() => window.scrollBy(0, -window.innerHeight/2));
  
  await page.fill('input[type="search"]', 'pc');
  await Promise.all([
    page.waitForNavigation(),
    page.click('text=pc')
  ]);
  
  // Check that page does not contain "headphone1"
  const hasHeadphone1 = await page.isVisible(`text=${headphone1}`);
  expect(hasHeadphone1).toBeFalsy();
  
  // Check that page does not contain "headphone2"
  const hasHeadphone2 = await page.isVisible(`text=${headphone2}`);
  expect(hasHeadphone2).toBeFalsy();
})