Performing a Simple Click

In our previous lesson, we explored how to open a webpage and validate its title using Playwright and TypeScript. But title isn't a typical property to test in a project, and it was taught just to get you acquainted with the environment. A more practical use case is to test the contents of the page. Building on that foundation, we will now move to another essential action in web automation: performing a simple click action. This lesson will teach you how to automate user interactions such as clicking buttons or links, which are crucial for navigating through web interfaces.

In this lesson, you will learn how to:

1. Perform a simple click action on a webpage element.
2. Validate the result of your click action.

Here's a glimpse of what we'll be doing:

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

test('simple click action', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await page.click('text=Sign In');
  expect(await page.url()).toContain('/login');
});

In the above code, we're instructing Playwright to open a webpage at http://localhost:3000, simulate a click on an element that contains the text Sign In, and then validate that the page URL has changed to include /login.

Mastering click actions is vital because most user interactions on the web involve some form of clicking. From submitting forms to navigating between pages and opening dropdowns, click actions are everywhere. Knowing how to automate these interactions makes it possible to thoroughly test web applications and ensure that they behave as expected.

By learning this, you'll gain the skills required to automate more complex navigation and interaction patterns, significantly expanding your capabilities in web automation.

Excited to dive in? Let's start practicing and see what we can achieve together!