TubeSum
โ˜ฐ

Playwright Automation Tutorial: Step-by-Step Guide & Transcript

Playwrite Automation Tutorial | HowMulti-Agent Automation with AI | Simplilearn

0h 38m video Published Aug 1, 2026 Transcribed Aug 8, 2026 S Simplilearn
Beginner 10 min read For: Complete beginners with no prior automation testing or programming experience who want to learn web automation testing with Playwright.
AI Trust Score 45/100
๐Ÿšซ Clickbait / Waste of Time

"Title promises 'Multi-Agent Automation with AI' but the video is a basic Playwright tutorial with no AI or multi-agent content."

AI Summary

This tutorial introduces Playwright, a free, open-source automation testing framework by Microsoft, and guides beginners through its installation, core features, and practical use. The video covers setting up Playwright via command line and VS Code extension, running tests in headed and headless modes, and building a mini project to automate a to-do app, including generating HTML reports and capturing screenshots/videos on failure.

[00:08]
Why automate testing

Manual testing is insufficient for modern web apps; automation catches bugs faster, increases release confidence, and improves user experience.

[00:40]
What is Playwright

Playwright is a powerful automation testing framework by Microsoft for testing web applications across browsers, automating real user actions, and building reliable end-to-end tests.

[03:08]
Playwright overview

Playwright is free, open-source, and created by Microsoft. It automates web browser applications, e.g., writing a script to test a login page automatically.

[03:55]
Supported applications and languages

