Test annotations
Your task
👨💼 In this one, your task is to use Annotations in Playwright to improve the developer experience of your test suite. You will focus on two types of annotations today: tags and custom annotations. Please follow the steps below.
Tags
Let's start with the tags. You can add a tag to any test case by providing a test details object as the second argument of your test case (after the test name but before the test callback) and specifying the
tag property in that object:test(
'displays a user greeting',
{
tag: ['@user'],
},
async ({ page }) => {},
)
🐨 Equipped with this knowledge, head to the following test cases and mark them with their respective tags:
| Test file | Test case | Tags |
|---|---|---|
| "creates a new note" | @homepage | |
| "creates a new note" | @user, @notes | |
| "displays the user profile page" | @user, @profile | |
| "saves changes to the name of the user" | @user, @profile |
@user, @dashboard, etc).🐨 Once you've marked those tests with their tags, try running a subset of your test suite based on a tag. For example, to run only the test cases realted to the user profile, include its tag
@profile as the value of the --grep option of Playwright's CLI:npx playwright test --grep=@profile
npx playwright show-report).Custom annotations
Now, it's time for you to improve the failure experience of your tests. One of the ways to do that is by including additional data next to individual test cases. That data is referred to as "annotations" in Playwright. Each annotation allows you to define its
type and description, and is defined in the test details object as well:test(
'displays a user greeting',
{
annotation: {
type: 'issue',
description: 'https://epicweb.dev/',
},
},
async ({ page }) => {},
)
Let's use annotations in action!
🐨 First, run the test cases for the homepage, using the
@homepage tag you've defined earlier. Once you do that, you will see a test case failing:Error: Timed out 5000ms waiting for expect(locator).toBeVisible()
Locator: getByRole('heading', { name: 'The Most Epic of Stacks' })
Expected: visible
Received: <element(s) not found>
Call log:
- Expect "toBeVisible" with timeout 5000ms
- waiting for getByRole('heading', { name: 'The Most Epic of Stacks' })
6 | await expect(
7 | page.getByRole('heading', { name: 'The Most Epic of Stacks' }),
> 8 | ).toBeVisible()
| ^
9 | })
10 |It looks like it cannot find the given element on the page! Actually, I think I've had this issue before. Yeah, definitely, there's even a GitHub issue about it.
🐨 Before you fix the problem, annotate this failing test, providing
issue as the annotation's type and the GitHub issue URL I've linked above as the annotation's description.🐨 Try re-running the same test again. If you preview the test report via
npx playwright show-report, you will now spot your custom annotation right above the test result!🐨 Read through the GitHub issue and see if you can find any recommendations on how to fix this failing test. Once you do, fix it and have it passing again.