Tests Structure | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Getting Started with Playwright
Instructor: Artem Bondar
Lesson Summary
In this lesson, we continue working with Playwright and begin using a practice application that was cloned from GitHub. The main objectives of this lesson include: Installing Playwright into the application Making initial configurations Organizing the test structure Writing the first lines of code Understanding the concept of promises and the await keyword Setting Up Playwright To install Playwright, run the following command: npm init playwright@latest --force After installation, we will see the playwright.config and package.json files updated. We will create a new test file named firsttest.spec.ts in the test folder. Writing Tests To write tests, we need to import the test method from the Playwright library: import { test } from 'playwright-test'; Each test can accept two parameters: the name of the test and the test method itself, using the arrow function syntax. Grouping Tests Tests can be grouped into suites using test.describe , allowing for separate contexts and preconditions for different sets of tests. Using Promises and Await When using Playwright methods that return a promise, it is crucial to use the await keyword to avoid race conditions: await page.goto('http://localhost:4200'); Remember, await can only be used in asynchronous functions, so always declare your function with async . Summary In this lesson, we: Installed Playwright Created a test file Wrote our first test Learned about the importance of using await with promise-returning methods Thank you for joining, and see you in the next lesson!
Video Transcript
And we continue working with the Playwright, and starting from this lesson, you will need to use a Playwright practice app application that we cloned in the previous section, in the GitHub section. So we will install Playwright into this application, we will make initial configuration, and I will show you how you can organize the test structure of the framework. Also, we will write the first three lines of code, and I will show you a concept of the promises. So you need to understand what the promise is about, and when to use keyword await, and when not to use this keyword. So, let's get into it. And we continue the class in the Project PwPractice app, we will start writing our first tests here. So before I begin, I will quickly install Playwright into this project, npm init Playwright at latest. It looks like I need to pass a dash dash force command as well. Yes, yes, true. Yes, and everything is installed. We can see that Playwright config is showed up, package.json. If we scroll this down, the new library added into the package.json, everything looks good. So we have test folder, we have test examples folder, we can delete test examples folder, we don't need it in our project, move to trash, and we don't need examples test.spec, we can delete it as well, move to trash. And under the test folder, we create a new file and we call it firsttest.spec.ts. Okay, so we starting from scratch. This is the empty file and how to write tests in our empty file. So the first thing that we need to do, we need to import test method from the Playwright library. How to do that? So first import, then we provide the name of the method, which is test, and we import it from Playwright test. That's it. Then we call this method, which call test. And this is the pretty much body of our test. Test can accept two parameters. And this is the name of the test. Let's call it the first test. And the first parameter after comma will be an actual test method. And then we use a JavaScript fat arrow syntax to open the function body. So that's it. This is the most minimum structure of the how test is constructed. So you can have as many tests as you want inside of this file and just providing different names to these files. So how can you group your tests as well? So you can group your tests into kind of test suites as part of the same test file using a keyword describe. So you use test.describe. Then you can provide any description of your test suite. So for example, test suite one, then comma, and then put the function here. And then inside of the test.describe, you can put the little tests. And you can create two test suites like that, for example. And the context of these two test suites will be separated. So for example, you can put other some precondition for these three tests and a different precondition for these three tests. And the context between them will be completely separated. So let me remove this. And in order to start writing the test, we need to pass as the argument into our test function, the playwright page fixture. Page is one of the fixtures of the playwright. We have browser fixture, page fixture. And the page represents pretty much is the blank page of the browser. So think about it. In order to run the test, we need to open a new page of the browser. And then we can do with this page whatever we want. And then we called this argument, which we pass in our function. We call page and then dot. And inside of the page, we have a lot of different methods that playwright provides us in order to pretty much use this framework. So the very basic methods to open the web page is go to. And we provide the URL to our application. In our example, it is localhost 4200. So let me run the application, npm start. And I provide the base URL into our page. And let me try to run it, but it's gonna fail and I will show you why. So I'm trying to run this test. And it's kind of loaded, but we have an error over here. The browser has been closed. So what actually happened here? If we hover over the go to method, we see that the return type of the go to method is a promise. So what is promise in a few words? Promise is a type of the JavaScript method that can return two types of the results. It can be successful result or unsuccessful result. When result is successful, promise considered as resolved and provide the result of the execution. If it was not successful, promise returned the error message. Also, one of the definition of promise is that it has a timeout of the execution. So promise can wait for the successful execution. And if we try to run the command like that, what happens? PlayWrite or JavaScript, it just doesn't wait for the promise to be executed and trying to run forward. And we face with what's called a race condition. So for us in order for this code to work, we need promise to wait until it's going to be resolved. And we need to use a keyword await. But we see that some red squiggles over here and something doesn't like. So await expressions can be used only in a synchronous function. That's why when we use await function always should be asynchronous. So we type a keyword async. That's it. And now we resolved all the issues. And if we try to run this one more time, everything works. Application opened and we don't have any error messages. So one more thing. This is very important concept about the PlayWrite. For those PlayWrite methods that have a promise response type, you need to use keyword await in front of this command. Because some of the PlayWrite commands are not promises. They have a different return types. And in those examples, you do not need to use await in front of this command. And this is a very often mistake for the beginners when, you know, you're typing your code and it doesn't work for some reason. You cannot understand why. And it's simply because you forgot to put await somewhere in your code. So keep in mind, keep an eye on what commands are you using. Are they promises or not? And if they are, keep the word await in front of the command execution. All right, and let's just make a couple of steps inside of our application to prepare it for the next lesson. So let me run it one more time. This is the browser. And let's say we want to click on the forms and navigate to the form layouts. So it will open this page with the forms layouts with a nice input fields where we're gonna practice. So we can navigate here just by text. And I'm gonna use await page get by text forms. And I want to perform a click. And again, await page get by text. And the second text after that is form layouts. And I want to click on that as well. And let's see how the first test would work for us. And perfectly worked fine. First, we open the page, then we click on the forms, then on the forms layout and forms layout page is opened. So let's quickly summarize what we did in this lesson. We installed the PlayWrite framework into our new project. We created a new test file, firsttest.spec.ts. And we set up a first test. Each test method have import of the page fixture that gives us access to all PlayWrite methods that we use to interact with the framework. And the most important rule to remember. For PlayWrite commands that return a promise type, you need to use await keyword in front of this command when you want to execute it in order to avoid issues and race conditions. All right, thank you guys and see you in the next lesson.