Writing a happy-path test

Instead of a competition to see who thinks or writes more test cases, it is important to think carefully and implement the most important test case first, the essential one, which, if not passing, does not meet the primary needs of the software users.

In the TAT CSC application, such a test case is the happy path: the user fills in all the mandatory fields with valid data, submits the form, and sees the success message.

Let's implement it.

Commands overview 📖

Below are some Playwright APIs that may be useful during the exercises.

import { test, expect } from '@playwright/test'

Every spec file starts by importing Playwright's test function (used to declare test cases and hooks) and expect (used to write assertions) from the test runner.

Syntax:

import { test, expect } from '@playwright/test'

test.describe

Groups related test cases under a shared title, which keeps the suite organized and the report easier to read.

Syntax:

test.describe(title, () => { /* tests */ })

Example:

test.describe('TAT CSC form', () => {
  // hooks and tests go here
})

test.beforeEach

Registers a hook that runs before each test in its scope. It is ideal for setup steps every test shares, such as navigating to the page under test.

Syntax:

test.beforeEach(async ({ page }) => { /* ... */ })

Example:

test.beforeEach(async ({ page }) => {
  await page.goto('/index.html')
})

test

Declares a single test case. It receives a title and an async callback, and Playwright injects its fixtures (such as page) as the callback's argument.

Syntax:

test(title, async ({ page }) => { /* ... */ })

Example:

test('successfully submits the form', async ({ page }) => {
  // arrange, act, and assert here
})

page.goto

Navigates the page to a URL and waits for it to load.

Syntax:

await page.goto(url)

Example:

// With baseURL configured, a relative path is enough
await page.goto('/index.html')

page.getByLabel

Locates a form control by the text of its associated <label>. This is a user-facing, accessible way to find inputs.

Syntax:

page.getByLabel(text)

Example:

await page.getByLabel('First name')

.fill

Clears an input or text area and types the provided value into it.

Syntax:

await locator.fill(value)

Example:

await page.getByLabel('Email').fill('john.doe@example.com')

page.getByRole

Locates an element by its ARIA role and accessible name. Great for buttons.

Syntax:

page.getByRole(role, { name })

Example:

await page.getByRole('button', { name: 'Send' })

.click

Simulates a user clicking on an element.

Syntax:

await locator.click()

Example:

await page.getByRole('button', { name: 'Send' }).click()

expect (web-first assertions)

Creates an assertion that automatically waits and retries until it passes or times out.

Syntax:

await expect(locator).toBeVisible()
await expect(locator).toHaveText(text)

Example:

// Assert the element is visible
await expect(page.locator('.success')).toBeVisible()

// Assert the exact text rendered inside the element
await expect(page.locator('.success')).toHaveText('Message successfully sent.')

Suggested content 📚 and documentation links 🔗

• Writing tests
• Locators
• Actions
• Assertions

Exercise 🎯

Create a spec file (for example, tests/tat-csc.spec.ts). Wrap your tests in a test.describe block (for example, titled TAT CSC form), and use a test.beforeEach hook to navigate to the application before each test. Then, inside a test, fill in the four mandatory fields (First name, Last name, Email, and "How can we help you?") with valid data, click the Send button, and assert that the success message with the text "Message successfully sent." becomes visible.

🙊 Remember to import test and expect from @playwright/test, and that the success message is rendered inside aspan with the class success, and that it disappears after a few seconds, so assert on its visibility right after submitting.

Run the test with npx playwright test to make sure your implementation works.

Show the world what you learned 🌎

To show your professional network what you learned in this lesson, post the following on LinkedIn.

I am taking the "Basics of Web Testing with Playwright" course by @Walmyr Lima e Silva Filho at the @Talking About Testing school, and I just implemented my first end-to-end test, which ensures the main functionality of the application works: filling out a form and submitting it successfully. I learned how to use Playwright locators, actions, and web-first assertions. #TalkingAboutTesting #TATSchool #BasicsOfWebTestingWithPlaywright #Playwright #TestAutomation

👨‍🏫 Remember to tag me in your post. Here is my LinkedIn profile.