4 Tips for Software Testing with Playwright

My software development team is currently using Playwright as the end-to-end testing framework for our TypeScript/Svelte project. Although Playwright boasts about its resilience and “no flaky tests”, in my experience this isn’t always the case. If you are hitting a wall, try these three tips, plus one organizational bonus.

Enabling retries for failing tests

Sometimes, Playwright tests pick up issues that don’t pop up during manual testing. This could indicate tests are failing due to flakiness, meaning tests that fail initially but pass when re-run. If this is the case, you may want to increase the number of retries per test. By default, Playwright will run all tests once. Retries can be enabled in your Playwright config file.

import type { PlaywrightTestConfig } from "@playwright/test";
const config: PlaywrightTestConfig = {
  // ...
  retries: 3,
}

Migrating from .type

The method .type is deprecated and should be replaced by .fill unless you have event listeners on the page that are only triggered by typing into an input. We had been using .type in multiple cases that relied on key-press events.  You need to use .pressSequentially instead for those cases. pressSequentially focuses the element, and then sends a key-down, key-press, and key-up event for each character in the text while .fill only sets the value of an input field.

waitForTimeout

Although I don’t recommend using it for all situations, waitForTimeout can be a good last-resort option if consistently you get test failures caused by tests running before everything is loaded on the page.

await page.waitForTimeout(500);

Bonus Organizational Tip: Grouping Tests

You can group tests inside of describe blocks to organize those testing similar actions together. This can make it easier to find tests and troubleshoot specific pages.

test.describe('Login page', {
  tag: '@login’,
}, () => {
  test('Incorrect password validation', async ({ page }) => {
    // ...
  });
  test('Successful login', async ({ page }) => {
    // ...
  });
});

You can also run a group of tests with a specific tag from the terminal. It’s a convenient alternative to adding .only throughout your test files.

npx playwright test --grep @login

If you’ve been trying to resolve errors that occur inconsistently, I hope these tips come in handy.