🚀 Quick tips - 14 Playwright scripts you should add to your next project

Scripts overview

When you first start a project, you may be overwhelmed by the number of features Playwright provides you with. So I’ve created a short guide of the key scripts that you should add to your next project.

This is the package.json file below, containing some of the key scripts, I’ll break each one down and explain what they do. (Note: you need to execute them with npm run followed by the script name, i.e. npm run test)

"scripts": {
    "test": "npx playwright test",
    "test-headed": "npx playwright test --headed",
    "test-trace": "npx playwright test --trace on",
    "test-title": "npx playwright test -g",
    "test-chromium": "npx playwright test --project chromium",
    "test-firefox": "npx playwright test --project firefox",
    "test-webkit": "npx playwright test --project webkit",
    "report": "npx playwright show-report",
    "ui-mode": "npx playwright test --ui",
    "debug": "npx playwright test --debug",
    "update": " npm install -D @playwright/test@latest && npx playwright install --with-deps",
    "version": "npx playwright --version",
    "codegen": "npx playwright codegen",
    "codegen-mobile": "npx playwright codegen --device=\"iPhone 13\""
  },

What do they do?

• test — the default script, this will execute all tests in your project, unless specified otherwise in your playwright.config
• test-headed — by default playwright tests execute headless. Use this if you want to see what is happening during the test
• test-trace — this creates a trace file for your test, it can be viewed via the report. If you execute npm run report, you’ll see it attached as a zip file. (this is more beneficial during CI, for local it’s easier to use ui-mode.)
• test-title — this will filter your test execution based on the title. It uses regex so you can either use part or all of the title. For example, ‘npm run test-title login’.
• test-chromium, test-firefox, test-webkit — these commands will execute tests with the relevant project name. In this case the projects are related to the different browser engines which the tests will be executed in.
• test-report — launches the test execution report for the most recent test run
• ui-mode — launches your test suite in the Playwright ui-mode. This is a local interactive session, where you can step through tests and get more detailed information on logs, network calls and console errors. (great for debugging)
• debug — standard debugging, will stop test execution where you have added breakpoints and allow you to step through the code
• update — updates Playwright and any dependencies to the latest version
• codegen and codegen-mobile — launches the Playwright code generation feature, which allows you to perform actions and capture locators in real-time, along with any assertions. The mobile version launches in the iPhone 13 viewport, this can be amended to any supported emulation devices.

Conclusion

And that’s it — a very quick run through of what I think are the core Playwright scripts that you should be using. These can be added to and changed based on your requirements, but serve as a good foundation for any new project. Thanks for reading!