- Want to see the entire bun-create-playwright project? It is on tinyurl.com/bun-create-playwright!
With this post, we will explore how the built-in test runner for Playwright Test can run headed tests, debug versions of tests, and smoke tests.
... and shortcuts for all of these can be set up in the scripts in your package.json! If you are using "bun" as a package manager, as we are in bun-create-playwright, just type out "bun run", a space and then the shortcut such as: bun run test
package.json
"scripts": {
"test": "playwright test",
"test:headed": "playwright test --headed",
"test:trace": "playwright test --trace on",
"test:chromium": "playwright test --project=chromium",
"test:firefox": "playwright test --project=firefox",
"test:webkit": "playwright test --project=webkit",
"test:smoke": "playwright test --project=chromium --grep '@smoke'",
"test:flaky": "playwright test --project=chromium --repeat-each=20",
"test:ui": "playwright test --ui",
"test:debug": "playwright test --debug",
"test:failed": "playwright test --last-failed",
"test:login": "playwright test tests/login.spec.ts",
"test:secure-area": "playwright test tests/secure-area.spec.ts",
"report:list": "playwright test --reporter=list",
"report:line": "playwright test --reporter=line",
"report:dot": "playwright test --reporter=dot",
"report:blob": "playwright test --reporter=blob",
"report": "playwright show-report",
"codegen": "playwright codegen",
"lint": "eslint .",
"lint:ci": "eslint . --max-warnings 0",
"lint:fix": "eslint . --fix",
"format": "prettier --write .",
"format:check": "prettier --check .",
"format:debug": "prettier --check . --log-level debug",
"format:diff": "prettier --list-different",
"typecheck": "tsc --noEmit"
},
Do you need to really set up shortcuts like these? Certainly not! But it is easier than typing out: bunx playwright test --project=chromium --grep '@smoke'.
Feel free to name these commands anything you want!
You Can Run Scripts in Bunx? What is Bunx?
When you install Node.js, you are installing Node Package Execute (npx) a package runner that lets you auto-install and execute any npm packages on the fly. "This command allows you to run an arbitrary command from an npm package (either one installed locally, or fetched remotely), in a similar context as running it via npm run" ( NPMJS.com Docs / npx ).
Bunx is part of bun.sh, auto-installs and runs packages from npm... and claims to be 100x faster than npx for locally installed packages, like the Playwright test runner (bun.com Docs / bunx ).
If you have the package.json set up like above, bun run test would do the same thing as bunx playwright test... but with a lot less typing.
What is a Package.json file?
Before Node.js had NPM as a package manager, there was CommonJS that tried to standardize how server-side JavaScript applications should interact with the operating system. Back in 2009, it gave JavaScript the ability to manage dependencies. It could require() outside packages to be installed. The CommonJS Packages 1.1 specification introduced a "scripts" block, an "Object hash of scripts used in managing the package. A package manager tool may use these scripts to install, build, test or uninstall the package", as shown in the CommonJS Wiki / 1.1.
When Issac Schlueter created npm, he adopted CommonJS's package.json terminology, turning the scripts block into general task runners.
Because of that, with Package.json scripts, you can include a whole library of functionality!
Setting Up Scripts To Run and Debug Tests
"With Playwright you can run a single test, a set of tests, or all tests. Tests can be run on one browser or multiple browsers using the --project flag. Tests run in parallel by default and in headless mode, meaning no browser window opens while running the tests and results appear in the terminal. You can run tests in headed mode using the --headed CLI argument, or run your tests in UI mode using the --ui flag to see a full trace of your tests."[...] You can run your tests with the playwright test command. This runs your tests on all browsers as configured in the playwright.config file, and results appear in the terminal. Tests run in headless mode by default, meaning no browser window opens while running the tests". - https://playwright.dev/docs/running-tests
- Note that on Playwright.dev / Running and debugging tests it assumes you are using node, and instructs you to use "npx playwright test". If using bun as a package manager, use "bunx playwright test" to run tests from the command line interface.
Run Tests in UI Mode
"We highly recommend running your tests with UI Mode for a better developer experience where you can easily walk through each step of the test and visually see what was happening before, during and after each step. UI mode also comes with many other features such as the locator picker, watch mode and more". - Playwright.dev / Running and debugging tests"UI Mode lets you explore, run, and debug tests with a time travel experience complete with a watch mode. All test files are displayed in the testing sidebar, allowing you to expand each file and describe block to individually run, view, watch, and debug each test. Filter tests by name, projects (set in your playwright.config file), @tag, or by the execution status of passed, failed, and skipped. See a full trace of your tests and hover back and forward over each action to see what was happening during each step. You can also pop out the DOM snapshot of a given moment into a separate window for a better debugging experience". - Playwright.dev / UI Mode
Review Playwright.dev / UI Mode to learn about running your tests, filtering tests. seeing the Timeline view at the top of the trace, the Actions tab in UI view, how to inspect the DOM, pick a locator, view the source, see the action called, the full log of the test, errors, the console logs, network tab, attachments if doing visual regression testing, and watch mode.
You can even run UI Mode in the browser for Docker and GitHub Codespace environments with "npx playwright test --ui-host=0.0.0.0" to have the port forwarded automatically, or "npx playwright test --ui-port=8080 --ui-host=0.0.0.0" to set the port.
Run Tests in Headed Mode
"To run your tests in headed mode, use the --headed flag. This gives you the ability to visually see how Playwright interacts with the website".Run tests on different browsers
"To specify which browser you would like to run your tests on, use the --project flag followed by the browser name.bunx playwright test --project webkit
bunx playwright test --project webkit --project firefox
Run specific tests
"To run a single test file, pass in the test file name that you want to run.bunx playwright test landing-page.spec.ts
bunx playwright test tests/todo-page/ tests/landing-page/
bunx playwright test landing login
bunx playwright test -g "add a todo item"
Run last failed tests
"To run only the tests that failed in the last test run, first run your tests and then run them again with the --last-failed flag.bunx playwright test --last-failed
Debug tests with the Playwright Inspector
"To debug all tests, run the Playwright test command followed by the --debug flag.bun playwright test --debug"This command opens a browser window as well as the Playwright Inspector. You can use the step over button at the top of the inspector to step through your test. Or, press the play button to run your test from start to finish. Once the test finishes, the browser window closes.
"To debug one test file, run the Playwright test command with the test file name that you want to debug followed by the --debug flag."To debug a specific test from the line number where the test(.. is defined, add a colon followed by the line number at the end of the test file name, followed by the --debug flag".
"To debug one test file, run the Playwright test command with the test file name that you want to debug followed by the --debug flag.
bun playwright test example.spec.ts --debug
bun playwright test example.spec.ts:10 --debug- Read more at Playwright.dev / Debugging Tests
Bun Create Playwright:
- Part One: Introducing bun, a new package manager and JavaScript runtime environment
- Part Two: What happens when you scaffold a Playwright framework and run installed tests using bun?
- Part Three: Add Type Checking and TSConfig to Bun-Create-Playwright
- Part Four: Checking code with lint, formatting it with prettier
- Part Five: Running Tests with Playwright Test Explorer and Generating Tests with Codegen
- Part Six: How Playwright Frameworks get configured with playwright.config.ts
- Part Seven: Implementing Page Objects in Playwright
- Part Eight: How to Configure Playwright Test to run smoke tests, headed tests, and debug versions through scripts in package.json
- GitLab: https://gitlab.com/tjmaher/bun-create-playwright
Happy Testing!
No comments:
Post a Comment