Record a Test (Quick Test Creation)

The playwright tools for Visual Studio Code have an excellent code generator and test recorder built in. And while it might not be something that you use when you have an established test suite, when starting out, it's a great way to explore playwright and bootstrap a simple test. Within Visual Studio Code we have the playwright testing panel open on the left and at the bottom of the panel we have a few options for automatically generating test code. One thing that I want to point out is that when you want to record new tests, make sure that you have the show browser checkbox selected to record a new test. We press the record new button

and this will open up the browser and playwright will start monitoring this particular browser instance to generate test code. Based on our interactions with this browser, let's carry out a few simple interactions we navigate to local host 3000. Next we select the main to-Do input write in some text. For example, buy milk followed by the enter key to add the to-do and then check the to-do to market as done. Once we are happy with the interactions that we've carried out, we can close the browser to look at the generated code. You can see that the code

that the test runner generates is quite idiomatic. It is using page.co two to open up our application for the new two input. It is accessing it using the placeholder and then carrying out the interactions of the click fill followed by the enter key and then marking the to-Do as done by using a data dash test attribute. Let's run this generated test to see it in action. And of course it does exactly what we expected. Another option that we have is record at cursor. So at the end of the test we press record at cursor at then carry out additional actions. For example, add another to do like buy bread

and then do the same thing for this particular to do that is a market as done. And this results in more code statements generated for us at the end of the test that we previously had. Another feature offered by the playwright tools is pick locator. So let's say that we want to assert that the footer is visible. We can add a new await expect such that the page footer should be visible. Now we don't know which particular locator we should use for the footer. So we can use the pick locator feature and this will jump us through the browser allowing us to find the item that we want to select. And there right will automatically generate a allocator

for us that it thinks is appropriate for this particular element. We can accept the suggestion by pressing the enter key, which copies it to the clipboard. So let's continue writing our test. We use page to get by text, which was generated by playwright and then expect that it should be visible. Now of course there is a lot more that we can do with this particular test, but we've covered everything that we need to cover about the test generator. So let's go ahead and execute this test. And as you can see, it passes with flying colors, even comes with the standalone command line tool that can generate tests for you so

that you can then continue working on that test in any IDE that you might have to start the standalone code generator. We execute the command and PX playwright and then pass in code gen as a command line argument. Code Gen also takes arguments of its own and one of them is Minus O for an output file path. And here we are passing test slash code generat spector ts. This will start the playwright inspector in code gen mode and we can see that on the right hand side. And on the left hand side we see a browser that is being controlled by playwright and any interactions

with this browser will result in code generated for us with the playwright inspector. So let's run through our favorite simple scenario. Visit local host 3000, then focus on the main to do input. Next we provide a message, for example, buy milk followed by the enter key. And then we mark this to do as done. You can see that all of these steps have been converted into code with a standalone code gen command. And this generated test is exactly the same as we got from Visual Studio Code. If you are happy with the test, we can stop the recording by exiting the browser

and we are taken back to the terminal. And now we can execute the generated test using NPX playwright test. And we are running it in headed mode and don't blink 'cause it's going to execute extremely fast and no surprised it blazed through that automation as expected. And this standalone code gen command is great if you want to generate a simple standalone automation, but if you want to work on this test further, you can then open it up in any IDE for example, visual to your code and start hacking away, making it truly your own.