From 9d1f6b0dd3fb854870d6a4472024b1a3af5a7214 Mon Sep 17 00:00:00 2001 From: cpadm <57954026+cpAdm@users.noreply.github.com> Date: Tue, 17 Feb 2026 17:38:46 +0100 Subject: [PATCH] docs: Set fixed dimensions on absolute images --- docs/src/browsers.md | 2 +- docs/src/ci-intro.md | 14 ++++---- docs/src/codegen.md | 26 +++++++------- docs/src/library-python.md | 4 +-- docs/src/mock.md | 14 ++++---- docs/src/release-notes-csharp.md | 16 ++++----- docs/src/release-notes-java.md | 20 +++++------ docs/src/release-notes-js.md | 40 +++++++++++----------- docs/src/release-notes-python.md | 20 +++++------ docs/src/running-tests-csharp.md | 2 +- docs/src/running-tests-python.md | 2 +- docs/src/test-ui-mode-js.md | 30 ++++++++-------- docs/src/trace-viewer-intro-csharp.md | 2 +- docs/src/trace-viewer-intro-java-python.md | 4 +-- docs/src/trace-viewer.md | 22 ++++++------ 15 files changed, 109 insertions(+), 109 deletions(-) diff --git a/docs/src/browsers.md b/docs/src/browsers.md index aafa274b5b725..847fae5435da8 100644 --- a/docs/src/browsers.md +++ b/docs/src/browsers.md @@ -236,7 +236,7 @@ With the VS Code extension you can run your tests on different browsers by check To run tests on multiple projects(browsers), select each project by checking the checkboxes next to the project name. -![Selecting projects to run tests on](https://github.com/microsoft/playwright/assets/13063165/6dc86ef4-6097-481c-9cab-b6e053ec7ea6) +Selecting projects to run tests on ### Run tests on different browsers * langs: python diff --git a/docs/src/ci-intro.md b/docs/src/ci-intro.md index c022f1e4a0e43..510604980174b 100644 --- a/docs/src/ci-intro.md +++ b/docs/src/ci-intro.md @@ -187,7 +187,7 @@ Once you have your [GitHub Actions workflow](#setting-up-github-actions) setup, ###### * langs: csharp -![dotnet repo on github](https://github.com/microsoft/playwright/assets/13063165/4f1b4cc3-b850-4d60-a99e-24057eaf91ad) +dotnet repo on github ## Opening the Workflows @@ -196,12 +196,12 @@ Click on the **Actions** tab to see the workflows. Here you see if your tests ha ###### * langs: js, python, java -![opening the workflow](https://user-images.githubusercontent.com/13063165/183423783-58bf2008-514e-4f96-9c12-c9a55703960c.png) +opening the workflow ###### * langs: csharp -![opening the workflow](https://github.com/microsoft/playwright/assets/13063165/71793c09-0815-4faa-866b-85684a1f87e5) +opening the workflow 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). @@ -215,12 +215,12 @@ Clicking on the workflow run shows you all the actions that GitHub performed and ###### * langs: js, python, java -![Viewing Test Logs](https://user-images.githubusercontent.com/13063165/183423783-58bf2008-514e-4f96-9c12-c9a55703960c.png) +Viewing Test Logs ###### * langs: csharp -![viewing the test logs](https://github.com/microsoft/playwright/assets/13063165/ba2d8d7b-ffce-42de-95e0-bcb35c421975) +viewing the test logs ## HTML Report @@ -245,7 +245,7 @@ Locally opening the report does not work as expected as you need a web server fo npx playwright show-report name-of-my-extracted-playwright-report ``` -![viewing the HTML report](https://github.com/microsoft/playwright/assets/13063165/c5f60e56-fb75-4a2d-a4b6-054b8c5d69c1) +viewing the HTML report To learn more about reports, check out our detailed guide on [HTML Reporter](/test-reporters.md#html-reporter) @@ -254,7 +254,7 @@ To learn more about reports, check out our detailed guide on [HTML Reporter](/te Once you have served the report using `npx playwright show-report`, click on the trace icon next to the test's file name as seen in the image above. You can then view the trace of your tests and inspect each action to try to find out why the tests are failing. -![playwright trace viewer](https://github.com/microsoft/playwright/assets/13063165/10fe3585-8401-4051-b1c2-b2e92ac4c274) +playwright trace viewer ## Viewing the Trace * langs: python, java diff --git a/docs/src/codegen.md b/docs/src/codegen.md index 8cafd449c5d1e..767329644ae0d 100644 --- a/docs/src/codegen.md +++ b/docs/src/codegen.md @@ -27,25 +27,25 @@ To record a test click on the **Record new** button from the Testing sidebar. Th In the browser go to the URL you wish to test and start clicking around to record your user actions. -![generating user actions](https://github.com/microsoft/playwright/assets/13063165/1d4c8f37-8325-4816-a665-d0e95e63f509) +generating user actions Playwright will record your actions and generate the test code directly in VS Code. You can also generate assertions by choosing one of the icons in the toolbar and then clicking on an element on the page to assert against. The following assertions can be generated: * `'assert visibility'` to assert that an element is visible * `'assert text'` to assert that an element contains specific text * `'assert value'` to assert that an element has a specific value -![generating assertions](https://github.com/microsoft/playwright/assets/13063165/d131eb35-b2ca-4bf4-a8ac-88b6e40dcf07) +generating assertions Once you are done recording click the **cancel** button or close the browser window. You can then inspect your `test-1.spec.ts` file and manually improve it if needed. -![code from a generated test](https://github.com/microsoft/playwright/assets/13063165/2ba4c212-4713-460a-b054-6dc6b67a9a7c) +code from a generated test ### Record at Cursor To record from a specific point in your test move your cursor to where you want to record more actions and then click the **Record at cursor** button from the Testing sidebar. If your browser window is not already open then first run the test with 'Show browser' checked and then click the **Record at cursor** button. -![record at cursor in vs code](https://github.com/microsoft/playwright/assets/13063165/77948ab8-92a2-435f-9833-0944da5ae664) +record at cursor in vs code In the browser window start performing the actions you want to record. @@ -54,7 +54,7 @@ In the browser window start performing the actions you want to record. In the test file in VS Code you will see your new generated actions added to your test at the cursor position. -![code from a generated test](https://github.com/microsoft/playwright/assets/13063165/4f4bb34e-9cda-41fe-bf65-8d8016d84c7f) +code from a generated test ### Generating locators @@ -103,22 +103,22 @@ With the test generator you can record: ###### * langs: js -![Recording a test](https://github.com/microsoft/playwright/assets/13063165/34a79ea1-639e-4cb3-8115-bfdc78e3d34d) +Recording a test ###### * langs: java -![recording a test](https://github.com/microsoft/playwright/assets/13063165/ec9c4071-4af8-4ae7-8b36-aebcc29bdbbb) +recording a test ###### * langs: python -![recording a test](https://github.com/microsoft/playwright/assets/13063165/9751b609-6e4c-486b-a961-f86f177b1d58) +recording a test ###### * langs: csharp -![recording a test](https://github.com/microsoft/playwright/assets/13063165/53bdfb6f-d462-4ce0-ab95-0619faaebf1e) +recording a test ###### * langs: js, java, python, csharp @@ -138,22 +138,22 @@ You can generate [locators](/locators.md) with the test generator. ###### * langs: js -![picking a locator](https://github.com/microsoft/playwright/assets/13063165/2c8a12e2-4e98-4fdd-af92-1d73ae696d86) +picking a locator ###### * langs: java -![picking a locator](https://github.com/microsoft/playwright/assets/13063165/733b48fd-5edf-4150-93f0-018adc52b6ff) +picking a locator ###### * langs: python -![picking a locator](https://github.com/microsoft/playwright/assets/13063165/95d11f48-96a4-46b9-9c2a-63c3aa4fdce7) +picking a locator ###### * langs: csharp -![picking a locator](https://github.com/microsoft/playwright/assets/13063165/1478f56f-422f-4276-9696-0674041f11dc) +picking a locator ## Emulation diff --git a/docs/src/library-python.md b/docs/src/library-python.md index 605cb9798f76a..a3702962b0561 100644 --- a/docs/src/library-python.md +++ b/docs/src/library-python.md @@ -7,7 +7,7 @@ title: "Getting started - Library" ### Pip -[![PyPI version](https://badge.fury.io/py/playwright.svg)](https://pypi.python.org/pypi/playwright/) +[PyPI version](https://pypi.python.org/pypi/playwright/) ```bash pip install --upgrade pip @@ -17,7 +17,7 @@ playwright install ### Conda -[![Anaconda version](https://img.shields.io/conda/v/microsoft/playwright)](https://anaconda.org/Microsoft/playwright) +[Anaconda version](https://anaconda.org/Microsoft/playwright) ```bash conda config --add channels conda-forge diff --git a/docs/src/mock.md b/docs/src/mock.md index eab111fd3d91d..aa0738fa1aa2c 100644 --- a/docs/src/mock.md +++ b/docs/src/mock.md @@ -99,7 +99,7 @@ assertThat(page.getByText("Strawberry")).isVisible(); ``` You can see from the trace of the example test that the API was never called, it was however fulfilled with the mock data. -![api mocking trace](https://github.com/microsoft/playwright/assets/13063165/3dc14cbf-c100-4efc-ac21-d7b52d698b53) +api mocking trace Read more about [advanced networking](./network.md). @@ -210,10 +210,10 @@ assertThat(page.getByText("Loquat", new Page.GetByTextOptions().setExact(true))) ``` In the trace of our test we can see that the API was called and the response was modified. -![trace of test showing api being called and fulfilled](https://github.com/microsoft/playwright/assets/13063165/8b8dd82d-1b3e-428e-871b-840581fed439) +trace of test showing api being called and fulfilled By inspecting the response we can see that our new fruit was added to the list. -![trace of test showing the mock response](https://github.com/microsoft/playwright/assets/13063165/03e6c87c-4ecc-47e8-9ca0-30fface25e9d) +trace of test showing the mock response Read more about [advanced networking](./network.md). @@ -232,12 +232,12 @@ The options object can contain the URL so that only requests with the URL matchi Setting `update` option to true will create or update the HAR file with the actual network information instead of serving the requests from the HAR file. Use it when creating a test to populate the HAR with real data. -#### +#### * langs: js Alternatively, you can also record HAR files by using the [`option: Browser.newContext.recordHar`] option in [`method: Browser.newContext`] when creating a browser context. This allows you to capture all network traffic for the entire context until the context is closed. -#### +#### * langs: csharp, java, python Alternatively, you can also record HAR files by using the [`option: Browser.newContext.recordHarPath`] option in [`method: Browser.newContext`] when creating a browser context. This allows you to capture all network traffic for the entire context until the context is closed. @@ -409,10 +409,10 @@ assertThat(page.getByText("Playwright", new Page.GetByTextOptions() .setExact(true))).isVisible(); ``` In the trace of our test we can see that the route was fulfilled from the HAR file and the API was not called. -![trace showing the HAR file being used](https://github.com/microsoft/playwright/assets/13063165/1bd7ab66-ea4f-43c2-a4e5-ca17d4837ff1) +trace showing the HAR file being used If we inspect the response we can see our new fruit was added to the JSON, which was done by manually updating the hashed `.txt` file inside the `hars` folder. -![trace showing response from HAR file](https://github.com/microsoft/playwright/assets/13063165/db3117fc-7b02-4973-9a51-29e213261a6a) +trace showing response from HAR file HAR replay matches URL and HTTP method strictly. For POST requests, it also matches POST payloads strictly. If multiple recordings match a request, the one with the most matching headers is picked. An entry resulting in a redirect will be followed automatically. diff --git a/docs/src/release-notes-csharp.md b/docs/src/release-notes-csharp.md index 23a4750116e96..04a288f2cdadf 100644 --- a/docs/src/release-notes-csharp.md +++ b/docs/src/release-notes-csharp.md @@ -148,7 +148,7 @@ This version was also tested against the following stable channels: ### Trace Viewer and HTML Reporter Updates - New Steps in Trace Viewer: - ![New Trace Viewer Steps](https://github.com/user-attachments/assets/1963ff7d-4070-41be-a79b-4333176921a2) + New Trace Viewer Steps - New method [`method: Locator.describe`] to describe a locator. Used for trace viewer. ```csharp var button = Page.GetByTestId("btn-sub").Describe("Subscribe button"); @@ -426,7 +426,7 @@ The Network tab in the trace viewer has several nice improvements: - better display of query string parameters - preview of font assets -![Network tab now has filters](https://github.com/user-attachments/assets/4bd1b67d-90bd-438b-a227-00b9e86872e2) +Network tab now has filters ### Miscellaneous @@ -736,7 +736,7 @@ This version was also tested against the following stable channels: ### Test Generator Update -![Playwright Test Generator](https://github.com/microsoft/playwright/assets/9881434/e8d67e2e-f36d-4301-8631-023948d3e190) +Playwright Test Generator New tools to generate assertions: - "Assert visibility" tool generates [`method: LocatorAssertions.toBeVisible`]. @@ -795,7 +795,7 @@ This version was also tested against the following stable channels: ### Trace Viewer Updates -![Playwright Trace Viewer](https://github.com/microsoft/playwright/assets/746130/0c41e20d-c54b-4600-8ca8-1cbb6393ddef) +Playwright Trace Viewer 1. Zoom into time range. 1. Network panel redesign. @@ -1107,7 +1107,7 @@ This version was also tested against the following stable channels: * **Live Locators in CodeGen.** Generate a locator for any element on the page using "Explore" tool. -![Locator Explorer](https://user-images.githubusercontent.com/9798949/202293757-2e3ec0ac-1feb-4d6f-9935-73e08658b76d.png) +Locator Explorer ### New APIs @@ -1577,7 +1577,7 @@ This version was also tested against the following stable channels: Playwright 1.17 introduces [frame locators](./api/class-framelocator) - a locator to the iframe on the page. Frame locators capture the logic sufficient to retrieve the `iframe` and then locate elements in that iframe. Frame locators are strict by default, will wait for `iframe` to appear and can be used in Web-First assertions. -![Graphics](https://user-images.githubusercontent.com/746130/142082759-2170db38-370d-43ec-8d41-5f9941f57d83.png) +Graphics Frame locators can be created with either [`method: Page.frameLocator`] or [`method: Locator.frameLocator`] method. @@ -1599,14 +1599,14 @@ Playwright Trace Viewer is now **available online** at https://trace.playwright. - New trace metadata tab with browser details - Snapshots now have URL bar -![image](https://user-images.githubusercontent.com/746130/141877831-29e37cd1-e574-4bd9-aab5-b13a463bb4ae.png) +image ### HTML Report Update - HTML report now supports dynamic filtering - Report is now a **single static HTML file** that could be sent by e-mail or as a slack attachment. -![image](https://user-images.githubusercontent.com/746130/141877402-e486643d-72c7-4db3-8844-ed2072c5d676.png) +image ### Ubuntu ARM64 support + more diff --git a/docs/src/release-notes-java.md b/docs/src/release-notes-java.md index f907564084806..c947e4b83fd05 100644 --- a/docs/src/release-notes-java.md +++ b/docs/src/release-notes-java.md @@ -146,7 +146,7 @@ This version was also tested against the following stable channels: ### Trace Viewer and HTML Reporter Updates - New Steps in Trace Viewer: - ![New Trace Viewer Steps](https://github.com/user-attachments/assets/1963ff7d-4070-41be-a79b-4333176921a2) + New Trace Viewer Steps - New method [`method: Locator.describe`] to describe a locator. Used for trace viewer. ```java Locator button = page.getByTestId("btn-sub").describe("Subscribe button"); @@ -405,7 +405,7 @@ The Network tab in the trace viewer has several nice improvements: - better display of query string parameters - preview of font assets -![Network tab now has filters](https://github.com/user-attachments/assets/4bd1b67d-90bd-438b-a227-00b9e86872e2) +Network tab now has filters ### Miscellaneous @@ -780,7 +780,7 @@ This version was also tested against the following stable channels: ### Test Generator Update -![Playwright Test Generator](https://github.com/microsoft/playwright/assets/9881434/e8d67e2e-f36d-4301-8631-023948d3e190) +Playwright Test Generator New tools to generate assertions: - "Assert visibility" tool generates [`method: LocatorAssertions.toBeVisible`]. @@ -838,7 +838,7 @@ This version was also tested against the following stable channels: ### Trace Viewer Updates -![Playwright Trace Viewer](https://github.com/microsoft/playwright/assets/746130/0c41e20d-c54b-4600-8ca8-1cbb6393ddef) +Playwright Trace Viewer 1. Zoom into time range. 1. Network panel redesign. @@ -1165,7 +1165,7 @@ This version was also tested against the following stable channels: * **Live Locators in CodeGen.** Generate a locator for any element on the page using "Explore" tool. -![Locator Explorer](https://user-images.githubusercontent.com/9798949/202293631-2f402cc2-35fb-4877-8ea1-82265fbbc232.png) +Locator Explorer ### New APIs @@ -1572,7 +1572,7 @@ Read more in [our documentation](./test-assertions). [Tracing](./api/class-tracing.md) now can embed Java sources to recorded traces, using new [`setSources`](./api/class-tracing#tracing-start-option-sources) option. -![tracing-java-sources](https://user-images.githubusercontent.com/746130/150180856-40a7df71-370c-4597-8665-40c77a5e06ad.png) +tracing-java-sources ### New APIs & changes @@ -1599,7 +1599,7 @@ This version was also tested against the following stable channels: Playwright 1.17 introduces [frame locators](./api/class-framelocator) - a locator to the iframe on the page. Frame locators capture the logic sufficient to retrieve the `iframe` and then locate elements in that iframe. Frame locators are strict by default, will wait for `iframe` to appear and can be used in Web-First assertions. -![Graphics](https://user-images.githubusercontent.com/746130/142082759-2170db38-370d-43ec-8d41-5f9941f57d83.png) +Graphics Frame locators can be created with either [`method: Page.frameLocator`] or [`method: Locator.frameLocator`] method. @@ -1621,14 +1621,14 @@ Playwright Trace Viewer is now **available online** at https://trace.playwright. - New trace metadata tab with browser details - Snapshots now have URL bar -![image](https://user-images.githubusercontent.com/746130/141877831-29e37cd1-e574-4bd9-aab5-b13a463bb4ae.png) +image ### HTML Report Update - HTML report now supports dynamic filtering - Report is now a **single static HTML file** that could be sent by e-mail or as a slack attachment. -![image](https://user-images.githubusercontent.com/746130/141877402-e486643d-72c7-4db3-8844-ed2072c5d676.png) +image ### Ubuntu ARM64 support + more @@ -1845,7 +1845,7 @@ mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="sh That will open the following GUI: -![image](https://user-images.githubusercontent.com/746130/121109654-d66c4480-c7c0-11eb-8d4d-eb70d2b03811.png) +image 👉 Read more in [trace viewer documentation](./trace-viewer.md). diff --git a/docs/src/release-notes-js.md b/docs/src/release-notes-js.md index 5218a69edd399..97b3a4c53d304 100644 --- a/docs/src/release-notes-js.md +++ b/docs/src/release-notes-js.md @@ -260,7 +260,7 @@ This version was also tested against the following stable channels: ### Trace Viewer and HTML Reporter Updates - New Steps in Trace Viewer and HTML reporter: - ![New Trace Viewer Steps](https://github.com/user-attachments/assets/1963ff7d-4070-41be-a79b-4333176921a2) + New Trace Viewer Steps - New option in `'html'` reporter to set the title of a specific test run: ```js import { defineConfig } from '@playwright/test'; @@ -369,7 +369,7 @@ This version was also tested against the following stable channels: New "Copy prompt" button on errors in the HTML report, trace viewer and UI mode. Click to copy a pre-filled LLM prompt that contains the error message and useful context for fixing the error. - ![Copy prompt](https://github.com/user-attachments/assets/f3654407-dd6d-4240-9845-0d96df2bf30a) + Copy prompt ### Filter visible elements @@ -398,7 +398,7 @@ Set option [`property: TestConfig.captureGitInfo`] to capture git information in HTML report will show this information when available: - ![Git information in the report](https://github.com/user-attachments/assets/f5b3f6f4-aa08-4a24-816c-7edf33ef0c37) + Git information in the report ### Test Step improvements @@ -653,7 +653,7 @@ The Network tab in the UI mode and trace viewer has several nice improvements: - better display of query string parameters - preview of font assets -![Network tab now has filters](https://github.com/user-attachments/assets/4bd1b67d-90bd-438b-a227-00b9e86872e2) +Network tab now has filters ### `--tsconfig` CLI option @@ -1056,7 +1056,7 @@ This version was also tested against the following stable channels: ### UI Mode Updates -![Playwright UI Mode](https://github.com/microsoft/playwright/assets/9881434/61ca7cfc-eb7a-4305-8b62-b6c9f098f300) +Playwright UI Mode * See tags in the test list. * Filter by tags by typing `@fast` or clicking on the tag itself. @@ -1189,7 +1189,7 @@ This version was also tested against the following stable channels: ### Test Generator Update -![Playwright Test Generator](https://github.com/microsoft/playwright/assets/9881434/e8d67e2e-f36d-4301-8631-023948d3e190) +Playwright Test Generator New tools to generate assertions: - "Assert visibility" tool generates [`method: LocatorAssertions.toBeVisible`]. @@ -1349,7 +1349,7 @@ This version was also tested against the following stable channels: ### UI Mode Updates -![Playwright UI Mode](https://github.com/microsoft/playwright/assets/746130/8ba27be0-58fd-4f62-8561-950480610369) +Playwright UI Mode 1. Zoom into time range. 1. Network panel redesign. @@ -1509,11 +1509,11 @@ This version was also tested against the following stable channels: * UI mode is now available in VSCode Playwright extension via a new "Show trace viewer" button: - ![Playwright UI Mode](https://github.com/microsoft/playwright/assets/746130/13094128-259b-477a-8bbb-c1181178e8a2) + Playwright UI Mode * UI mode and trace viewer mark network requests handled with [`method: Page.route`] and [`method: BrowserContext.route`] handlers, as well as those issued via the [API testing](./api-testing): - ![Trace Viewer](https://github.com/microsoft/playwright/assets/746130/0df2d4b6-faa3-465c-aff3-c435b430bfe1) + Trace Viewer * New option `maskColor` for methods [`method: Page.screenshot`], [`method: Locator.screenshot`], [`method: PageAssertions.toHaveScreenshot#1`] and [`method: LocatorAssertions.toHaveScreenshot#1`] to change default masking color: ```js @@ -1566,7 +1566,7 @@ This version was also tested against the following stable channels: ### Highlights * UI Mode now shows steps, fixtures and attachments: - ![UI Mode attachments](https://github.com/microsoft/playwright/assets/746130/1d280419-d79a-4a56-b2dc-54d631281d56) + UI Mode attachments * New property [`property: TestProject.teardown`] to specify a project that needs to run after this and all dependent projects have finished. Teardown is useful to cleanup any resources acquired by this project. @@ -1734,7 +1734,7 @@ This version was also tested against the following stable channels: New [UI Mode](./test-ui-mode.md) lets you explore, run and debug tests. Comes with a built-in watch mode. -![Playwright UI Mode](https://user-images.githubusercontent.com/746130/227004851-3901a691-4f8e-43d6-8d6b-cbfeafaeb999.png) +Playwright UI Mode Engage with a new flag `--ui`: @@ -1989,16 +1989,16 @@ This version was also tested against the following stable channels: * **Record at Cursor in VSCode.** You can run the test, position the cursor at the end of the test and continue generating the test. -![New VSCode Extension](https://user-images.githubusercontent.com/746130/202005839-aba2eeba-217b-424d-8496-8b4f5fa72f41.png) +New VSCode Extension * **Live Locators in VSCode.** You can hover and edit locators in VSCode to get them highlighted in the opened browser. * **Live Locators in CodeGen.** Generate a locator for any element on the page using "Explore" tool. -![Locator Explorer](https://user-images.githubusercontent.com/746130/201796876-01567a0b-ca61-4a9d-b12b-04786c471671.png) +Locator Explorer * **Codegen and Trace Viewer Dark Theme.** Automatically picked up from operating system settings. -![Dark Theme](https://user-images.githubusercontent.com/746130/201797969-603f74df-d7cf-4c56-befd-798dbd269796.png) +Dark Theme ### Test Runner @@ -2175,7 +2175,7 @@ This version was also tested against the following stable channels: * Pick selector. * Record new test from current page state. -![vscode extension screenshot](https://user-images.githubusercontent.com/746130/183781999-1b9fdbc5-cfae-47d6-b4f7-5d4ae89716a8.jpg) +vscode extension screenshot ### Test Runner @@ -2855,7 +2855,7 @@ This version was also tested against the following stable channels: Playwright 1.17 introduces [frame locators](./api/class-framelocator) - a locator to the iframe on the page. Frame locators capture the logic sufficient to retrieve the `iframe` and then locate elements in that iframe. Frame locators are strict by default, will wait for `iframe` to appear and can be used in Web-First assertions. -![Graphics](https://user-images.githubusercontent.com/746130/142082759-2170db38-370d-43ec-8d41-5f9941f57d83.png) +Graphics Frame locators can be created with either [`method: Page.frameLocator`] or [`method: Locator.frameLocator`] method. @@ -2877,14 +2877,14 @@ Playwright Trace Viewer is now **available online** at https://trace.playwright. - New trace metadata tab with browser details - Snapshots now have URL bar -![image](https://user-images.githubusercontent.com/746130/141877831-29e37cd1-e574-4bd9-aab5-b13a463bb4ae.png) +image ### HTML Report Update - HTML report now supports dynamic filtering - Report is now a **single static HTML file** that could be sent by e-mail or as a slack attachment. -![image](https://user-images.githubusercontent.com/746130/141877402-e486643d-72c7-4db3-8844-ed2072c5d676.png) +image ### Ubuntu ARM64 support + more @@ -2990,7 +2990,7 @@ $ npx playwright test --reporter=html The HTML reporter has all the information about tests and their failures, including surfacing trace and image artifacts. -![html reporter](https://user-images.githubusercontent.com/746130/138324311-94e68b39-b51a-4776-a446-f60037a77f32.png) +html reporter Read more about [our reporters](./test-reporters#html-reporter). @@ -3374,7 +3374,7 @@ npx playwright show-trace trace.zip That will open the following GUI: -![image](https://user-images.githubusercontent.com/746130/121109654-d66c4480-c7c0-11eb-8d4d-eb70d2b03811.png) +image 👉 Read more in [trace viewer documentation](./trace-viewer.md). diff --git a/docs/src/release-notes-python.md b/docs/src/release-notes-python.md index da3b69fa866a0..760a5534c5050 100644 --- a/docs/src/release-notes-python.md +++ b/docs/src/release-notes-python.md @@ -148,7 +148,7 @@ This version was also tested against the following stable channels: ### Trace Viewer and HTML Reporter Updates - New Steps in Trace Viewer: - ![New Trace Viewer Steps](https://github.com/user-attachments/assets/1963ff7d-4070-41be-a79b-4333176921a2) + New Trace Viewer Steps - New method [`method: Locator.describe`] to describe a locator. Used for trace viewer. ```python button = page.get_by_test_id("btn-sub").describe("Subscribe button") @@ -409,7 +409,7 @@ The Network tab in the trace viewer has several nice improvements: - better display of query string parameters - preview of font assets -![Network tab now has filters](https://github.com/user-attachments/assets/4bd1b67d-90bd-438b-a227-00b9e86872e2) +Network tab now has filters ### Miscellaneous @@ -695,7 +695,7 @@ This version was also tested against the following stable channels: ### Test Generator Update -![Playwright Test Generator](https://github.com/microsoft/playwright/assets/9881434/e8d67e2e-f36d-4301-8631-023948d3e190) +Playwright Test Generator New tools to generate assertions: - "Assert visibility" tool generates [`method: LocatorAssertions.toBeVisible`]. @@ -756,7 +756,7 @@ This version was also tested against the following stable channels: ### Trace Viewer Updates -![Playwright Trace Viewer](https://github.com/microsoft/playwright/assets/746130/0c41e20d-c54b-4600-8ca8-1cbb6393ddef) +Playwright Trace Viewer 1. Zoom into time range. 1. Network panel redesign. @@ -1079,7 +1079,7 @@ This version was also tested against the following stable channels: * **Live Locators in CodeGen.** Generate a locator for any element on the page using "Explore" tool. -![Locator Explorer](https://user-images.githubusercontent.com/9798949/202293514-8e2eade6-c809-4b0a-864b-899dfcee3d84.png) +Locator Explorer ### New APIs @@ -1384,7 +1384,7 @@ Note that the new methods [`method: Page.routeFromHAR`] and [`method: BrowserCon - Codegen now supports generating Pytest Tests - ![Graphics](https://user-images.githubusercontent.com/746130/168098384-40784024-6c26-4426-8255-e714862af6fc.png) + Graphics @@ -1580,7 +1580,7 @@ This version was also tested against the following stable channels: Playwright 1.17 introduces [frame locators](./api/class-framelocator) - a locator to the iframe on the page. Frame locators capture the logic sufficient to retrieve the `iframe` and then locate elements in that iframe. Frame locators are strict by default, will wait for `iframe` to appear and can be used in Web-First assertions. -![Graphics](https://user-images.githubusercontent.com/746130/142082759-2170db38-370d-43ec-8d41-5f9941f57d83.png) +Graphics Frame locators can be created with either [`method: Page.frameLocator`] or [`method: Locator.frameLocator`] method. @@ -1602,14 +1602,14 @@ Playwright Trace Viewer is now **available online** at https://trace.playwright. - New trace metadata tab with browser details - Snapshots now have URL bar -![image](https://user-images.githubusercontent.com/746130/141877831-29e37cd1-e574-4bd9-aab5-b13a463bb4ae.png) +image ### HTML Report Update - HTML report now supports dynamic filtering - Report is now a **single static HTML file** that could be sent by e-mail or as a slack attachment. -![image](https://user-images.githubusercontent.com/746130/141877402-e486643d-72c7-4db3-8844-ed2072c5d676.png) +image ### Ubuntu ARM64 support + more @@ -1832,7 +1832,7 @@ playwright show-trace trace.zip That will open the following GUI: -![image](https://user-images.githubusercontent.com/746130/121109654-d66c4480-c7c0-11eb-8d4d-eb70d2b03811.png) +image 👉 Read more in [trace viewer documentation](./trace-viewer.md). diff --git a/docs/src/running-tests-csharp.md b/docs/src/running-tests-csharp.md index 1711355410a36..b9f2ae5c563d4 100644 --- a/docs/src/running-tests-csharp.md +++ b/docs/src/running-tests-csharp.md @@ -177,7 +177,7 @@ $env:PWDEBUG=1 dotnet test ``` -![debugging tests with playwright inspector](https://github.com/microsoft/playwright/assets/13063165/a1e758d3-d379-414f-be0b-7339f12bb635) +debugging tests with playwright inspector Check out our [debugging guide](./debug.md) to learn more about the [Playwright Inspector](./debug.md#playwright-inspector) as well as debugging with [Browser Developer tools](./debug.md#browser-developer-tools). diff --git a/docs/src/running-tests-python.md b/docs/src/running-tests-python.md index 6aca52060f791..8ea161503f8f0 100644 --- a/docs/src/running-tests-python.md +++ b/docs/src/running-tests-python.md @@ -131,7 +131,7 @@ This command will open up a Browser window as well as the Playwright Inspector. While debugging you can use the Pick Locator button to select an element on the page and see the locator that Playwright would use to find that element. You can also edit the locator and see it highlighting live on the Browser window. Use the Copy Locator button to copy the locator to your clipboard and then paste it into your test. -![Playwright Inspector](https://github.com/microsoft/playwright/assets/13063165/c94c89c8-f945-460c-a653-7809c6ca50ee) +Playwright Inspector Check out our [debugging guide](./debug.md) to learn more about the [Playwright Inspector](./debug.md#playwright-inspector) as well as debugging with [Browser Developer tools](./debug.md#browser-developer-tools). diff --git a/docs/src/test-ui-mode-js.md b/docs/src/test-ui-mode-js.md index a097daa0dd7ef..fddf7e17f5b2c 100644 --- a/docs/src/test-ui-mode-js.md +++ b/docs/src/test-ui-mode-js.md @@ -26,90 +26,90 @@ npx playwright test --ui Once you launch UI Mode you will see a list of all your test files. You can run all your tests by clicking the triangle icon in the sidebar. You can also run a single test file, a block of tests or a single test by hovering over the name and clicking on the triangle next to it. -![running tests in ui mode](https://github.com/microsoft/playwright/assets/13063165/6b87712f-64a5-4d73-a91d-6562b864712c) +running tests in ui mode ## Filtering tests Filter tests by text or `@tag` or by passed, failed or skipped tests. You can also filter by [projects](./test-projects) as set in your `playwright.config` file. If you are using project dependencies make sure to run your setup tests first before running the tests that depend on them. The UI mode will not take into consideration the setup tests and therefore you will have to manually run them first. -![filtering tests in ui mode](https://github.com/microsoft/playwright/assets/13063165/6f05e589-036d-45d5-9078-38134e1261e4) +filtering tests in ui mode ## Timeline view At the top of the trace you can see a timeline view of your test with different colors to highlight navigation and actions. Hover back and forth to see an image snapshot for each action. Double click on an action to see the time range for that action. You can use the slider in the timeline to increase the actions selected and these will be shown in the Actions tab and all console logs and network logs will be filtered to only show the logs for the actions selected. -![timeline view in ui mode](https://github.com/microsoft/playwright/assets/13063165/811a9985-32aa-4a3e-9869-de32053cf468) +timeline view in ui mode ## Actions In the Actions tab you can see what locator was used for every action and how long each one took to run. Hover over each action of your test and visually see the change in the DOM snapshot. Go back and forward in time and click an action to inspect and debug. Use the Before and After tabs to visually see what happened before and after the action. -![use before and after actions in ui mode](https://github.com/microsoft/playwright/assets/13063165/7b22fab5-7346-4b98-8fdd-a78ed280647f) +use before and after actions in ui mode ## Pop out and inspect the DOM Pop out the DOM snapshot into its own window for a better debugging experience by clicking on the pop out icon above the DOM snapshot. From there you can open the browser DevTools and inspect the HTML, CSS, Console etc. Go back to UI Mode and click on another action and pop that one out to easily compare the two side by side or debug each individually. -![pop out dom snapshot in ui mode](https://github.com/microsoft/playwright/assets/13063165/f9f43a0c-78d7-4574-9a58-c69d2ec53c8f) +pop out dom snapshot in ui mode ## Pick locator Click on the pick locator button and hover over the DOM snapshot to see the locator for each element highlighted as you hover. Click on an element to add the locator playground. You can modify the locator in the playground and see if your modified locator matches any locators in the DOM snapshot. Once you are satisfied with the locator you can use the copy button to copy the locator and paste it into your test. -![pick locator in ui mode](https://github.com/microsoft/playwright/assets/13063165/9e7eeb84-bd26-4010-8614-75e24b56c716) +pick locator in ui mode ## Source As you hover over each action of your test the line of code for that action is highlighted in the source panel. The button "Open in VSCode" is at the top-right of this section. Upon clicking the button, it will open your test in VS Code right at the line of code that you clicked on. -![showing source code of tests in ui mode](https://github.com/microsoft/playwright/assets/13063165/49b9fa2a-8a57-4044-acaa-0a2ea4784c5c) +showing source code of tests in ui mode ## Call The call tab shows you information about the action such as the time it took, what locator was used, if in strict mode and what key was used. -![showing call tab in ui mode](https://github.com/microsoft/playwright/assets/13063165/442314c3-0b16-4400-bf25-c198f8654849) +showing call tab in ui mode ## Log See a full log of your test to better understand what Playwright is doing behind the scenes such as scrolling into view, waiting for element to be visible, enabled and stable and performing actions such as click, fill, press etc. -![showing log of tests in ui mode](https://github.com/microsoft/playwright/assets/13063165/1d214ee5-2c07-414d-a342-f88d0864ac89) +showing log of tests in ui mode ## Errors If your test fails you will see the error messages for each test in the Errors tab. The timeline will also show a red line highlighting where the error occurred. You can also click on the source tab to see on which line of the source code the error is. -![showing errors in ui mode](https://github.com/microsoft/playwright/assets/13063165/ffca2fd1-5349-41fb-ade9-ace143bb2c58) +showing errors in ui mode ## Console See console logs from the browser as well as from your test. Different icons are displayed to show you if the console log came from the browser or from the test file. -![showing console logs from tests in ui mode](https://github.com/microsoft/playwright/assets/13063165/b6a44763-da04-4152-bbac-3369ca4a60ac) +showing console logs from tests in ui mode ## Network The Network tab shows you all the network requests that were made during your test. You can sort by different types of requests, status code, method, request, content type, duration and size. Click on a request to see more information about it such as the request headers, response headers, request body and response body. -![showing network requests from tests in ui mode](https://github.com/microsoft/playwright/assets/13063165/946c2722-447a-4005-9518-b4e9b73a8240) +showing network requests from tests in ui mode ## Attachments The "Attachments" tab allows you to explore attachments. If you're doing [visual regression testing](./test-snapshots.md), you'll be able to compare screenshots by examining the image diff, the actual image and the expected image. When you click on the expected image you can use the slider to slide one image over the other so you can easily see the differences in your screenshots. -![ui mode with attachments](https://github.com/microsoft/playwright/assets/13063165/bb83b406-84ed-4380-a96c-0e62d1388093) +ui mode with attachments ## Metadata Next to the Actions tab you will find the Metadata tab which will show you more information on your test such as the Browser, viewport size, test duration and more. -![metadata tab in ui mode](https://github.com/microsoft/playwright/assets/13063165/befff46e-381a-41c2-8259-e47442add425) +metadata tab in ui mode ## Watch mode Next to the name of each test in the sidebar you will find an eye icon. Clicking on the icon will activate watch mode which will re-run the test when you make changes to it. You can watch a number of tests at the same time be clicking the eye icon next to each one or all tests by clicking the eye icon at the top of the sidebar. -![watch mode in ui mode](https://github.com/microsoft/playwright/assets/13063165/20d7d44c-b52d-43ff-8871-8b828671f3da) +watch mode in ui mode ## Docker & GitHub Codespaces diff --git a/docs/src/trace-viewer-intro-csharp.md b/docs/src/trace-viewer-intro-csharp.md index 885a92eab24fb..ea91452fc153a 100644 --- a/docs/src/trace-viewer-intro-csharp.md +++ b/docs/src/trace-viewer-intro-csharp.md @@ -254,7 +254,7 @@ You can open the saved trace using the Playwright CLI or in your browser on [`tr pwsh bin/Debug/net8.0/playwright.ps1 show-trace bin/Debug/net8.0/playwright-traces/PlaywrightTests.ExampleTest.GetStartedLink.zip ``` -![playwright trace viewer dotnet](https://github.com/microsoft/playwright/assets/13063165/4372d661-5bfa-4e1f-be65-0d2fe165a75c) +playwright trace viewer dotnet Check out our detailed guide on [Trace Viewer](/trace-viewer.md) to learn more about the trace viewer and how to setup your tests to record a trace only when the test fails. diff --git a/docs/src/trace-viewer-intro-java-python.md b/docs/src/trace-viewer-intro-java-python.md index 79a415e54a902..008c4cc9520fa 100644 --- a/docs/src/trace-viewer-intro-java-python.md +++ b/docs/src/trace-viewer-intro-java-python.md @@ -62,7 +62,7 @@ context.tracing.stop(path = "trace.zip") ## Recording a trace * langs: java - + Traces can be recorded using the [`property: BrowserContext.tracing`] API as follows: ```java @@ -101,7 +101,7 @@ playwright show-trace trace.zip ###### * langs: python, java -![playwright trace viewer](https://github.com/microsoft/playwright/assets/13063165/10fe3585-8401-4051-b1c2-b2e92ac4c274) +playwright trace viewer To learn more check out our detailed guide on [Trace Viewer](/trace-viewer.md). diff --git a/docs/src/trace-viewer.md b/docs/src/trace-viewer.md index f7bb39eaa836f..dc06bcdfb50a6 100644 --- a/docs/src/trace-viewer.md +++ b/docs/src/trace-viewer.md @@ -688,7 +688,7 @@ public class WithTestNameAttribute : BeforeAfterTestAttribute In the Actions tab you can see what locator was used for every action and how long each one took to run. Hover over each action of your test and visually see the change in the DOM snapshot. Go back and forward in time and click an action to inspect and debug. Use the Before and After tabs to visually see what happened before and after the action. -![actions tab in trace viewer](https://github.com/microsoft/playwright/assets/13063165/948b65cd-f0fd-4c7f-8e53-2c632b5a07f1) +actions tab in trace viewer **Selecting each action reveals:** - Action snapshots @@ -701,7 +701,7 @@ When tracing with the [`option: Tracing.start.screenshots`] option turned on (de Double click on an action to see the time range for that action. You can use the slider in the timeline to increase the actions selected and these will be shown in the Actions tab and all console logs and network logs will be filtered to only show the logs for the actions selected. -![timeline view in trace viewer](https://github.com/microsoft/playwright/assets/13063165/b04a7d75-54bb-4ab2-9e30-e76f6f74a2c8) +timeline view in trace viewer ### Snapshots @@ -716,7 +716,7 @@ When tracing with the [`option: Tracing.start.snapshots`] option turned on (defa Here is what the typical Action snapshot looks like: -![action tab in trace viewer](https://github.com/microsoft/playwright/assets/13063165/7168d549-eb0a-4964-9c93-483f03711fa9) +action tab in trace viewer Notice how it highlights both, the DOM Node as well as the exact click position. @@ -724,31 +724,31 @@ Notice how it highlights both, the DOM Node as well as the exact click position. When you click on an action in the sidebar, the line of code for that action is highlighted in the source panel. -![showing source code tab in trace viewer](https://github.com/microsoft/playwright/assets/13063165/daa8845d-c250-4923-aa7a-5d040da9adc5) +showing source code tab in trace viewer ### Call The call tab shows you information about the action such as the time it took, what locator was used, if in strict mode and what key was used. -![showing call tab in trace viewer](https://github.com/microsoft/playwright/assets/13063165/95498580-f9dd-4932-a123-c37fe7cfc3c2) +showing call tab in trace viewer ### Log See a full log of your test to better understand what Playwright is doing behind the scenes such as scrolling into view, waiting for element to be visible, enabled and stable and performing actions such as click, fill, press etc. -![showing log of tests in trace viewer](https://github.com/microsoft/playwright/assets/13063165/de621461-3bab-4140-b39d-9f02d6672dbf) +showing log of tests in trace viewer ### Errors If your test fails you will see the error messages for each test in the Errors tab. The timeline will also show a red line highlighting where the error occurred. You can also click on the source tab to see on which line of the source code the error is. -![showing errors in trace viewer](https://github.com/microsoft/playwright/assets/13063165/e9ef77b3-05d1-4df2-852c-981023723d34) +showing errors in trace viewer ### Console See console logs from the browser as well as from your test. Different icons are displayed to show you if the console log came from the browser or from the test file. -![showing log of tests in trace viewer](https://github.com/microsoft/playwright/assets/13063165/4107c08d-1eaf-421c-bdd4-9dd2aa641d4a) +showing log of tests in trace viewer Double click on an action from your test in the actions sidebar. This will filter the console to only show the logs that were made during that action. Click the *Show all* button to see all console logs again. @@ -759,7 +759,7 @@ Use the timeline to filter actions, by clicking a start point and dragging to an The Network tab shows you all the network requests that were made during your test. You can sort by different types of requests, status code, method, request, content type, duration and size. Click on a request to see more information about it such as the request headers, response headers, request body and response body. -![network requests tab in trace viewer](https://github.com/microsoft/playwright/assets/13063165/0a3d1671-8ccd-4f7a-a844-35f5eb37f236) +network requests tab in trace viewer Double click on an action from your test in the actions sidebar. This will filter the network requests to only show the requests that were made during that action. Click the *Show all* button to see all network requests again. @@ -769,12 +769,12 @@ Use the timeline to filter actions, by clicking a start point and dragging to an Next to the Actions tab you will find the Metadata tab which will show you more information on your test such as the Browser, viewport size, test duration and more. -![meta data in trace viewer](https://github.com/microsoft/playwright/assets/13063165/82ab3d33-1ec9-4b8a-9cf2-30a6e2d59091) +meta data in trace viewer ### Attachments * langs: js The "Attachments" tab allows you to explore attachments. If you're doing [visual regression testing](./test-snapshots.md), you'll be able to compare screenshots by examining the image diff, the actual image and the expected image. When you click on the expected image you can use the slider to slide one image over the other so you can easily see the differences in your screenshots. -![attachments tab in trace viewer](https://github.com/microsoft/playwright/assets/13063165/4386178a-5808-4fa8-9436-315350a23b04) +attachments tab in trace viewer