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:
- Use
Playwright
to automate browser actions. - Navigate to a specific URL.
- Capture and validate the page title.
Here's a short code snippet to give you an idea:
TypeScript1import { 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."
-
Importing Modules:
TypeScript1import { 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
andexpect
from the@playwright/test
module. Thetest
function lets us define and organize test cases, whileexpect
provides a set of assertions to validate test conditions. -
Defining a Test:
TypeScript1test('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. Thepage
object provided by Playwright represents a new browser tab. -
Navigating to the URL:
TypeScript1await 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 port3000
. -
Capturing and Validating the Page Title:
TypeScript1const pageTitle = await page.title(); 2expect(pageTitle).toBe("BookStore");
We use the
title()
method to get the title of the page and store it in thepageTitle
variable. Theexpect
function asserts that the title is "BookStore".
When you run the test, you can expect the following output:
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:
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!