Welcome to the first lesson of our course on automated testing with Playwright and TypeScript. In this lesson, we’ll start with the basics: opening a web page and validating its title. This is a crucial step, as it helps us confirm that our automation scripts can successfully navigate to the desired web page.

In this lesson, we will cover how to use Playwright to open a page and validate its title. We will do this using TypeScript, a powerful language that helps catch errors early through its strong typing. Specifically, you will learn how to:

1. Use Playwright to automate browser actions.
2. Navigate to a specific URL.
3. Capture and validate the page title.

Here's a short code snippet to give you an idea:

TypeScript
Copy to clipboard
1import { test, expect } from '@playwright/test';
2
3test('open and validate a page', async ({ page }) => {
4  await page.goto('http://localhost:3000');
5  const pageTitle = await page.title();
6  expect(pageTitle).toBe("BookStore");
7});

In the above code, we are instructing Playwright to open a web page running on http://localhost:3000 and then validate that the title of the page is "BookStore."

1. Importing Modules:

   TypeScript
   Copy to clipboard
   1import { test, expect } from '@playwright/test';

   In TypeScript, certain commands and features are built-in and can be used directly. However, for specialized functionalities like automated testing, we rely on additional libraries. Importing allows us to bring in these specialized features. In this case, we import test and expect from the @playwright/test module. The test function lets us define and organize test cases, while expect provides a set of assertions to validate test conditions.

2. Defining a Test:

   TypeScript
   Copy to clipboard
   1test('open and validate a page', async ({ page }) => {

   Here, we define a test with a descriptive name 'open and validate a page'. The async keyword indicates that the function contains asynchronous operations. The page object provided by Playwright represents a new browser tab.

3. Navigating to the URL:

   TypeScript
   Copy to clipboard
   1await page.goto('http://localhost:3000');

   This command instructs the browser to navigate to http://localhost:3000, which is the local address where your application is expected to be running during tests. In local development, apps are commonly run on port 3000.

4. Capturing and Validating the Page Title:

   TypeScript
   Copy to clipboard
   1const pageTitle = await page.title();
   2expect(pageTitle).toBe("BookStore");

   We use the title() method to get the title of the page and store it in the pageTitle variable. The expect function asserts that the title is "BookStore".

When you run the test, you can expect the following output:

Copy to clipboard
1Running 1 test using 1 worker
2
3A[1/1] [chromium] › example.spec.ts:3:5 › open and validate a page
4A  1 passed (5.0s)

This output means that 1 test was executed using 1 worker, and the test ran successfully, taking 5.0 seconds to complete. A worker in Playwright is a process that runs tests in parallel. When you have multiple tests, they can be distributed across several workers to improve execution speed and efficiency.

The test is executed on the chromium browser. It is possible to change the list of browsers in playwright.config.ts.

If the test fails because the title is not as expected, you will receive an error message similar to this:

Copy to clipboard
1Running 1 test using 1 worker
2
3A[1/1] [chromium] › example.spec.ts:3:5 › open and validate a page
4A  1 failed
5
6  1) [chromium] › example.spec.ts:3:5 › open and validate a page
7       Error: expect(received).toBe(expected)
8
9       Expected: "BookStore"
10       Received: "Unexpected Title"
11       at /path/to/your/test/example.spec.ts:6:21

This output indicates that the test failed because the expected title "BookStore" did not match the actual title "Unexpected Title". The error message provides the source of the discrepancy, helping you quickly identify and address issues in your test or the application.

Opening and validating a page is foundational in web automation. Imagine you are automating a login process, checking the content of a webpage, or verifying navigation links. Before you can perform any of these tasks, you need to ensure that you can successfully open the web page and validate its content.

Understanding these basics will make it easier for you to grasp more complex tasks later in the course. Plus, mastering these skills will lay the groundwork for virtually all web automation projects you undertake.

Let's dive in and start practicing together!