Annotations And Test Suites in Playwright

Annotations

We can apply annotations to a single test or a set of tests. Annotations can be conditional, which means they only use them if the condition is true. Annotations may be affected by test fixtures. Multiple annotations on the same test, perhaps in various settings, are possible.

Playwright Test offers test annotations for dealing with failures, flakiness, skip, focus, and tag tests:

test.skip(title, testFunction): It flags the test as irrelevant. Playwright Test does not do such a test. Use this annotation when the test is not relevant in a certain setup.

test.skip('skip this test', async ({ page }) => {
  // This test is not run
});

test.fail([condition, description]): The test is marked as failed. Playwright Test will execute this test to confirm that it fails. Playwright Test will complain if the test does not fail.

test('not yet ready', async ({ page }) => {
  test.fail();
  // ...
});

test.fixme(title, testFunction): The test is marked as failed. Contrary to the fail annotation, the Playwright Test will not perform this test. When the test runs slowly or crashes, use fixme.

test.fixme('test to be fixed', async ({ page }) => {
  // ...
});

test.slow([condition, description]): It classifies the test as sluggish and triples the test timeout.

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

test.only(title, testFunction): You can narrow the scope of various tests. Only the focused tests are executed when there are focused tests.

test.only('focus this test', async ({ page }) => {
  // Run only focused tests in the entire project.
});

test.skip(condition, description): Depending on the situation, you may be able to bypass certain tests.

test.skip('skip this test', async ({ page }) => {
  // This test is not run
});
test('skip this test', async ({ page, browserName }) => {
  test.skip(browserName === 'firefox', 'Still working on it');
  //it will skip if the condition true
});

For example, you can run a group of tests just in Chromium by passing a callback.

test.describe('chromium only', () => {
  test.skip(({ browserName }) => browserName !== 'chromium', 'Chromium only!');
  test.beforeAll(async () => {
    // This hook is only run in Chromium.
  });
  test('test 1', async ({ page }) => {
    // This test is only run in Chromium.
  });
  test('test 2', async ({ page }) => {
    // This test is only run in Chromium.
  });
});

To avoid running beforeEach hooks, you can put annotations in the hook itself.

test.beforeEach(async ({ page, isMobile }) => {
  test.fixme(isMobile, 'Settings page does not work in mobile yet');
  await page.goto('http://localhost:3000/settings');
});
test('user profile', async ({ page }) => {
  await page.click('text=My Profile');
  // ...
});

Grouping and Organising Test

Some features, like a test suite, are unavailable to the Playwright. However, you may group tests to give them a logical name or scope before/after hooks to the group.

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

test.describe('two tests', () => {
  test('one', async ({ page }) => {
    // ...
  });

  test('two', async ({ page }) => {
    // ...
  });
});

You may wish to designate your tests as @fast or @slow and execute the tests with the appropriate tag. For this, we propose using the — grep and — grep-invert command-line flags:

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

test('Test login page @fast @regression', async ({ page }) => {
  // ...
});

test('Test full report @slow', async ({ page }) => {
  // ...
});

You will then be able to run only that test:

npx playwright test --grep @fast

It prevents us from keeping to same codes in different files or another folder structure for the suite.