Playwright supports web, mobile web, mobile apps, and API testing. It supports JavaScript/TypeScript (Node.js), Java, Python, and .NET (C#).

[04:35]
Browser support

Playwright supports Chromium-based browsers (Chrome, Edge, Brave), WebKit (Safari, iOS), and Firefox, enabling cross-browser testing with one framework.

[07:12]
Key features

Features include cross-browser testing, auto-waiting, multi-language support, parallel test execution, built-in debugging tools (screenshots, videos, traces, reports), and codegen for automatic test generation.

[08:53]
Prerequisites and installation

Requires Node.js and an IDE (VS Code recommended). Install Playwright via command 'npm init playwright@latest' or through VS Code extension.

[18:01]
Running tests and commands

Commands include 'npx playwright test' (headless), 'npx playwright test --headed', 'npx playwright test --project=chromium', 'npx playwright test --debug', and 'npx playwright show-report'.

[20:41]
Mini project: to-do app automation

Automates a to-do MVC app: add three todos, mark one as completed, delete, add assertions, generate HTML report, and capture screenshots/videos on failure.

[27:24]
Recording tests with codegen

Use 'npx playwright codegen <URL>' to record actions and auto-generate test scripts, which can be copied into a test file.

[31:14]
Running and debugging tests

Run tests with 'npx playwright test', view results in HTML report, fix errors (e.g., commenting out problematic lines), and re-run until all pass.

[34:41]
Slowing down and configuring

Add 'launchOptions: { slowMo: 300 }' in playwright.config.js to slow down execution. Configure browser, screenshot, and video settings in the config file.

[36:50]
Interactive UI mode

Run 'npx playwright test --ui' to open an interactive mode for debugging and exploring tests.

Playwright is a beginner-friendly, powerful tool for automating web application testing. The best way to improve is to practice by adding more test cases, assertions, and testing different user flows.

Mentioned in this Video

Tutorial Checklist

1 08:53 Install Node.js and verify with 'npm -v' and 'node -v'.
2 10:49 Install an IDE (VS Code recommended).
3 11:48 Create a project folder and open it in VS Code.
4 12:55 Run 'npm init playwright@latest' in the terminal to install Playwright.
5 13:35 Choose JavaScript or TypeScript, set test directory to 'tests', and install browsers.
6 15:35 Verify installation with 'playwright -v'.
7 20:41 Create a new test file (e.g., todo.spec.js) in the tests folder.
8 27:24 Use 'npx playwright codegen <URL>' to record actions and generate test script.
9 30:27 Copy the generated script into the test file and save.
10 31:14 Run tests with 'npx playwright test' and fix any failures.
11 32:28 View HTML report with 'npx playwright show-report'.
12 34:41 Configure slowMo, browser, screenshot, and video settings in playwright.config.js.

Study Flashcards (9)

What is Playwright?

easy Click to reveal answer

A free, open-source automation testing framework created by Microsoft for testing web applications.

03:08

Which programming languages does Playwright support?

easy Click to reveal answer

JavaScript/TypeScript (Node.js), Java, Python, and .NET (C#).

04:21

Which browsers does Playwright support?

easy Click to reveal answer

Chromium-based (Chrome, Edge, Brave), WebKit (Safari, iOS), and Firefox.

04:35

What is the command to install Playwright?

medium Click to reveal answer

npm init playwright@latest

12:55

What does 'headless mode' mean in Playwright?

medium Click to reveal answer

Tests run in the backend without a visible browser window.

18:14

How do you run tests in headed mode?

medium Click to reveal answer

Use the command 'npx playwright test --headed'.

19:54

What is the purpose of 'npx playwright codegen'?

medium Click to reveal answer

It records user actions in the browser and auto-generates test code.

27:24

How do you generate an HTML report?

medium Click to reveal answer

Run 'npx playwright show-report' after tests.

32:28

How do you slow down test execution?

hard Click to reveal answer

Add 'launchOptions: { slowMo: 300 }' in playwright.config.js.

34:41

๐Ÿ’ก Key Takeaways

๐Ÿ“Š

Playwright is free and open-source

Establishes the tool's accessibility and credibility for beginners.

03:08
๐Ÿ’ก

Cross-browser support

Highlights a key advantage: testing across multiple browsers with one framework.

04:35
๐Ÿ”ง

Auto-waiting reduces flaky tests

Explains a core feature that improves test reliability.

07:12
๐Ÿ”ง

Codegen for automatic test generation

Shows how beginners can create tests without writing code manually.

27:24
๐Ÿ”ง

Configuration for screenshots and videos

Demonstrates how to capture failure evidence efficiently.

34:41

[00:08] wait. They leave. A button that doesn't work, a form that doesn't submit, or a checkout page that fails can directly affect trust, traffic, and revenue. That's why modern teams don't rely only on manual testing anymore. They automate

[00:25] repetitive testing tasks so bugs can be caught faster, releases can happen with more confidence and users can get a smoother experience. And [clears throat] this is where Playright comes in. Playright is a powerful automation

[00:40] testing framework that helps you test web applications across different browsers, automate real user actions, and build reliable end-to-end test cases. In this playright automation tutorial, we are going to learn playrite

[00:56] step by step from scratch. So even if you are a complete beginner, do not worry. You do not need any brand knowledge of automation testing, programming or coding. We will start from the basics. Understand what

[01:10] playright is, features of playright, how to install, why it is so useful and then we will build a mini project to see how you can use it to automate real world web applications testing step by step. So if you want to learn a testing tool

[01:25] that is modern, beginner friendly and widely used in real world web automation projects, then this playright tutorial is a right place to start. Before we move on, let me share something very exciting with you all guys. If you want

[01:39] to build a real skills in generative AI, check out the advanced executive program in applied generative AI by IITM Praert in collaboration with Microsoft Azure and simply learn. This programs helps you learn concepts like LLM, prompt

[01:54] engineering, rag, agentic, AI, MCP frameworks and multi- aent systems. You will get hands-on exposures to the tools like chat GPT, Azure AI Studio, Microsoft Copilot, OpenAI, Hugging Face, Langchain, DALI and much more. And do

[02:10] you know about the best part that you don't just learn theory? You will work on real world projects and build practical geni applications. You will also get live online classes, industry experts guidance, integrated labs and

[02:25] master classes from IITM and IIT Aluminina. Learners can earn a program completion certification from IIT EM Praver Technologies Foundation. So if you're serious about moving from just using AI tools to actually building with

[02:39] them, this program is great place to start. So check it out. You will find the link in the description box below. Before we dive into the magic of automation, here's a quick quiz question for you. And the question is, what is

[02:51] playright used for? And your options are A video editing, option B web automation testing, option C graphic design or the option D photo editing. Let me know your let's see who will give the right answer first. So without any further ado, let's

[03:08] begin by first understanding what playright actually is and why so many teams are using it for automation testing today. So playright is a free and open-source automation testing framework created by Microsoft. It is

[03:22] mainly used to automate web browser applications. So in simple words, playright helps us test websites automatically without doing every action manually again and again. For example, if you want to test whether a login page

[03:39] is working properly or not, you can write a playright script that automatically opens the browser, enters the username and password, clicks the login button and checks whether the user is successfully logged in or not. Now

[03:55] let us look at types of applications and programming languages supported by playright. So, Playright supports web browser applications, mobile browser applications, mobile applications and API testing. This means

[04:07] you can use Playright not only to test websites on desktop browsers but also to websites on desktop browsers but also to test mobile web pages and backend APIs. Playright supports multiple programming languages as well. So, you can use

[04:21] languages as well. So, you can use JavaScript or TypeScript with Node.js. You can also use Java, Python and net languages like C#. So depending upon your background or project requirement, you can choose any of the language that

[04:35] suits best for you. Now if we talk about browser support then playright supports all the modern browser engines. It supports chromiumbased browsers like Google Chrome, Microsoft Edge, Open Brave. It also supports WebKit browsers

[04:51] which include Safari and iOS browsers. Along with that it supports Firefox browsers as well. This is one of the biggest advantages of Playright because with one framework we can test our application across multiple browsers. So

[05:06] now let's look what playright is practically and for this first we need to visit the official website of playright that is playright dot. So let me search here playright and here is the official website of playright. Click on

[05:21] this. Now here you can visit the official websites of playrite that shows the documentation supported like it is recommended to watch this documentation

[05:33] read everything it will help you run playrite very smoothly go through the entire documentations before actually beginning with playrite so you will have a basic idea and a clear idea so automation will become easier for you to

[05:47] automation will become easier for you to understand here we have MCP CLI APIs that is application programming interface. And this particular button shows that playright can be worked upon different programming languages like

[05:59] different programming languages like NodeJS, Python, Java and Net. And right now we are working playright with NodeJS. Like in my example in this tutorial I'm working with NodeJS. So from this you can select different

[06:11] implementation whether it is NodeJS, Python, Java or so. So let's suppose I have clicked Node.js and then I have clicked this GitHub icon. So it will take me to the implementation through node.js and the github file of the

[06:27] node.js and the github file of the entire program. So here this page often shows how you can test the playright the command to test it means that particular command will install playright in your device. Then playright cla if you want

[06:40] to install playright using command line then this is the particular command. Then about mcps this is the command. Then it is built for testing for AI agents and it has also the powerful tools and as we have discussed recently

[06:57] that it supports many browsers like here we can see all the four browsers are being supported by playright and it is chosen by most of the companies for their open-source project. So it is worth exploring too. Now we will see at

[07:12] the features of playride. So, Playride comes with many powerful features that make web testing easier and faster. So, first of all, it supports cross browser testing, which means we can test the same application on Chromium, Firefox

[07:28] and WebKit. This helps us check whether our website works properly across different browsers. It also has auto waiting. So playride automatically waits for elements to be ready before clicking, typing or checking them. This

[07:44] reduces flexi test failures. Now coming to the next feature, playright supports multiple programming languages as we have discussed above that like JavaScript, TypeScript, Python, Net and many other languages. So you can

[07:59] choose any of the languages like with which you are comfortable with. Now the another feature is parallel test execution where multiple tests can run at the same time. So the advantage of this is it saves time especially when

[08:12] this is it saves time especially when the test suit becomes large. It also provides built-in debugging tools like screenshots, videos, traces and reports and we will look at all of these in our coming tutorial. These helps testers

[08:26] easily understand why a test fail and what is the reason behind everything. And last but not the least, Playright also has codeg gen which can generate test code automatically while you perform actions in the browser. This is

[08:40] very helpful for beginners who are learning automation testing. So in simple words, Playright is fast, reliable, beginner friendly and useful reliable, beginner friendly and useful for testing modern web app. Now let's

[08:53] look at the installation of playright. So before we install playright let us quickly understand the prerequisites for our system to run playrite smoothly. So the first thing we need is node.j because we are going to install playrite

[09:07] because we are going to install playrite using mpm. Once node dot is installed using mpm. Once node dot is installed will also be available automatically. So now let's first install nodejs in our device. So for this visit your command

[09:21] device. So for this visit your command prompt and here write npm - just to check whether the NodeJS was already installed in our system or not. So let's press enter. So it has given me a particular version like for current user

[09:36] when I'm recording this tutorial. So the version is 11.12.1. So it means NodeJS has been successfully installed. We can also perform the installed. We can also perform the command as node version. So test both

[09:50] the commands to check so that our playright can run smoothly. So both the tools are available in my device because I can here see the version numbers of both these tools. So if you're not getting the version then install the

[10:04] NodeJS from the official website. So just go on your web browser type here and here you can visit the official website of NodeJS and here you can download it. So if you want to download

[10:18] it for Windows or Mac OS or Linux, you can choose any of the device from here and install and download by following all the steps that has been listed in all the steps that has been listed in the website. So let's get back to our

[10:33] playright automation. So in my case, it is already installed. So I'm not installing it. Now our second prerequisite for this is an IDE. So IDE is integrated development environment. And for this tutorial I will be using

[10:49] Visual Studio Code because it is simple, beginner friendly and widely used by developers. So you can use any other uh IDE but in my case in this tutorial we are using VS code. So make sure it is installed properly in your system. So VS

[11:06] code has been installed in my device but in in your case if it is not installed then visit the official website of visual studio code and download it from there. So this is the homepage of VS code. So once these both are ready in

[11:21] playright. There are two ways to install playright. First using commands and second is using VS code extension. So here you can see we can install our

[11:33] playright using this command that is npm init playright at the rate latest in our CLI and another way is to install through VS code extensions and don't worry we'll see both the installation one by one. So first we'll see how we

[11:48] can install playright using commands m package. So for this the first step is to create a folder and open the folder in the VS code. So let's go. I will

[12:00] create the folder for my project in my drive which is mainly C drive. So here I will create a new folder and here I will give it a name as automation and inside

[12:13] automation I will create a folder called write automation. So the folder is all ready. So now we can open this folder in our VS code. For this go to the VS code.

[12:25] our VS code. For this go to the VS code. Here you can select open folder and here you can go to the drive. Here you can go to automation and then select playright automation and then select this folder. This particular step will open our

[12:39] playrite automation folder here. Tick on this yes I trust the authors. See here our project has been opened successfully here. Now go on to the terminal. So here click on new terminal. So here you can see we are inside playright automation

[12:55] folder. So to install playright run this particular command on your terminal and the command to run and to install playright is this npm in it playright

[13:07] latest and this latest will install the latest version of playright in your device. Press enter. I'm back to back writing wrong spelling so forgive me I'm

[13:19] writing clear. So here we have given the command as net playright at latest. This will install playright in our device. Press enter. So now it is asking do you want to use typescript of javascript and as of now for this project I'm using

[13:35] javascript. So click on this where to put your end to end test. So yes we want to put it into test folder only. So keep it as tests. Give it as true. So do you

[13:47] want to install playright browsers via npx playright install? So I'll give true. So it is installing all the browsers, test cases and everything that is required. So let's wait for it. Right now it is installing downloading

[14:02] browsers. So this command has installed everything that is required and we can see all the dependency that has been installed here. So npx playright test that will run the project on particular browser then test example that will run

[14:19] browser then test example that will run a specific file and so much other dependencies that is required for us to create our project. So here you can even see it has created the test folder and here it has created the example specs.js

[14:36] file. All the test of this project will be run here. All our test will go inside this particular folder. So now let's talk about package.json file. So here talk about package.json file. So here you can see package.json file. Here you

[14:51] can drop it down. So this is a very important file that manages the node project. So you can see this is our package.json file and here it shows all the libraries added in the project. So here now we will see our configuration

[15:07] file which is playright.config.json. JS visit this folder. So here you will JS visit this folder. So here you will see we have JS it means right now we are using JavaScript. If you want to use TypeScript you can use PS. So this is a

[15:21] configuration file and it is very important file that we will make all the configuration settings here whatever which is required in our project. Now if you want to verify whether our playright is being installed properly or not we

[15:35] is being installed properly or not we can give this following command playrite - v. This will check the particular version of playright. So yeah the version is on our screen that is 1.1.12.1

[15:48] it means playright has been successfully installed in our device. So this was the installation through command line. So if you want to check the playright command options you can give a particular command like this just see on the screen

[16:01] command like this just see on the screen it is npm playright - help and press it is npm playright - help and press enter. So it will give the list of all the commands that is being used here. So you can see all the commands for

[16:15] screenshots for traces and everything. So this is how you can install playright using command line. Now we will look at the second option that is using VS code extension. So for this as well you can create a new folder give it as

[16:30] automation extension gith. extension gith. So here then new folder and here you can So here then new folder and here you can give the name automation exe. Now open

[16:42] this particular folder in VS code. Go to your visual studio code from here. Then your visual studio code from here. Then from here file open folder and open your folder which we have created in C drive called automation ECX and select this

[16:59] and open this. This will open this folder in our device. Follow along. Yes I trust the authors and here to install playright through extension you need to go to this button that is extensions button. Here you will find all the

[17:14] extensions that are listed. So here type playride and install this particular playride extension that is being provided by Microsoft. Click on install. It is particularly installing and it is being successfully installed. So this is

[17:29] the another system how you can install playrite in your device using extension systems. So now after installing go on view then go on command pallet then click on play. So click on install playrite. So here we have just installed

[17:45] the playright using the extension that was already provided by VS code. So right now we have seen both the ways through which you can install playrite in your device through command line and through extension. Now let's go forward.

[18:01] Now you can easily start working with playright. Now moving forward let's see how we can run test and other commands to perform different other functions in playright. So these are the following commands and the description it means

[18:14] what these command does usually. So if you want to run the test in all the browsers in headless mode. Headless mode means whatever the automation will be run by a playright it will not be physically present in any of the

[18:29] browser. It will run in the back end. Nothing will be shown to you on the browser. It means running in headless mode. And if you want to uh run in headed mode then it means everything will be visible physically on any of the

[18:43] browsers that we have studied. So here the next command is npx playright test 1 dot it means it will run the specific test file. Next coming with npx test file. Next coming with npx playright test one dot spec.js

[18:57] 2.pspec.js. It means runs the files specified which all the files are being specified here. It will run these. The next is npx playright test one two. It means runs files that have one or two in their file

[19:10] name. Whatever you will give here after test like your name or anything it means that particular file will be run. It means you have given the name of that means you have given the name of that file. Next command is npx playright

[19:23] test. So if you will give any title here it will run the following command or I can say run the following test with the with that specific title only. Next is playright text project is equals to chromium. It means we have studied like

[19:39] three web browsers. Right? But this particular command will run the specific browser only like we are running different tests. So it will run that test on the particular browser. Now hy - headed means runs the test in headed

[19:54] mode means whatever it is running it is clearly visible to us on the screen which means physically present in the web browser. Then hyphen -y debug means it will debug all the tests given. Then test example.spec.js

[20:10] - debug means it will debug that particular specific file only. The above command used to debug all the tests. But this particular command will debug the specific test file. So you can take the screenshot of this slide. If you want to

[20:25] like remember this, I will highly recommend you to take the screenshot, read it, learn it and practice it. Now we have seen all the basic commands to run the playright and we have also seen how we can install the playright. So now

[20:41] we will build a small real world project that is todo application and we will try to automate that application. The application is already being constructed already being formed designed. We just need to pick that project already

[20:57] already prepared project and we will try to automate that project and here we are using the project called to. So here we will automate this app using playrite which will run on VS code. So first of all let us look at the demo of the todo

[21:13] application which we are going to automate. So here we will go to todo MVC automate. So here we will go to todo MVC app site and we have already built app which we'll try to automate. So now we'll click on react and we'll try to

[21:30] see what exactly is this todo app. So here I'm giving just a demo of this app which will so here you can add anything like go on a walk or buy clothes swim

[21:46] anything whatever task you need to do we prepare our to-do list right in the same way now once the task is done you can take this task so it will be marked as

[21:59] completed so here you'll see all the items Then the active items means which is still pending which is swim and then the completed items. And if you want to clear completed you can clear the items as well. So here in all you can see only

[22:13] the one item which is pending which is swim. So this is the overall demo of to-do app. We all know like uh all the computer science students or the basic students also know how to do apps actually works. So this was the demo of

[22:27] actually works. So this was the demo of our app which we'll use to automate. So here we'll going to automate some of the test cases. So we'll go step by step about this automation. So first we'll install the playright which we have

[22:41] already done. Then we'll create the project folder which also we have already done. Then we will create end to end test run it locally both in headed and headless mode. Then we'll capture the screenshots and video on the failure

[22:56] and then we will also view its HTML report. So now we already know the tools which is required for this project is NodeJS and playrite and the editor which

[23:08] is VS code which we have already seen earlier initially in this tutorial. Now let's look at the goal of this project. So first we will install playrite and create tests. Then we will automate adding three todos mark one as completed

[23:25] and delete. Then we will generate playright HTML report for the task we have done. And then we will open it. Then we will add assertions and check failure in the report. If any of the failures occurs then we will take the

[23:38] screen and the video on failure. Only on the failure we'll take the screenshots and I'll show you the reasons as well. So this all we are going to do in our So this all we are going to do in our mini project which is automation of todo

[23:51] app. So now we will start by creating a mini project and for this we will uh make a folder in our uh any of the drives and then we'll try to open it in the VS code and we'll program the project. Whatever concept we learned

[24:05] before we will try to apply all these concepts here. So for this go to your drive section. I usually make folders in C drive. So here I'm giving the name as

[24:17] todo automation or todo list anything. then press enter. Then from here try to then press enter. Then from here try to open this folder in VS code. So go back local C and to-do list and select the folder. So now your project is being

[24:33] opened in your VS code and we'll try to automate this already already generated project. From here we'll go to terminal and see we are into our project. So and see we are into our project. So we'll run the command npm run- y means

[24:49] yes to all the questions it will be asking and it will directly initiating and running this command. And as we have already installed playright so uh we need not uh run it again but it is recommended to run the command to

[25:04] install playright and then start your project. So install the dependencies for a particular folder and not for entire file at once. So that's why we are installing playright again for this project and we'll type npm init

[25:17] playright. So it is asking us some questions. We'll select these test cases true and it is installing all the required library. Now we will run this required library. Now we will run this following command npm init run- y uh

[25:32] erase this erase this. So it has given us the several commands like npx playright test which is used to run end to end test. Then npx playright test hyphen fn UI that will help you start interactive UI mode. Then project is

[25:47] equals to chromium means we can specify the particular browser where we want to run these files. Then npx playright test example it means it will run the specific file. Then fn debug means it will run the test in debug mode. Then

[26:01] code gen means it will autogenerate tests. So we'll see everything in the coming project. So now we will try to create the test scripts and for this can see all the folders have been

[26:14] generated under todo list folder which includes package.json, playright.config.js, test cases, example.specs.js where we'll be keeping all our test cases. So under this test we'll create a

[26:29] cases. So under this test we'll create a file. We'll click new file todo.spec spec dot and now we are under this file to-do demos where we'll be writing all the test scripts here I have given JS because I am trying to run it in

[26:44] JavaScript you can even give us TS it will like run in test scripts so for this we'll be going to todo MBC app it is a already created app so click on

[26:56] this and we have the app ready here click on react we'll perform all the functions in the todo app created using react. So like we can type as run, play,

[27:10] react. So like we can type as run, play, eat and anything else. Then we can takeick this. So it will come under completed. Active means what is pending and all will contain all these three. So this is the basic functionality of Tudo

[27:24] app. Right? So first of all it is recommended to record the functioning we are doing in this app. So for this go back to your command prompt and here under terminal enter to record write npm play write code gen and then press

[27:42] enter. So this will open the command and it will run the scripts. So we have forgot to give the URL of the app. So try giving URL here. Let's close this and again run this. I'm pressing clear and here I'm giving npx write code gen

[28:01] and the URL of that app. So from here copy this URL go back to your terminal paste here and this will record all the functionalities we are going to do under this app. Now click enter. So our recording is on and it is trying to

[28:15] recording is on and it is trying to record everything. See here we have the script. It means whatever function we'll be doing here, it will be recorded here. be doing here, it will be recorded here. I'll show you how. So here I am typing

[28:28] I'll show you how. So here I am typing run, enter, then play, enter and eat. I have added three task I need to complete in a day. Enter. See as I am pressing enter here the test is being created automatically that run, enter, then

[28:41] play, then enter, then eat, then enter. Now I will tick some of the tasks. See, so now it has created the test accordingly that list item filter which is run and play. You can check here toggle is checked. Now I'll see what all

[28:56] items are active. So test has been updated here. You can check on the right hand side and then I'll click on completed. It will show all the items that are completed. Now you can see from here we can stop the recording which we

[29:10] will not do right now. So this is pick loader. This is assert visibility and I'll show you how we can add the assert visibility. Then this is assert text and assert value and then assert snapshot. So I'll show you the visibility here.

[29:27] This assert visibility assert visibility then this see the visibility has been then this see the visibility has been added here the last line. So expect visibility run to do item towel which is to be visible. So this is how we can add

[29:43] visibility. Then I will show you how to assert a text. Then I'll click on AB then go on run. So to contain text active it has been added. So now from here we can stop the record. Recording is being now stopped. See now you can

[29:59] see all the test cases has been written. Whatever action we have performed in the same order all the test has been inserted here. Then click on test runner. It is already in test runner. But if it is not then go to node.js and

[30:13] testr runner. Then from here you need to copy the entire script. For this go here. This is the copy button I mean copy icon. The entire script has been copied. Now go to your terminal and under this file which we created right

[30:27] todo demo.spect.js. Here you need to copy your entire script. Copy here. Check if any errors been generated. As of now there are no errors. So we have saved whatever we have copied. So here you can see that

[30:42] the test script has been started from the word import. Then all the commands that we have done and this is the URL of our already created to-do app which we use to automate. Then whatever functions we performed it has clicked and entered

[30:58] all the script the way and in the similar order we click the button in that app. Now run this test file. For this we need to press the command nlay write test. This will run this test file and then press enter. So currently it is

[31:14] running nine test using four workers. Four workers means uh in the four browser it will run. Seven test has been run properly. We kit, chromium, firefox and the other browsers it will be taking and we can even specify the browser.

[31:30] I'll show you in the coming tutorial like in the further part of this tutorial. See the report has been generated and it is on our screen. So here we can see the test cases which was passed was six and the test cases which

[31:45] was failed was three. So we'll see what went wrong here and we'll check and then we'll correct it and we'll try to automate it again. So here to do demo

[31:57] time out 3000 minutes. Okay. Okay. Uncheck get by role item. This has this particular line has created the error. So this particular like line created some sort of error. So we have commented it out. Again we have saved it and we

[32:12] have came out and we again run the test. So here again the six test has been passed and three have failed. So all the test cases. So here all the nine test cases has been passed using four workers. It means four browsers. And to

[32:28] see the report command npx playright show report npx playright show. This command is to show the final HTML report. Press enter. See all the

[32:41] test cases has been passed here. Whether we have run the test cases on chromium, Firefox or WebKit. Here we will write to-do list which is the name of our project at the rate and then we will save this particular here. We'll save it

[32:57] whatever changes we have made and then we will run one of the most important command just to show all the automations we have created which is npx playright. So it's should be small test case we'll run this then we will give hyphen headed

[33:15] headed and headless mode we have studied two modes right so we'll be running it in headed mode means our physical browser will be visible to us then hyphen gra and we'll type sanity which we have given above this is very

[33:28] important to give uh and to write sanity under quotes and then press enter so we have given the wrong name which is this is test not text see our app has run whatever the functions we have like performed it on the screen. See, so

[33:43] basically it was really fast, right? So we can even slow it down. I'll show you how to slow this recording down. First of all, if you want to run it on a particular browser, let's suppose it is right now running in the three browsers,

[33:56] right? Which is WebKit, Firefox and Chromium. So let's suppose we want to Chromium. So we'll give this command. We'll write hyphen project is equals to chromium and press enter. So this will run the command only in the

[34:13] one browser. You can see running one test using one worker. Only one worker which will save lot of memory. So it is recommended to choose only one browser whichever you like. Out of the three you can choose any one browser. And by

[34:28] pressing this command as I've shown you earlier you can open your record. I mean I repeat you can open your report now if you want to show the recording in the entire script that we have seen in the screen. If you want to slow it a little

[34:41] down so we need to go to the playright config.js file and here under use we need to give some of the command. So we have to write launch options which we have to write launch options which we have already got this is this write this

[34:55] and give slowmo which we have already received 300 it is milliseconds and press comma and we'll save this and we'll again be pressing this show report

[35:07] which will show the report it means all the test cases has been passed and we will again run this command. So the basically the error was we forgot to add basically the error was we forgot to add the comma here. So add a comma here and

[35:20] then run the command again. Save this. Come here and run this command again. Now you can see it has slowed it a little down. Right? You can see what all actions has been performed in a very chronological order. So this is how you

[35:35] can slow up the speed. Now I'll show you some other options. So here I have given browser name as Chromium. Here only I have specified where I want to run my to-do list automation. Then I have given screenshot only on failure. It means in

[35:50] the reports you will be showing all the screenshots where the failure has happened actually and not all the screenshots or else it will be so many screenshots which is not memory efficient right and then videos also

[36:03] efficient right and then videos also which is on basically failures only then we'll press Ctrl S. Here we are running again. So this is generated. Now we will see the reports and for this we'll write this command and paste playright show

[36:19] report. So this will add the screenshots and videos in the report but actually there was no failure that's why there was no report generated. If in case screenshots both have came on the screen. So you can cross from here you

[36:34] can again press Ctrl C to come out from this. So I've just shown you the command how you can specify the things here in the playright config.js file. Now I will show you how you can run it in the UI which is interactive mode. So this

[36:50] particular command will run our automation in the interactive user interactive mode. NPX playright test UI and press enter. See this is the and press enter. See this is the interactive mode of our app. So this is

[37:03] how you can run it on the interactive mode. So these are all the basic commands we have seen right now. How we can record our test, how we can solve the errors, how we can pass all the test cases, then how we can slow the

[37:17] recording down and then specifying the particular browser, then taking the screenshots, videos. So we have seen everything almost everything here and it is much beyond than this but it is a beginner level tutorial. So I have

[37:30] covered all the important parts of playrite. So you don't just stop here. You try to automate any other app using the this app. You can take this video as reference and don't just restrict here. Try to add some more commands. Try to

[37:43] add and try more advanced features in this playright. And if you found any issues, comment the issue down and our team of experts will try to solve and resolve it as soon as possible. And with that we have successfully completed our

[37:58] playright mini project. In this tutorial, we have learned how to install playrite. Create a test file, automate a real to-do app, run test in headed and real to-do app, run test in headed and headless mode, use grab to run specific

[38:11] tests, generate HTML reports, and capture screenshots, videos, and traces when a test fails. So now you have a clear idea of how Playrite can help you automate real user actions and test web applications faster and more reliably.

[38:27] The best way to improve from here is to keep practicing. Try adding more test cases, more assertions, and test different user flows on the same app. If you found this tutorial helpful, make sure to like this video, share it with

[38:41] your friends, and subscribe to SimplyLearn for more beginner friendly watching, and I'll see you in the next session.

More from Simplilearn

View all

โšก Saved you 0h 38m reading this? Transcribe any YouTube video for free โ€” no signup needed.