NPM Scripts | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Advanced Features
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore npm scripts , their usage, and their importance in simplifying command-line operations for running tests, particularly with Cypress . Running Cypress Tests Previously, tests were run using the terminal command: nbx-cypress-run nbx-e2e-firsttest.cy.js This command executes tests in a specified browser, such as Firefox or Chrome , but can be cumbersome due to its length. Creating Custom NPM Scripts To simplify this process, you can create custom scripts in the package.json file: Locate the scripts section in package.json . Add a new script, for example: "Cypress Smoke Firefox": "nbx-cypress-run nbx-e2e-firsttest.cy.js --browser firefox" Run the script using: npm run "Cypress Smoke Firefox" Combining and Running Scripts You can create multiple scripts and run them sequentially or in parallel: Sequential execution can be done using && : npm run cypress-smoke-firefox && npm run cypress-smoke-chrome For parallel execution on Linux/Mac, use a single & : npm run cypress-smoke-firefox & npm run cypress-smoke-chrome On Windows, install npm run-all to run scripts in parallel: npm run-all cypress-smoke-chrome cypress-smoke-firefox Flexibility of NPM Scripts NPM scripts are versatile and can execute any terminal command, not just Cypress tests. This allows for: API calls using curl Building applications Triggering shell scripts This flexibility is particularly beneficial in CI/CD environments, where a simple script in package.json can streamline complex operations. In summary, leveraging npm scripts enhances efficiency and organization in testing workflows.
Video Transcript
Hey guys, in this lesson, we will talk about npm scripts, how to use it, and why do we need it. So let's jump into it. Previously in the course, I showed you how you can use terminal to run Cypress test. For example, you can use nbx-cypress-run. And for example, I want to run a spec file, nbx-e2e-firsttest.cy.js. And if I run it, Cypress will find the spec file and execute in electron browser in the headless mode. So all tests that we created so far in this course executed. And I skipped one of the tests because it's just too slow to save the time. So eight tests were executed, one test was skipped. And if you want to run, for example, this test in the Firefox browser, you would type browser and then Firefox and then run the test. And now this execution of the spec file, it's in Firefox 154. And the same test is executed, all tests passed successfully. But you notice that if you would want to use the command line interface, every time typing this long command is kind of inconvenient, right? When you want to switch the browser, every time typing what spec do you want to run, what browser do you want to use, kind of a lot. Instead, you can simplify this approach by creating a custom NPM script that will be responsible for certain operation. This is what you can do. So we're going back to the package.json, and you need to find this script section. Currently, we have just a single script which is test, and it's basically not doing anything. And here in the script section, we can create own scripts. So I put the comma because this is the object, and create a new script. For example, I call it Cypress Smoke, and let's say I want to run smoke test in the Firefox browser. So I call it Smoke Firefox. So it's completely custom name, the convenient name that I would like to use in my project. So you can give any name to your custom scripts. And then I put my script that I was executed previously in the terminal over here, so I need to fix only conflict of the double quotes. So I replace this double quotes with a single quotes, and now everything is all set. Now, how to run the script? So I'm removing the script that is in terminal, and then to call the script, I use command npm, not npx. I use npm, npm run, and then the name of my script. In this example, it's Cypress Smoke Firefox. I hit Enter, and running the script. So currently, when I call the script inside of the package.json, it will literally just execute this line in the terminal, and will do exactly the same thing. So let's create the second script for the convenience. And for example, we will use the Smoke Firefox, but instead of Firefox, we use a Chrome browser. And here, I will replace with a Chrome browser. So now I go to the terminal, and instead of calling the Firefox script, I call Chrome script, running the test. And currently, the second CLI script is executed using the Chrome browser, running the same firsttest.cy.js as a test. So that's it, and you can create the infinite number of the scripts, adding any options and properties and values inside of the script, just to simplify the execution of the certain scripts that you may want to run. And also, you can combine those scripts together. For example, let's say I want to run first test in the Firefox, and then in Chrome browser, one by one. So for that, I can create a new test. And for example, I call it cypress-smoke, and I call it all. So I want to run all browsers. And for that, I will call just my npm run and script number one. For example, first, I want to run Firefox test. Then I call double ampersand sign, and then I call my second script, which is a Chrome, just like that. And so if I call now this script, cypress-smoke-all, it will run first this script, and then it will run this script, which will trigger execution of this script and this script. So let me show you that, smoke-all, like this. And let me run this, running the test. So first, it's running Firefox tests. We will see this execution just in a second. So that's 1, 2, 3, 4, 5, 6, 7, 8, all right. And then the next script executed right away using the Chrome browser and executing the same spec file, but in a different browser, all right. And one more feature that you can use with a script, you can execute scripts in parallel. If you're on Linux or Mac computer, you can use just a single ampersand sign, and then this script and this script will be executed in parallel. So Cypress will run two Cypress instances, one for Firefox, one for the Chrome, and those will be executed in parallel. So let me show you. I run smoke-all, and you see both processes triggered in parallel. I don't know if that's visible, but look, Chrome and Firefox launched in parallel. And we see a little bit mess, because the reporting is just messed up. But all the thing executed in parallel. But unfortunately, this approach will not work if you are on Windows. If you're on Windows computer, you would need to install this additional npm run-all package. So we need to run npm install npm run-all and how to use it. So instead of using like this npm run clean and npm build, you would call npm run-all and then clean. This is the name of the script, or build, this is the name of the script. In our example, it will be npm run-all, then space cypress-smoke-chrome, space cypress-smoke-firefox. This is how it would work on Windows. And one more thing that scripts in the package.json are not limited to execution of the Cypress tests only. So everything what you can run in the terminal can be wrapped into the script and combined with different either Cypress commands or not necessary Cypress commands. For example, you can do things like make an API call using curl, or you can build the application, or maybe trigger execution of the different shell script. And you can create the sequence of the executions. For example, first run this script, then run this script, then run this script. And with this sequence, create any customization flows that you want inside of the package.json. This approach is very useful in CI CD. When you create your custom script, then you upload your test to the continuous integration pipeline. Instead of putting into configuration of CI CD a giant script of what you want to do, you just run a simple script that is configured in the package.json. And the build server will know what it should do. So this is how it is helpful. All right, guys, that's it. I hope it was clear and easy, and I'll see you in the next lesson.