Hidden Gems of Playwright

The main tools for writing UI tests are: browser, IDE and testing framework documentation.

Hidden Gems of Playwright

maxFailures

Docs

const config: PlaywrightTestConfig = {
maxFailures: 10,
};
const config: PlaywrightTestConfig = {
maxFailures: process.env.CI ? 10 : 0,
};
Example of env.CI = true in a build configuration in TeamCity
Example of env.CI = true in a build configuration in TeamCity

Custom Expect Messages

Docs

await test('Should have proper page title', async () => {
await expect(page, 'Should have "Home" in title').toHaveTitle(/Home/);
});
Example of custom expect error message in HTML report
Example of custom expect error message in HTML report

test.slow

Docs

test('Test name', async ({ page }) => {
test.slow();
});

expect.soft

Docs

await test.step('Should have proper page title', async () => {
await expect.soft(page, 'Should have "Home" in title').toHaveTitle(/Home/);
});
Example of HTML report with failed soft assertion — all test steps are passed, but the entire test was marked as failed
Example of HTML report with failed soft assertion — all test steps are passed, but the entire test was marked as failed

test.step

Docs

test.describe('Home page toolbar', async () => {
test('Should have proper page title', async ( => {…});
test('Should have toolbar', async () => {…});
test('Should have proper toolbar title', async () => {…});
});
test('Home page toolbar', async ({ page }) => {
await test.step('Should have proper page title', async () => {…});
await test.step('Should have toolbar', async () => {…});
await test.step('Should have proper toolbar title', async () => {…});
});
  • Steps are hidden in console reporters (list, line and dot), but can be shown in the «Test Steps» section in HTML reporter. For some engineers this may be acceptable — no extra data in reporter, more steps and actions could be included in one test, — but for others this can be considered as less informative reports and non-atomic tests.
  • Recorded videos and traces in case of failure are recorded within the test() — that means you can playback a full test with all steps. This is highly convenient for debugging. This debugging method (through videos and traces) is almost impossible for atomic tests inside describes, because artifacts would be extremely short and will not contain data about previous test’s «steps».
Example of HTML report of identical tests: one with describe and child tests, another with child steps
Example of HTML report of identical tests: one with describe and child tests, another with child steps

test.fixme

Docs

test('Should have proper page title', async () => {
test.fixme();
await expect(page, 'Should have "Home" in title').toHaveTitle(/Home/);
});
Example of skipped test in a list reporter
Example of skipped test in a list reporter

Explore Selectors in Playwright Inspector

Docs

Example of exploring selector
Example of exploring selector

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Andrey Enin

Quality assurance engineer: I’m testing web applications, APIs and doing automation testing.