diff --git a/docs/src/best-practices-js.md b/docs/src/best-practices-js.md
index 3b70817923..0c4e71d3a5 100644
--- a/docs/src/best-practices-js.md
+++ b/docs/src/best-practices-js.md
@@ -112,10 +112,40 @@ Playwright has a [test generator](./codegen.md) that can generate tests and pick
To pick a locator run the `codegen` command followed by the URL that you would like to pick a locator from.
+
+
+
```bash
npx playwright codegen playwright.dev
```
+
+
+
+
+```bash
+yarn playwright codegen playwright.dev
+```
+
+
+
+
+
+```bash
+pnpm exec playwright codegen playwright.dev
+```
+
+
+
+
+
This will open a new browser window as well as the Playwright inspector. To pick a locator first click on the 'Record' button to stop the recording. By default when you run the `codegen` command it will start a new recording. Once you stop the recording the 'Pick Locator' button will be available to click.
You can then hover over any element on your page in the browser window and see the locator highlighted below your cursor. Clicking on an element will add the locator into the Playwright inspector. You can either copy the locator and paste into your test file or continue to explore the locator by editing it in the Playwright Inspector, for example by modifying the text, and seeing the results in the browser window.
@@ -170,10 +200,40 @@ You can live debug your test by clicking or editing the locators in your test in
You can also debug your tests with the Playwright inspector by running your tests with the `--debug` flag.
+
+
+
```bash
npx playwright test --debug
```
+
+
+
+
+```bash
+yarn playwright test --debug
+```
+
+
+
+
+
+```bash
+pnpm exec playwright test --debug
+```
+
+
+
+
+
You can then step through your test, view actionability logs and edit the locator live and see it highlighted in the browser window. This will show you which locators match, how many of them there are.
@@ -182,9 +242,39 @@ You can then step through your test, view actionability logs and edit the locato
To debug a specific test add the name of the test file and the line number of the test followed by the `--debug` flag.
+
+
+
```bash
npx playwright test example.spec.ts:9 --debug
```
+
+
+
+
+
+```bash
+yarn playwright test example.spec.ts:9 --debug
+```
+
+
+
+
+
+```bash
+pnpm exec playwright test example.spec.ts:9 --debug
+```
+
+
+
+
#### Debugging on CI
For CI failures, use the Playwright [trace viewer](./trace-viewer.md) instead of videos and screenshots. The trace viewer gives you a full trace of your tests as a local Progressive Web App (PWA) that can easily be shared. With the trace viewer you can view the timeline, inspect DOM snapshots for each action using dev tools, view network requests and more.
@@ -193,14 +283,75 @@ For CI failures, use the Playwright [trace viewer](./trace-viewer.md) instead of
Traces are configured in the Playwright config file and are set to run on CI on the first retry of a failed test. We don't recommend setting this to `on` so that traces are run on every test as it's very performance heavy. However you can run a trace locally when developing with the `--trace` flag.
+
+
+
```bash
npx playwright test --trace on
```
+
+
+
+
+
+```bash
+yarn playwright test --trace on
+```
+
+
+
+
+
+```bash
+pnpm exec playwright test --trace on
+```
+
+
+
+
+
Once you run this command your traces will be recorded for each test and can be viewed directly from the HTML report.
+
+
+
```bash
npx playwright show-report
-````
+```
+
+
+
+
+
+```bash
+yarn playwright show-report
+```
+
+
+
+
+
+```bash
+pnpm exec playwright show-report
+```
+
+
+
+
@@ -246,17 +397,78 @@ export default defineConfig({
By keeping your Playwright version up to date you will be able to test your app on the latest browser versions and catch failures before the latest browser version is released to the public.
+
+
+
```bash
npm install -D @playwright/test@latest
```
+
+
+
+
+
+```bash
+yarn add --dev @playwright/test@latest
+```
+
+
+
+
+
+```bash
+pnpm install --save-dev @playwright/test@latest
+```
+
+
+
+
+
Check the [release notes](./release-notes.md) to see what the latest version is and what changes have been released.
You can see what version of Playwright you have by running the following command.
+
+
+
```bash
npx playwright --version
```
+
+
+
+
+```bash
+yarn playwright --version
+```
+
+
+
+
+
+```bash
+pnpm exec playwright --version
+```
+
+
+
+
+
### Run tests on CI
Setup CI/CD and run your tests frequently. The more often you run your tests the better. Ideally you should run your tests on each commit and pull request. Playwright comes with a [GitHub actions workflow](/ci-intro.md) so that tests will run on CI for you with no setup required. Playwright can also be setup on the [CI environment](/ci.md) of your choice.
@@ -282,10 +494,40 @@ test('runs in parallel 2', async ({ page }) => { /* ... */ });
Playwright can [shard](./test-parallel.md#shard-tests-between-multiple-machines) a test suite, so that it can be executed on multiple machines.
+
+
+
```bash
npx playwright test --shard=1/3
```
+
+
+
+
+```bash
+yarn playwright test --shard=1/3
+```
+
+
+
+
+
+```bash
+pnpm exec playwright test --shard=1/3
+```
+
+
+
+
+
## Productivity tips
### Use Soft assertions