Clone Test Application | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Introduction
Instructor: Artem Bondar
Lesson Summary
In this lesson, we will download and run a test application for our course. Follow these steps: Step 1: Clone the Application Navigate to github.com and search for pwpractice-app . Click on the application by Bondar Artem. Click on Code and copy the URL to clone the application. Step 2: Set Up the Project Choose a folder on your computer to store the project (e.g., a demo folder on your desktop). Open a new terminal in this folder. Run the command: git clone [URL] to clone the project. Open the cloned folder in Visual Studio Code . Step 3: Install Dependencies Open a new terminal and run: npm install --force . Ignore any warnings or vulnerabilities unless there are errors. Step 4: Run the Application After installation, run: npm start . Access the application in your browser at localhost:4200 . The application features various UI elements, including forms and dialog boxes, which we will automate throughout the course. Keep the terminal running to maintain access to the application. If it stops, use Ctrl + C to stop it and run npm start again to restart. For executing other commands, open a second terminal while keeping the first one active. This setup ensures that the application runs smoothly while you perform other tasks. Now, the application is up and running, and we are ready to proceed to the next lesson!
Video Transcript
Hey guys, in this lesson, we will download and run test application that we're gonna use in this class. So let's get into it. So navigate to github.com and search for the application. Click on this little search icon and type pwpractice-app and hit Enter. And the very first application, Bondar Artem, pwpractice-app, and open it. So after that, we need to click on Code and get this URL to clone the application. So copy this URL, and that's it. Then you need to choose folder on your computer. Where do you want to keep those projects? So for this demo, I have created just a demo folder on my desktop. And I open a new terminal in this folder, so new terminal. And then I type command git clone and paste this URL that we copied from the GitHub and hit Enter. And that's it, project was successfully cloned into this folder. If I go back, we can see pwpractice-app folder now available inside of the demo folder. Now we need to open this folder in Visual Studio Code. Going back to Visual Studio Code, File, Open Folder. Then I need to navigate to this folder, Desktop, Demo, pwpractice-app. And I need to open this SPW practice app and hit Open. That's it, application opened on our computer. Now to run this application, we need to install the dependencies. I open a new terminal and run the command npm install --force and click Enter. And then we need to wait while the Node Package Manager will complete the installations of all required dependencies to run this project. So you see, currently we have some warnings over here, some of the conflict dependencies and stuff. Just ignore this, it doesn't matter unless they're all dependencies installed. We are good with that. And also, at the end of installation, you may see some vulnerabilities, something like this. Again, just ignore this. All we need to do is just to install these dependencies and make sure you don't have any errors. Warnings are just fine. So we don't have any errors, it means it's good. Then just type npm start, hit Enter. And now application should be built on the computer and be executed in the browser. We need to wait a little bit, And it's compiled successfully. You see the message, it's compiled successfully. Also, here is a message that you can open in the browser on localhost 4200. This is where our application is available. Going back to the browser, open new tab, and I type localhost, colon, 4200, and hit Enter. And here we go, this is our test application that we're gonna use in this course. So this application has different types of UI elements, different forms, or for example, a date picker that you can click on, different dialog boxes that you can play around. And we will automate these different components during this course using this sample application. And going back over here, this application, the terminal should be up and running when you use it. If you hit Ctrl C on the keyboard, application is stopped and I go back to the browser, you see it's not available. So you need to go back to the terminal, run npm start again. Application will be served again on the localhost 4200. It's building it again, compiled successfully, and now you can access this application and hit Refresh, and application is available again. One more thing, when you run terminal commands, make sure that you keep this terminal open. And for the play rate commands, you just need to open a second terminal and run your terminal commands. So you have two terminals running in parallel, one for running test application, and second for executing different terminal commands. Well, that's pretty much it. Application is up and running, and we are ready to move to the next lesson.