NPM Script and CLI | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Advanced Tricks and Techniques
Instructor: Artem Bondar
Lesson Summary
This lesson focuses on custom NPM scripts , which help organize terminal commands into more manageable components. NPM scripts can run other scripts in parallel or sequentially , making them useful for tasks such as running tests in a CI/CD environment. Key Concepts Command Line Interface (CLI) : The lesson uses the PW practice app to demonstrate how to run tests using CLI commands. Running Tests : To run a specific test file, use the command: npx playwright test use-page-objects.spec.ts To specify a browser, add --project=Chromium or --project=Firefox . Defining NPM Scripts : Scripts are defined in the package.json file under the scripts section. For example: "scripts": { "page-objects-chrome": "npx playwright test --project=Chromium use-page-objects.spec.ts", "page-objects-firefox": "npx playwright test --project=Firefox use-page-objects.spec.ts" } Executing Scripts Run a script using: npm run script-name . To run multiple scripts sequentially, use && : npm run page-objects-chrome && npm run page-objects-firefox To run scripts in parallel, use & : npm run page-objects-chrome & npm run page-objects-firefox In summary, NPM scripts provide a convenient way to manage and execute terminal commands, enhancing productivity and reducing errors in command entry.
Video Transcript
In this lesson, we will talk about custom NPM scripts. So creating those scripts will help you to organize your terminal commands into kind of more usable components. And also you can use NPM scripts to run a different NPM scripts in parallel or sequentially or however you want. And also using NPM scripts, you can trigger other scripts or script command not only to run the test. Using NPM scripts is helpful when you organize your test and running your test in CI CD server. So in this lesson, I will show you how to write those scripts. Let's get into it. So CLI stands for command line interface. And for this demo, I will use our previous application, which is PW practice app. So previously in the beginning of the class, I showed you how you can run tests using terminal or in other words, CLI command line interface. For example, if you want to run this use-page-objects.spec.ts, you need to run command like this, npx playwright test the name of spec file use-page-objects.spec.ts. And if you want to run it, let's say only in Chrome, you need to type dash dash project equals to Chromium and hit run. And if you entered your command correctly, it will work, but it did not because we made a mistake in the playwright name. So try one more time, fixing this playwright, running this again. And when command entered correctly, we can successfully execute the test. So it's running two tests right now and both are passed. If we want to run project in Firefox, we change it to Firefox, run it, and it's working again. But there is certain inconvenience. I think you would agree that typing this long command every time is very uncomfortable. And as I showed you before, it's very easy to make the mistake in the command. So how can you deal with this situation? You can handle this with npm scripts. So npm scripts can be defined inside of the package.json. You go here and there is a scripts section. So inside of the script section, you can put those commands under the names that you need and you're comfortable with. I put the comma and let's say we create a new script and I call it page objects. And let's say Chrome. So I want to run the particular page object spec inside of the Chrome. And I take this command that we just executed in the terminal. And copying inside of the script. Instead of Firefox, I put Chromium, right? And then inside of the terminal, you just call this name of the script and this command will be executed. So how am I doing this? Npm run and then you provide the name of the script, page objects-chrome. I run this and this npm script will execute for me this particular command. And you can create as many scripts as you want. For example, let me add the second one that will be responsible for running tests in the Firefox. So I'm just simply copying this, rename Firefox and here change to Firefox. And if I run new command, page objects-firefox, run it. And it will execute this script for me and execute both of those tests. All right, both tests are passed. What else you can do? Inside of the scripts section, you also can call other scripts. For example, let me create a new one, which I call page objects-all. And I want to run both of the scripts that we created before, which is npm run, page objects-chrome. And I want to run the second one, npm run, page objects-firefox. And now inside of the terminal, I execute npm run, page objects-all. And running this test, so right now you see running the project Chromium. This one is completed, and after that, running the project Firefox right away. This is done. When we use double ampersand sign, it means that we want a sequential execution of the scripts. First script will be this one, then will be this one. Also, you can run your scripts in parallel. In this case, you will use just single ampersand sign. And if I will run this command right now, right now, you can see that both workers triggered, and both scripts are running in parallel right now. One is for Firefox, and one is for Chromium, and both are executed. So these are the tricks with npm script. So technically, everything that you can run inside of the terminal, any command, it's not necessarily related to the playwright. It can be related to report generation or anything like that. Everything that can be executed inside of the terminal, for convenience, you can put inside of the script section and give your own names to your npm script. And then you can sequentially or in parallel run those scripts as part of larger commands, combining several scripts together. So this is very convenient way when you work with command line interface and customizing your scripts. All right, thank you guys, and see you in the next lesson.