Generating tests with codegen

- [Instructor] One of the most useful tools that Playwright offers when getting started with your first test is the Code Gen tool. This is short for Code Generator. This tool will help us give a headstart by recording locators that we interact with to build out our first test from scratch against the website that we're testing against. To run the Code Gen tool, you can run the command MPX space Playwright, space Code Gen. So let's go ahead and run that. (keyboard clacking) Upon hitting enter, you'll notice two windows pop up. You've got the Playwright inspector. This is going to be where all of our code is generated to. And you've got the Chrome browser over here. This is where we're going to be browsing to the webpage. So let's go ahead and put in the address bar, our PracticeSoftwareTesting.com URL. We're going to browse to it and for our first test, we are going to go ahead and record what a sign in flow would look like for the first customer. So let's go ahead and click sign in. Let's click our email. We're going to type in customer@practicesoftwaretesting.com. The password, it's going to be welcome01. We're going to click login and notice each time we interacted with the webpage, we have code that is generated for us. Now this isn't quite a test yet, in my opinion. We're doing a bunch of actions on the page, but we are not making any assertions. So to make an assertion, we're going to go find this little AB. This is going to let us assert on text. I'm going to click it. I'm going to go find some text that I want to assert on. So I could choose Jane Doe. I could choose my account. Maybe we'll do both. I'll choose Jane Doe first. We're going to assert that the element contains the text, and let's also go ahead and just validate that my account is on the screen as well. And you can see the code is being generated over here. Now let's take a look at this code a little deeper. But before we just get done, I want to copy this code. So I should be able to click this button, should copy the code to the clipboard. I'm going to go to my test folder. We're going to create a new file. We're going to call it login.spec.TS, and we're just going to paste that code in this file. I'm going to go ahead and save it. Also want to go ahead and run this just to make sure everything is working properly. So one way to do that would be clicking on the testing icon and finding the test. Right now is just named test. Let's go ahead and name this to login test. Or you can just click this green button here next to the test and we'll ensure that everything passes. All right, so the test ran. The test passed. I'm going to go ahead and unclick this show browser, so in the future that will not be popping up on me. Let's just run it one more time. Everything looks good, it passed. So I'm going to go ahead and commit this code to our repository and congratulations. We just completed our first test. Now the Code Gen tool is still running in the background. You can either close it up here or you can hit control or command C at the terminal, and that will close the windows for us. One other thing to note before we save and commit this is we will need to clean this up a bit. So right now we are visiting the site. We are clicking sign in, that's needed. Page locator clicking email. I don't think we need to click the email. I think we can just fill it. So I'm going to take off the click of the email and I'm also going to take off the click of the password field, and we're just going to fill those instead of clicking. All right, I think everything's good. Let's just run it one more time to make sure everything's passing. All right. You'll also notice in this video there are locators that are created with this data-test attribute. This is something we're going to be covering in the next videos as we look at different ways we can build locators for our tests from scratch.