From 063689483c05c39c71d2b22044b2a0a8e2142d85 Mon Sep 17 00:00:00 2001 From: cpadm <57954026+cpAdm@users.noreply.github.com> Date: Fri, 27 Feb 2026 20:08:18 +0100 Subject: [PATCH 1/2] docs: Set height on all images --- docs/src/best-practices-js.md | 16 +++++----- docs/src/ci-intro.md | 6 ++-- docs/src/codegen.md | 56 +++++++++++++++++------------------ docs/src/debug.md | 32 ++++++++++---------- docs/src/emulation.md | 8 ++--- docs/src/test-projects-js.md | 10 +++---- docs/src/test-sharding-js.md | 2 +- docs/src/trace-viewer.md | 2 +- 8 files changed, 66 insertions(+), 66 deletions(-) diff --git a/docs/src/best-practices-js.md b/docs/src/best-practices-js.md index bed2a12ed0929..67930b0953011 100644 --- a/docs/src/best-practices-js.md +++ b/docs/src/best-practices-js.md @@ -151,13 +151,13 @@ This will open a new browser window as well as the Playwright inspector. To pick 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. -generating locators with codegen +generating locators with codegen #### Use the VS Code extension to generate locators You can also use the [VS Code Extension](./getting-started-vscode.md) to generate locators as well as record a test. The VS Code extension also gives you a great developer experience when writing, running, and debugging tests. -generating locators in vs code with codegen +generating locators in vs code with codegen ### Use web first assertions @@ -193,11 +193,11 @@ await expect(page.getByText('welcome')).toBeVisible(); For local debugging we recommend you [debug your tests live in VSCode.](./getting-started-vscode.md#debugging-your-tests) by installing the [VS Code extension](./getting-started-vscode.md). You can run tests in debug mode by right-clicking on the line next to the test you want to run which will open a browser window and pause at where the breakpoint is set. -debugging tests in vscode +debugging tests in vscode You can live debug your test by clicking or editing the locators in your test in VS Code which will highlight this locator in the browser window as well as show you any other matching locators found on the page. -live debugging locators in vscode +live debugging locators in vscode You can also debug your tests with the Playwright inspector by running your tests with the `--debug` flag. @@ -238,7 +238,7 @@ 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. -debugging with the playwright inspector +debugging with the playwright inspector @@ -282,7 +282,7 @@ pnpm exec playwright test example.spec.ts:9 --debug 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. -playwrights trace viewer +playwrights trace viewer 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. @@ -358,11 +358,11 @@ pnpm exec playwright show-report -Playwrights HTML report +Playwrights HTML report Traces can be opened by clicking on the icon next to the test file name or by opening each of the test reports and scrolling down to the traces section. -Screenshot 2023-01-13 at 09 58 34 +Screenshot 2023-01-13 at 09 58 34 ### Use Playwright's Tooling diff --git a/docs/src/ci-intro.md b/docs/src/ci-intro.md index 510604980174b..b17c5948622b6 100644 --- a/docs/src/ci-intro.md +++ b/docs/src/ci-intro.md @@ -181,7 +181,7 @@ Once you have your [GitHub Actions workflow](#setting-up-github-actions) setup, ###### * langs: js, java, python -Create a Repo and Push to GitHub +Create a Repo and Push to GitHub ###### @@ -205,7 +205,7 @@ Click on the **Actions** tab to see the workflows. Here you see if your tests ha On Pull Requests you can also click on the **Details** link in the [PR status check](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/collaborating-on-repositories-with-code-quality-features/about-status-checks). -pr status checked +pr status checked ## Viewing Test Logs @@ -233,7 +233,7 @@ The HTML Report shows you a full report of your tests. You can filter the report In the Artifacts section, click on the **playwright-report** to download your report in the format of a zip file. -Downloading the HTML Report +Downloading the HTML Report ### Viewing the HTML Report * langs: js diff --git a/docs/src/codegen.md b/docs/src/codegen.md index 767329644ae0d..1b1d06d445d4d 100644 --- a/docs/src/codegen.md +++ b/docs/src/codegen.md @@ -23,7 +23,7 @@ Install the VS Code extension and generate tests directly from VS Code. The exte To record a test click on the **Record new** button from the Testing sidebar. This will create a `test-1.spec.ts` file as well as open up a browser window. -record new in vs code +record new in vs code In the browser go to the URL you wish to test and start clicking around to record your user actions. @@ -49,7 +49,7 @@ To record from a specific point in your test move your cursor to where you want In the browser window start performing the actions you want to record. -add feed the dog to todo app +add feed the dog to todo app In the test file in VS Code you will see your new generated actions added to your test at the cursor position. @@ -63,7 +63,7 @@ You can generate locators with the test generator. - Click the element you require and it will now show up in the **Pick locator** box in VS Code. - Press Enter on your keyboard to copy the locator into the clipboard and then paste anywhere in your code. Or press 'escape' if you want to cancel. -Pick locators in VS code +Pick locators in VS code ## Generate tests with the Playwright Inspector @@ -181,22 +181,22 @@ pwsh bin/Debug/netX/playwright.ps1 codegen --viewport-size="800,600" playwright. ###### * langs: js -Codegen generating code for tests for playwright.dev website with a specific viewport js +Codegen generating code for tests for playwright.dev website with a specific viewport js ###### * langs: java -Codegen generating code for tests for playwright.dev website with a specific viewport java +Codegen generating code for tests for playwright.dev website with a specific viewport java ###### * langs: python -Codegen generating code for tests for playwright.dev website with a specific viewport python +Codegen generating code for tests for playwright.dev website with a specific viewport python ###### * langs: csharp -Codegen generating code for tests for playwright.dev website with a specific viewport dotnet +Codegen generating code for tests for playwright.dev website with a specific viewport dotnet ### Emulate devices @@ -221,22 +221,22 @@ pwsh bin/Debug/netX/playwright.ps1 codegen --device="iPhone 13" playwright.dev ###### * langs: js -Codegen generating code for tests for playwright.dev website emulated for iPhone 13 js +Codegen generating code for tests for playwright.dev website emulated for iPhone 13 js ###### * langs: java -Codegen generating code for tests for playwright.dev website emulated for iPhone 13 java +Codegen generating code for tests for playwright.dev website emulated for iPhone 13 java ###### * langs: python -Codegen generating code for tests for playwright.dev website emulated for iPhone 13 python +Codegen generating code for tests for playwright.dev website emulated for iPhone 13 python ###### * langs: csharp -Codegen generating code for tests for playwright.dev website emulated for iPhone 13 csharp +Codegen generating code for tests for playwright.dev website emulated for iPhone 13 csharp ### Emulate color scheme @@ -262,22 +262,22 @@ pwsh bin/Debug/netX/playwright.ps1 codegen --color-scheme=dark playwright.dev ###### * langs: js -Codegen generating code for tests for playwright.dev website in dark mode js +Codegen generating code for tests for playwright.dev website in dark mode js ###### * langs: java -Codegen generating code for tests for playwright.dev website in dark mode java +Codegen generating code for tests for playwright.dev website in dark mode java ###### * langs: python -Codegen generating code for tests for playwright.dev website in dark mode python +Codegen generating code for tests for playwright.dev website in dark mode python ###### * langs: csharp -Codegen generating code for tests for playwright.dev website in dark mode csharp +Codegen generating code for tests for playwright.dev website in dark mode csharp ### Emulate geolocation, language and timezone @@ -305,23 +305,23 @@ pwsh bin/Debug/netX/playwright.ps1 codegen --timezone="Europe/Rome" --geolocatio ###### * langs: js -Codegen generating code for tests for bing maps showing timezone, geolocation as Rome, Italy and in Italian language +Codegen generating code for tests for bing maps showing timezone, geolocation as Rome, Italy and in Italian language ###### * langs: java -Codegen generating code for tests for bing maps showing timezone, geolocation as Rome, Italy and in Italian language java +Codegen generating code for tests for bing maps showing timezone, geolocation as Rome, Italy and in Italian language java ###### * langs: python -Codegen generating code for tests for bing maps showing timezone, geolocation as Rome, Italy and in Italian language python +Codegen generating code for tests for bing maps showing timezone, geolocation as Rome, Italy and in Italian language python ###### * langs: csharp -Codegen generating code for tests for bing maps showing timezone, geolocation as Rome, Italy and in Italian language csharp +Codegen generating code for tests for bing maps showing timezone, geolocation as Rome, Italy and in Italian language csharp ### Preserve authenticated state @@ -346,30 +346,30 @@ pwsh bin/Debug/netX/playwright.ps1 codegen github.com/microsoft/playwright --sav ###### * langs: js -github page before logging in js +github page before logging in js ###### * langs: java -github page before logging in java +github page before logging in java ###### * langs: python -github page before logging in python +github page before logging in python ###### * langs: csharp -github page before logging in csharp +github page before logging in csharp #### Login After performing authentication and closing the browser, `auth.json` will contain the storage state which you can then reuse in your tests. -login to GitHub screen +login to GitHub screen Make sure you only use the `auth.json` locally as it contains sensitive information. Add it to your `.gitignore` or delete it once you have finished generating your tests. @@ -396,23 +396,23 @@ pwsh bin/Debug/netX/playwright.ps1 codegen --load-storage=auth.json github.com/m ###### * langs: js -github signed in showing use of load storage js +github signed in showing use of load storage js ###### * langs: java -github signed in showing use of load storage java +github signed in showing use of load storage java ###### * langs: python -github signed in showing use of load storage python +github signed in showing use of load storage python ###### * langs: csharp -github signed in showing use of load storage scharp +github signed in showing use of load storage scharp #### Use existing userDataDir diff --git a/docs/src/debug.md b/docs/src/debug.md index 62b952103652c..ced27d787a3c6 100644 --- a/docs/src/debug.md +++ b/docs/src/debug.md @@ -8,29 +8,29 @@ title: "Debugging Tests" We recommend using the [VS Code Extension](./getting-started-vscode.md) for debugging for a better developer experience. With the VS Code extension you can debug your tests right in VS Code, see error messages, set breakpoints and step through your tests. -running test in debug mode +running test in debug mode ### Error Messages If your test fails VS Code will show you error messages right in the editor showing what was expected, what was received as well as a complete call log. -error messaging in vs code +error messaging in vs code ### Live Debugging You can debug your test live in VS Code. After running a test with the `Show Browser` option checked, click on any of the locators in VS Code and it will be highlighted in the Browser window. Playwright will also show you if there are multiple matches. -live debugging in VS Code +live debugging in VS Code You can also edit the locators in VS Code and Playwright will show you the changes live in the browser window. -live debugging in VS Code +live debugging in VS Code ### Picking a Locator Pick a [locator](./locators.md) and copy it into your test file by clicking the **Pick locator** button from the testing sidebar. Then in the browser click the element you require and it will now show up in the **Pick locator** box in VS Code. Press 'enter' on your keyboard to copy the locator into the clipboard and then paste anywhere in your code. Or press 'escape' if you want to cancel. -Pick locators +Pick locators Playwright will look at your page and figure out the best locator, prioritizing [role, text and test id locators](./locators.md). If Playwright finds multiple elements matching the locator, it will improve the locator to make it resilient and uniquely identify the target element, so you don't have to worry about failing tests due to locators. @@ -38,11 +38,11 @@ Playwright will look at your page and figure out the best locator, prioritizing To set a breakpoint click next to the line number where you want the breakpoint to be until a red dot appears. Run the tests in debug mode by right clicking on the line next to the test you want to run. -setting debug test mode +setting debug test mode A browser window will open and the test will run and pause at where the breakpoint is set. You can step through the tests, pause the test and rerun the tests from the menu in VS Code. -running test in debug mode +running test in debug mode ### Debug Tests Using Chrome DevTools @@ -52,11 +52,11 @@ Instead of using `Debug Test`, choose `Run Test` in VS Code. With `Show Browser` By default, debugging is done using the Chromium profile. You can debug your tests on different browsers by right clicking on the debug icon in the testing sidebar and clicking on the 'Select Default Profile' option from the dropdown. -debugging on specific profile +debugging on specific profile Then choose the test profile you would like to use for debugging your tests. Each time you run your test in debug mode it will use the profile you selected. You can run tests in debug mode by right clicking the line number where your test is and selecting 'Debug Test' from the menu. -choosing a profile for debugging +choosing a profile for debugging To learn more about debugging, see [Debugging in Visual Studio Code](https://code.visualstudio.com/docs/editor/debugging). @@ -65,7 +65,7 @@ To learn more about debugging, see [Debugging in Visual Studio Code](https://cod The Playwright Inspector is a GUI tool to help you debug your Playwright tests. It allows you to step through your tests, live edit locators, pick locators and see actionability logs. -Playwright Inspector +Playwright Inspector ### Run in debug mode * langs: js @@ -173,7 +173,7 @@ mvn test You can play, pause or step through each action of your test using the toolbar at the top of the Inspector. You can see the current action highlighted in the test code, and matching elements highlighted in the browser window. -Playwright Inspector and browser +Playwright Inspector and browser ### Run a test from a specific breakpoint @@ -201,19 +201,19 @@ await page.PauseAsync(); Once you add a `page.pause()` call, run your tests in debug mode. Clicking the "Resume" button in the Inspector will run the test and only stop on the `page.pause()`. -test with page.pause +test with page.pause ### Live editing locators While running in debug mode you can live edit the locators. Next to the 'Pick Locator' button there is a field showing the [locator](./locators.md) that the test is paused on. You can edit this locator directly in the **Pick Locator** field, and matching elements will be highlighted in the browser window. -live editing locators +live editing locators ### Picking locators While debugging, you might need to choose a more resilient locator. You can do this by clicking on the **Pick Locator** button and hovering over any element in the browser window. While hovering over an element you will see the code needed to locate this element highlighted below. Clicking an element in the browser will add the locator into the field where you can then either tweak it or copy it into your code. -Picking locators +Picking locators Playwright will look at your page and figure out the best locator, prioritizing [role, text and test id locators](./locators.md). If Playwright finds multiple elements matching the locator, it will improve the locator to make it resilient and uniquely identify the target element, so you don't have to worry about failing tests due to locators. @@ -221,7 +221,7 @@ Playwright will look at your page and figure out the best locator, prioritizing By the time Playwright has paused on a click action, it has already performed [actionability checks](./actionability.md) that can be found in the log. This can help you understand what happened during your test and what Playwright did or tried to do. The log tells you if the element was visible, enabled and stable, if the locator resolved to an element, scrolled into view, and so much more. If actionability can't be reached, it will show the action as pending. -Actionability Logs +Actionability Logs ## Trace Viewer @@ -241,7 +241,7 @@ When running in Debug Mode with `PWDEBUG=console`, a `playwright` object is avai - **See console logs** during execution (or learn how to [read logs via API](./api/class-page.md#page-event-console)) - Check **network activity** and other developer tools features -Browser Developer Tools with Playwright object +Browser Developer Tools with Playwright object To debug your tests using the browser developer tools, start by setting a breakpoint in your test to pause the execution using the [`method: Page.pause`] method. diff --git a/docs/src/emulation.md b/docs/src/emulation.md index df7e4e55adac4..3f2610e5827ae 100644 --- a/docs/src/emulation.md +++ b/docs/src/emulation.md @@ -88,7 +88,7 @@ await using var context = await browser.NewContextAsync(iphone13); ``` -playwright.dev website emulated for iPhone 13 +playwright.dev website emulated for iPhone 13 ## Devices @@ -354,7 +354,7 @@ await using var context = await browser.NewContextAsync(new() }); ``` -Bing in german lang and timezone +Bing in german lang and timezone ###### * langs: js @@ -524,7 +524,7 @@ await using var context = await browser.NewContextAsync(new() }); ``` -geolocation for italy on bing maps +geolocation for italy on bing maps Change the location later: @@ -685,7 +685,7 @@ await page.EmulateMediaAsync(new() }); ``` -playwright web in dark mode +playwright web in dark mode ## User Agent The User Agent is included in the device and therefore you will rarely need to change it however if you do need to test a different user agent you can override it with the `userAgent` property. diff --git a/docs/src/test-projects-js.md b/docs/src/test-projects-js.md index 12e84a7655d28..85aa7a5fe40ab 100644 --- a/docs/src/test-projects-js.md +++ b/docs/src/test-projects-js.md @@ -92,11 +92,11 @@ Running 1 test using 1 worker The VS Code test runner runs your tests on the default browser of Chrome. To run on other/multiple browsers click the play button's dropdown from the testing sidebar and choose another profile or modify the default profile by clicking **Select Default Profile** and select the browsers you wish to run your tests on. -selecting browsers +selecting browsers Choose a specific profile, various profiles or all profiles to run tests on. -choosing default profiles +choosing default profiles ## Configure projects for multiple environments @@ -196,7 +196,7 @@ Running order: 2. Tests in the 'chromium', 'webkit' and 'firefox' projects run together. By default, these projects will [run in parallel](./test-parallel.md), subject to the maximum workers limit. -chromium, webkit and firefox projects depend on setup project +chromium, webkit and firefox projects depend on setup project If there are more than one dependency then these project dependencies will be run first and in parallel. If the tests from a dependency fails then the tests that rely on this project will not be run. @@ -207,14 +207,14 @@ Running order: 1. The 'e2e tests' project is not run! -Browser login project is blue, database is red and e2e tests relies on both +Browser login project is blue, database is red and e2e tests relies on both ### Teardown You can also teardown your setup by adding a [`property: TestProject.teardown`] property to your setup project. Teardown will run after all dependent projects have run. See the [teardown guide](./test-global-setup-teardown.md#teardown) for more information. -global setup and teardown +global setup and teardown ### Test filtering diff --git a/docs/src/test-sharding-js.md b/docs/src/test-sharding-js.md index 3e5f9ec02fbcd..2db0e4cb5520b 100644 --- a/docs/src/test-sharding-js.md +++ b/docs/src/test-sharding-js.md @@ -161,7 +161,7 @@ jobs: You can now see the reports have been merged and a combined HTML report is available in the GitHub Actions Artifacts tab. -image +image ## Merging reports from multiple environments diff --git a/docs/src/trace-viewer.md b/docs/src/trace-viewer.md index 42e89067be057..ed5a855e5c22b 100644 --- a/docs/src/trace-viewer.md +++ b/docs/src/trace-viewer.md @@ -43,7 +43,7 @@ pwsh bin/Debug/netX/playwright.ps1 show-trace trace.zip Trace Viewer loads the trace entirely in your browser and does not transmit any data externally. -Drop Playwright Trace to load +Drop Playwright Trace to load ### Viewing remote traces From e6ed1dc8169e51c368f636c25dda277f6c0d8397 Mon Sep 17 00:00:00 2001 From: cpadm <57954026+cpAdm@users.noreply.github.com> Date: Sat, 28 Feb 2026 13:56:09 +0100 Subject: [PATCH 2/2] docs: Set intrinsic width value, move responsive width to style --- docs/src/test-projects-js.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/test-projects-js.md b/docs/src/test-projects-js.md index 85aa7a5fe40ab..6c16c18857e50 100644 --- a/docs/src/test-projects-js.md +++ b/docs/src/test-projects-js.md @@ -196,7 +196,7 @@ Running order: 2. Tests in the 'chromium', 'webkit' and 'firefox' projects run together. By default, these projects will [run in parallel](./test-parallel.md), subject to the maximum workers limit. -chromium, webkit and firefox projects depend on setup project +chromium, webkit and firefox projects depend on setup project If there are more than one dependency then these project dependencies will be run first and in parallel. If the tests from a dependency fails then the tests that rely on this project will not be run. @@ -207,7 +207,7 @@ Running order: 1. The 'e2e tests' project is not run! -Browser login project is blue, database is red and e2e tests relies on both +Browser login project is blue, database is red and e2e tests relies on both ### Teardown