Playwright Typescript Framework + AI

Code that will be developed during this lecture for reference.

You may need to install Playwright using Yarn or NPM. Here is the official guide on the commands to do it instead of using PNPM.

Hey! Let's understand what is automatically generated, why we had some passed tests, and all the details of that.
This might sound as a boring lecture, but it is not. It is the BASELINE of everything. Pay attention please.

After checking this lecture, students will be able to map web elements by accessibility, CSS and XPath

Let's modify the original structure of the framework, and let's add the page object folder + the login skeleton.

Link to the official docs for a deep read of what is POM.

In this lecture I try to explain the students how a general page object is created. This is the only time in the course where I go that slow with a page object, I just need them to understand how I build it step by step.

Let's finish the Page Object with its last behavior (at least for now), and then let's think in a creative way of instantiate the login page.

Fixture is an essential feature of Playwright. Please read it, it is important.

What is a fixture? Playwright has an in-built fixture, and we did not know until now :P

You can merge test fixtures from multiple files or modules

It is time to implement what we just built :D 

If you use VSCode, you can run, record, and debug your tests using a VSCode extension. You can discover it in this bonus lecture.

Let's run our test, analyze the report, and explore the UI Mode.

Code that will be developed during this lecture for reference.

Let's manage the secrets in a separate .env file and make sure git ignores it.

Let's use the env variables in our test :)

Code that will be developed during this lecture for reference.

In this lecture, I show you the code structure for the products page. It is similar to the login page, so I won't spend so much time explaining something we already know.

The header page object is where the user can find specific products, click on the cart, sign out, etc. Let's create the base page object.

Let's reuse fixtures to share the instantiation of our page objects across the framework. I want to make sure you understand the process.

A couple of changes to make sure everything makes sense for us.

Is it possible to reuse the page objects somehow?

This is a solution a co-worker and a friend of mine(Marco) imagined to manage shared E2E workflows to avoid code duplication, and I want to share this brilliant solution with you.

This lecture is the key to having a scalable framework. Understand that you can use multiple fixtures, merge them, and maybe you want to use the same helper for your test scenarios.

Code that will be developed during this lecture for reference.

The next step is to map the cart class. Let's do it together.

Let's map all the elements related to the checkout page.

Let's add the page objects to our framework structure.

In this lecture, I show you the final version of our test.

Code that will be developed during this lecture for reference.

Playwright can enable the local web server automatically. Let's learn how to do it.

Code that will be developed during this lecture for reference.

The payment information is sensitive, so in a real-world scenario, you’d likely avoid storing it this way. However, general test data can safely be managed using this approach.

Code that will be developed during this lecture for reference.

Let’s add another spec file so we have multiple test files to run in our CI pipeline. This will also serve as a foundation for the upcoming AI section

Your repository needs to supply the required secrets, just like we do when creating a local .env file. Let’s set that up.

How to run Playwright in CI? This is the lecture for you.

Let's see how our CI execution looks and the job logs.

Learn about API testing, Cucumber, and Accessibility as complements of this course. See you there!

Code that will be developed during this lecture for reference.

Let's write down all the knowledge and framework structure learned in this course to ask for help from AI.

Link to check the Playwright MCP server.

Let's learn how to configure the Playwright MCP Server & the Chrome extension

Let's use AI to generate a test :)