diff --git a/dotnet/docs/ci-intro.mdx b/dotnet/docs/ci-intro.mdx
index 58d4444525..fcefd1fca1 100644
--- a/dotnet/docs/ci-intro.mdx
+++ b/dotnet/docs/ci-intro.mdx
@@ -58,14 +58,14 @@ Looking at the list of steps in `jobs.test.steps`, you can see that the workflow
Once you have your [GitHub Actions workflow](#setting-up-github-actions) setup, then all you need to do is [Create a repo on GitHub](https://docs.github.com/en/get-started/quickstart/create-a-repo) or push your code to an existing repository. Follow the instructions on GitHub and don't forget to [initialize a git repository](https://github.com/git-guides/git-init) using the `git init` command so you can [add](https://github.com/git-guides/git-add), [commit](https://github.com/git-guides/git-commit), and [push](https://github.com/git-guides/git-push) your code.
######
-
+
## Opening the Workflows
Click on the **Actions** tab to see the workflows. Here you see if your tests have passed or failed.
######
-
+
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).
@@ -76,7 +76,7 @@ On Pull Requests you can also click on the **Details** link in the [PR status ch
Clicking on the workflow run shows you all the actions that GitHub performed and clicking on **Run Playwright tests** shows the error messages, what was expected and what was received as well as the call log.
######
-
+
## Viewing the Trace
diff --git a/dotnet/docs/codegen.mdx b/dotnet/docs/codegen.mdx
index 4f8caac25c..c537b13fff 100644
--- a/dotnet/docs/codegen.mdx
+++ b/dotnet/docs/codegen.mdx
@@ -36,7 +36,7 @@ With the test generator you can record:
* `'assert value'` to assert that an element has a specific value
######
-
+
######
When you have finished interacting with the page, press the **record** button to stop the recording and use the **copy** button to copy the generated code to your editor.
@@ -52,7 +52,7 @@ You can generate [locators](/locators.mdx) with the test generator.
* You can then edit the locator in this field to fine tune it or use the copy button to copy it and paste it into your code.
######
-
+
## Emulation
diff --git a/dotnet/docs/mock.mdx b/dotnet/docs/mock.mdx
index cc225a7251..eee19181de 100644
--- a/dotnet/docs/mock.mdx
+++ b/dotnet/docs/mock.mdx
@@ -32,7 +32,9 @@ await page.GotoAsync("https://demo.playwright.dev/api-mocking");
await Expect(page.GetByTextAsync("Strawberry")).ToBeVisibleAsync();
```
-You can see from the trace of the example test that the API was never called, it was however fulfilled with the mock data. 
+You can see from the trace of the example test that the API was never called, it was however fulfilled with the mock data.
+
+
Read more about [advanced networking](./network.mdx).
@@ -63,9 +65,13 @@ await page.GotoAsync("https://demo.playwright.dev/api-mocking");
await Expect(page.GetByTextAsync("Loquat", new () { Exact = true })).ToBeVisibleAsync();
```
-In the trace of our test we can see that the API was called and the response was modified. 
+In the trace of our test we can see that the API was called and the response was modified.
+
+
+
+By inspecting the response we can see that our new fruit was added to the list.
-By inspecting the response we can see that our new fruit was added to the list. 
+
Read more about [advanced networking](./network.mdx).
@@ -135,9 +141,13 @@ await page.GotoAsync("https://demo.playwright.dev/api-mocking");
await page.ExpectByTextAsync("Playwright", new() { Exact = true }).ToBeVisibleAsync();
```
-In the trace of our test we can see that the route was fulfilled from the HAR file and the API was not called. 
+In the trace of our test we can see that the route was fulfilled from the HAR file and the API was not called.
+
+
+
+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.
-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. 
+
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/dotnet/docs/release-notes.mdx b/dotnet/docs/release-notes.mdx
index c5f2f9c612..c32582d98d 100644
--- a/dotnet/docs/release-notes.mdx
+++ b/dotnet/docs/release-notes.mdx
@@ -42,7 +42,7 @@ This version was also tested against the following stable channels:
### Chrome for Testing
-Starting with this release, Playwright switches from Chromium, to using [Chrome for Testing](https://developer.chrome.com/blog/chrome-for-testing/) builds. Both headed and headless browsers are subject to this. Your tests should still be passing after upgrading to Playwright 1.57.
+Playwright now runs on [Chrome for Testing](https://googlechromelabs.github.io/chrome-for-testing/) builds rather than Chromium. Headed mode uses `chrome`; headless mode uses `chrome-headless-shell`. Existing tests should continue to pass after upgrading to v1.57.
We're expecting no functional changes to come from this switch. The biggest change is the new icon and title in your toolbar.
@@ -129,7 +129,9 @@ This version was also tested against the following stable channels:
## Version 1.53
### Trace Viewer and HTML Reporter Updates
-- New Steps in Trace Viewer: 
+- New Steps in Trace Viewer:
+
+ 
- New method [Locator.Describe()](/api/class-locator.mdx#locator-describe) to describe a locator. Used for trace viewer.
```csharp
@@ -381,7 +383,7 @@ The Network tab in the trace viewer has several nice improvements:
- better display of query string parameters
- preview of font assets
-
+
### Miscellaneous
- The `mcr.microsoft.com/playwright/dotnet:v1.47.0` now serves a Playwright image based on Ubuntu 24.04 Noble. To use the 22.04 jammy-based image, please use `mcr.microsoft.com/playwright/dotnet:v1.47.0-jammy` instead.
@@ -668,7 +670,7 @@ This version was also tested against the following stable channels:
### Test Generator Update
-
+
New tools to generate assertions:
- "Assert visibility" tool generates [Expect(Locator).ToBeVisibleAsync()](/api/class-locatorassertions.mdx#locator-assertions-to-be-visible).
@@ -721,7 +723,7 @@ This version was also tested against the following stable channels:
### Trace Viewer Updates
-
+
1. Zoom into time range.
1. Network panel redesign.
@@ -982,7 +984,7 @@ This version was also tested against the following stable channels:
### Playwright Tools
* **Live Locators in CodeGen.** Generate a locator for any element on the page using "Explore" tool.
-
+
### New APIs
- [Locator.BlurAsync()](/api/class-locator.mdx#locator-blur)
@@ -1406,7 +1408,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.
-
+
Frame locators can be created with either [Page.FrameLocator()](/api/class-page.mdx#page-frame-locator) or [Locator.FrameLocator()](/api/class-locator.mdx#locator-frame-locator) method.
@@ -1427,13 +1429,13 @@ Playwright Trace Viewer is now **available online** at https://trace.playwright.
- New trace metadata tab with browser details
- Snapshots now have URL bar
-
+
### 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.
-
+
### Ubuntu ARM64 support + more
- Playwright now supports **Ubuntu 20.04 ARM64**. You can now run Playwright tests inside Docker on Apple M1 and on Raspberry Pi.
diff --git a/dotnet/docs/running-tests.mdx b/dotnet/docs/running-tests.mdx
index a396d776f0..1b1acfed34 100644
--- a/dotnet/docs/running-tests.mdx
+++ b/dotnet/docs/running-tests.mdx
@@ -237,7 +237,7 @@ dotnet test
-
+
Check out our [debugging guide](./debug.mdx) to learn more about the [Playwright Inspector](./debug.mdx#playwright-inspector) as well as debugging with [Browser Developer tools](./debug.mdx#browser-developer-tools).
diff --git a/dotnet/docs/trace-viewer-intro.mdx b/dotnet/docs/trace-viewer-intro.mdx
index ab33e53f7b..fe608434ab 100644
--- a/dotnet/docs/trace-viewer-intro.mdx
+++ b/dotnet/docs/trace-viewer-intro.mdx
@@ -253,7 +253,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
```
-
+
Check out our detailed guide on [Trace Viewer](/trace-viewer.mdx) 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/dotnet/docs/trace-viewer.mdx b/dotnet/docs/trace-viewer.mdx
index 3ceb62a581..1943dbbf33 100644
--- a/dotnet/docs/trace-viewer.mdx
+++ b/dotnet/docs/trace-viewer.mdx
@@ -517,7 +517,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.
-
+
**Selecting each action reveals:**
- Action snapshots
@@ -530,7 +530,7 @@ When tracing with the [Screenshots](/api/class-tracing.mdx#tracing-start-option-
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.
-
+
### Snapshots
@@ -544,7 +544,7 @@ When tracing with the [Snapshots](/api/class-tracing.mdx#tracing-start-option-sn
Here is what the typical Action snapshot looks like:
-
+
Notice how it highlights both, the DOM Node as well as the exact click position.
@@ -552,31 +552,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.
-
+
### 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.
-
+
### 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.
-
+
### 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.
-
+
### 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.
-
+
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.
@@ -586,7 +586,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.
-
+
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.
@@ -596,7 +596,7 @@ 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.
-
+
[APIRequest]: /api/class-apirequest.mdx "APIRequest"
diff --git a/java/docs/ci-intro.mdx b/java/docs/ci-intro.mdx
index 494caa884a..93fb031086 100644
--- a/java/docs/ci-intro.mdx
+++ b/java/docs/ci-intro.mdx
@@ -65,14 +65,14 @@ Once you have your [GitHub Actions workflow](#setting-up-github-actions) setup,
Click on the **Actions** tab to see the workflows. Here you see if your tests have passed or failed.
######
-
+
## Viewing Test Logs
Clicking on the workflow run shows you all the actions that GitHub performed and clicking on **Run Playwright tests** shows the error messages, what was expected and what was received as well as the call log.
######
-
+
## Viewing the Trace
diff --git a/java/docs/codegen.mdx b/java/docs/codegen.mdx
index 1d5ec814d2..4426925976 100644
--- a/java/docs/codegen.mdx
+++ b/java/docs/codegen.mdx
@@ -36,7 +36,7 @@ With the test generator you can record:
* `'assert value'` to assert that an element has a specific value
######
-
+
######
When you have finished interacting with the page, press the **record** button to stop the recording and use the **copy** button to copy the generated code to your editor.
@@ -52,7 +52,7 @@ You can generate [locators](/locators.mdx) with the test generator.
* You can then edit the locator in this field to fine tune it or use the copy button to copy it and paste it into your code.
######
-
+
## Emulation
diff --git a/java/docs/mock.mdx b/java/docs/mock.mdx
index 4e10234050..6a0542092f 100644
--- a/java/docs/mock.mdx
+++ b/java/docs/mock.mdx
@@ -33,7 +33,9 @@ page.navigate("https://demo.playwright.dev/api-mocking");
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. 
+You can see from the trace of the example test that the API was never called, it was however fulfilled with the mock data.
+
+
Read more about [advanced networking](./network.mdx).
@@ -61,9 +63,13 @@ page.navigate("https://demo.playwright.dev/api-mocking");
assertThat(page.getByText("Loquat", new Page.GetByTextOptions().setExact(true))).isVisible();
```
-In the trace of our test we can see that the API was called and the response was modified. 
+In the trace of our test we can see that the API was called and the response was modified.
+
+
+
+By inspecting the response we can see that our new fruit was added to the list.
-By inspecting the response we can see that our new fruit was added to the list. 
+
Read more about [advanced networking](./network.mdx).
@@ -132,9 +138,13 @@ 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. 
+In the trace of our test we can see that the route was fulfilled from the HAR file and the API was not called.
+
+
+
+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.
-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. 
+
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/java/docs/release-notes.mdx b/java/docs/release-notes.mdx
index c0e95bb529..de290a66b0 100644
--- a/java/docs/release-notes.mdx
+++ b/java/docs/release-notes.mdx
@@ -42,7 +42,7 @@ This version was also tested against the following stable channels:
### Chrome for Testing
-Starting with this release, Playwright switches from Chromium, to using [Chrome for Testing](https://developer.chrome.com/blog/chrome-for-testing/) builds. Both headed and headless browsers are subject to this. Your tests should still be passing after upgrading to Playwright 1.57.
+Playwright now runs on [Chrome for Testing](https://googlechromelabs.github.io/chrome-for-testing/) builds rather than Chromium. Headed mode uses `chrome`; headless mode uses `chrome-headless-shell`. Existing tests should continue to pass after upgrading to v1.57.
We're expecting no functional changes to come from this switch. The biggest change is the new icon and title in your toolbar.
@@ -127,7 +127,9 @@ This version was also tested against the following stable channels:
## Version 1.53
### Trace Viewer and HTML Reporter Updates
-- New Steps in Trace Viewer: 
+- New Steps in Trace Viewer:
+
+
- New method [Locator.describe()](/api/class-locator.mdx#locator-describe) to describe a locator. Used for trace viewer.
```java
@@ -361,7 +363,7 @@ The Network tab in the trace viewer has several nice improvements:
- better display of query string parameters
- preview of font assets
-
+
### Miscellaneous
- The `mcr.microsoft.com/playwright/java:v1.47.0` now serves a Playwright image based on Ubuntu 24.04 Noble. To use the 22.02 jammy-based image, please use `mcr.microsoft.com/playwright/java:v1.47.0-jammy` instead.
@@ -710,7 +712,7 @@ This version was also tested against the following stable channels:
### Test Generator Update
-
+
New tools to generate assertions:
- "Assert visibility" tool generates [assertThat(locator).isVisible()](/api/class-locatorassertions.mdx#locator-assertions-to-be-visible).
@@ -762,7 +764,7 @@ This version was also tested against the following stable channels:
### Trace Viewer Updates
-
+
1. Zoom into time range.
1. Network panel redesign.
@@ -1038,7 +1040,7 @@ This version was also tested against the following stable channels:
### Playwright Tools
* **Live Locators in CodeGen.** Generate a locator for any element on the page using "Explore" tool.
-
+
### New APIs
- [Locator.blur()](/api/class-locator.mdx#locator-blur)
@@ -1399,7 +1401,7 @@ Read more in [our documentation](./test-assertions).
[Tracing](./api/class-tracing.mdx) now can embed Java sources to recorded traces, using new [`setSources`](./api/class-tracing#tracing-start-option-sources) option.
-
+
### New APIs & changes
- [`acceptDownloads`](./api/class-browser#browser-new-context-option-accept-downloads) option now defaults to `true`.
@@ -1419,7 +1421,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.
-
+
Frame locators can be created with either [Page.frameLocator()](/api/class-page.mdx#page-frame-locator) or [Locator.frameLocator()](/api/class-locator.mdx#locator-frame-locator) method.
@@ -1440,13 +1442,13 @@ Playwright Trace Viewer is now **available online** at https://trace.playwright.
- New trace metadata tab with browser details
- Snapshots now have URL bar
-
+
### 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.
-
+
### Ubuntu ARM64 support + more
- Playwright now supports **Ubuntu 20.04 ARM64**. You can now run Playwright tests inside Docker on Apple M1 and on Raspberry Pi.
@@ -1644,7 +1646,7 @@ mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="sh
That will open the following GUI:
-
+
👉 Read more in [trace viewer documentation](./trace-viewer.mdx).
diff --git a/java/docs/trace-viewer-intro.mdx b/java/docs/trace-viewer-intro.mdx
index 1110c26c0a..d741498e12 100644
--- a/java/docs/trace-viewer-intro.mdx
+++ b/java/docs/trace-viewer-intro.mdx
@@ -47,7 +47,7 @@ mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="sh
```
######
-
+
To learn more check out our detailed guide on [Trace Viewer](/trace-viewer.mdx).
diff --git a/java/docs/trace-viewer.mdx b/java/docs/trace-viewer.mdx
index 2bf2197014..ba75839e33 100644
--- a/java/docs/trace-viewer.mdx
+++ b/java/docs/trace-viewer.mdx
@@ -72,7 +72,7 @@ This will record the trace and place it into the file named `trace.zip`.
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.
-
+
**Selecting each action reveals:**
- Action snapshots
@@ -85,7 +85,7 @@ When tracing with the [setScreenshots](/api/class-tracing.mdx#tracing-start-opti
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.
-
+
### Snapshots
@@ -99,7 +99,7 @@ When tracing with the [setSnapshots](/api/class-tracing.mdx#tracing-start-option
Here is what the typical Action snapshot looks like:
-
+
Notice how it highlights both, the DOM Node as well as the exact click position.
@@ -107,31 +107,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.
-
+
### 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.
-
+
### 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.
-
+
### 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.
-
+
### 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.
-
+
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.
@@ -141,7 +141,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.
-
+
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.
@@ -151,7 +151,7 @@ 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.
-
+
[APIRequest]: /api/class-apirequest.mdx "APIRequest"
diff --git a/nodejs/docs/browsers.mdx b/nodejs/docs/browsers.mdx
index 07aedaf32a..6f5716ebac 100644
--- a/nodejs/docs/browsers.mdx
+++ b/nodejs/docs/browsers.mdx
@@ -153,7 +153,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.
-
+
### Chromium
diff --git a/nodejs/docs/ci-intro.mdx b/nodejs/docs/ci-intro.mdx
index 672c480def..1af43e6528 100644
--- a/nodejs/docs/ci-intro.mdx
+++ b/nodejs/docs/ci-intro.mdx
@@ -73,14 +73,14 @@ Once you have your [GitHub Actions workflow](#setting-up-github-actions) setup,
Click on the **Actions** tab to see the workflows. Here you see if your tests have passed or failed.
######
-
+
## Viewing Test Logs
Clicking on the workflow run shows you all the actions that GitHub performed and clicking on **Run Playwright tests** shows the error messages, what was expected and what was received as well as the call log.
######
-
+
## HTML Report
@@ -100,7 +100,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
```
-
+
To learn more about reports, check out our detailed guide on [HTML Reporter](/test-reporters.mdx#html-reporter)
@@ -108,7 +108,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.
-
+
## Publishing report on the web
diff --git a/nodejs/docs/codegen.mdx b/nodejs/docs/codegen.mdx
index 32f5600b82..8d1e5d1f0a 100644
--- a/nodejs/docs/codegen.mdx
+++ b/nodejs/docs/codegen.mdx
@@ -26,24 +26,24 @@ 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.
-
+
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
-
+
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.
-
+
### 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.
-
+
In the browser window start performing the actions you want to record.
@@ -51,7 +51,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.
-
+
### Generating locators
@@ -86,7 +86,7 @@ With the test generator you can record:
* `'assert value'` to assert that an element has a specific value
######
-
+
######
When you have finished interacting with the page, press the **record** button to stop the recording and use the **copy** button to copy the generated code to your editor.
@@ -102,7 +102,7 @@ You can generate [locators](/locators.mdx) with the test generator.
* You can then edit the locator in this field to fine tune it or use the copy button to copy it and paste it into your code.
######
-
+
## Emulation
diff --git a/nodejs/docs/mock.mdx b/nodejs/docs/mock.mdx
index 1c5badec2d..439a7416ae 100644
--- a/nodejs/docs/mock.mdx
+++ b/nodejs/docs/mock.mdx
@@ -29,7 +29,9 @@ test("mocks a fruit and doesn't call api", async ({ page }) => {
});
```
-You can see from the trace of the example test that the API was never called, it was however fulfilled with the mock data. 
+You can see from the trace of the example test that the API was never called, it was however fulfilled with the mock data.
+
+
Read more about [advanced networking](./network.mdx).
@@ -59,9 +61,13 @@ test('gets the json from api and adds a new fruit', async ({ page }) => {
});
```
-In the trace of our test we can see that the API was called and the response was modified. 
+In the trace of our test we can see that the API was called and the response was modified.
+
+
+
+By inspecting the response we can see that our new fruit was added to the list.
-By inspecting the response we can see that our new fruit was added to the list. 
+
Read more about [advanced networking](./network.mdx).
@@ -117,9 +123,13 @@ test('gets the json from HAR and checks the new fruit has been added', async ({
});
```
-In the trace of our test we can see that the route was fulfilled from the HAR file and the API was not called. 
+In the trace of our test we can see that the route was fulfilled from the HAR file and the API was not called.
+
+
+
+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.
-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. 
+
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/nodejs/docs/release-notes.mdx b/nodejs/docs/release-notes.mdx
index a9b2420150..c381d5bbcd 100644
--- a/nodejs/docs/release-notes.mdx
+++ b/nodejs/docs/release-notes.mdx
@@ -56,7 +56,7 @@ It shows you all your executed tests sorted by slowness, and can help you unders
### Chrome for Testing
-Starting with this release, Playwright switches from Chromium, to using [Chrome for Testing](https://developer.chrome.com/blog/chrome-for-testing/) builds. Both headed and headless browsers are subject to this. Your tests should still be passing after upgrading to Playwright 1.57.
+Playwright now runs on [Chrome for Testing](https://googlechromelabs.github.io/chrome-for-testing/) builds rather than Chromium. Headed mode uses `chrome`; headless mode uses `chrome-headless-shell`. Existing tests should continue to pass after upgrading to v1.57.
We're expecting no functional changes to come from this switch. The biggest change is the new icon and title in your toolbar.
@@ -230,7 +230,9 @@ This version was also tested against the following stable channels:
## Version 1.53
### Trace Viewer and HTML Reporter Updates
-- New Steps in Trace Viewer and HTML reporter: 
+- New Steps in Trace Viewer and HTML reporter:
+
+
- New option in `'html'` reporter to set the title of a specific test run:
```js
@@ -332,7 +334,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.
-
+
### Filter visible elements
@@ -361,7 +363,7 @@ export default defineConfig({
HTML report will show this information when available:
-
+
### Test Step improvements
@@ -589,7 +591,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
-
+
### `--tsconfig` CLI option
@@ -962,7 +964,7 @@ This version was also tested against the following stable channels:
### UI Mode Updates
-
+
* See tags in the test list.
* Filter by tags by typing `@fast` or clicking on the tag itself.
* New shortcuts:
@@ -1085,7 +1087,7 @@ This version was also tested against the following stable channels:
### Test Generator Update
-
+
New tools to generate assertions:
- "Assert visibility" tool generates [expect(locator).toBeVisible()](/api/class-locatorassertions.mdx#locator-assertions-to-be-visible).
@@ -1232,7 +1234,7 @@ This version was also tested against the following stable channels:
### UI Mode Updates
-
+
1. Zoom into time range.
1. Network panel redesign.
@@ -1367,10 +1369,10 @@ This version was also tested against the following stable channels:
### Highlights
* UI mode is now available in VSCode Playwright extension via a new "Show trace viewer" button:
- 
+ 
* UI mode and trace viewer mark network requests handled with [page.route()](/api/class-page.mdx#page-route) and [browserContext.route()](/api/class-browsercontext.mdx#browser-context-route) handlers, as well as those issued via the [API testing](./api-testing):
- 
+ 
* New option `maskColor` for methods [page.screenshot()](/api/class-page.mdx#page-screenshot), [locator.screenshot()](/api/class-locator.mdx#locator-screenshot), [expect(page).toHaveScreenshot()](/api/class-pageassertions.mdx#page-assertions-to-have-screenshot-1) and [expect(locator).toHaveScreenshot()](/api/class-locatorassertions.mdx#locator-assertions-to-have-screenshot-1) to change default masking color:
```js
@@ -1418,7 +1420,9 @@ This version was also tested against the following stable channels:
### Highlights
-* UI Mode now shows steps, fixtures and attachments: 
+* UI Mode now shows steps, fixtures and attachments:
+
+ 
* New property [testProject.teardown](/api/class-testproject.mdx#test-project-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.
A common pattern would be a `setup` dependency with a corresponding `teardown`:
@@ -1566,7 +1570,7 @@ This version was also tested against the following stable channels:
New [UI Mode](./test-ui-mode.mdx) lets you explore, run and debug tests. Comes with a built-in watch mode.
-
+
Engage with a new flag `--ui`:
@@ -1790,14 +1794,14 @@ This version was also tested against the following stable channels:
### Playwright Tools
* **Record at Cursor in VSCode.** You can run the test, position the cursor at the end of the test and continue generating the test.
-
+
* **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.
-
+
* **Codegen and Trace Viewer Dark Theme.** Automatically picked up from operating system settings.
-
+
### Test Runner
* Configure retries and test timeout for a file or a test with [test.describe.configure()](/api/class-test.mdx#test-describe-configure).
@@ -1946,7 +1950,7 @@ This version was also tested against the following stable channels:
* Pick selector.
* Record new test from current page state.
-
+
### Test Runner
* [test.step()](/api/class-test.mdx#test-step) now returns the value of the step function:
@@ -2554,7 +2558,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.
-
+
Frame locators can be created with either [page.frameLocator()](/api/class-page.mdx#page-frame-locator) or [locator.frameLocator()](/api/class-locator.mdx#locator-frame-locator) method.
@@ -2575,13 +2579,13 @@ Playwright Trace Viewer is now **available online** at https://trace.playwright.
- New trace metadata tab with browser details
- Snapshots now have URL bar
-
+
### 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.
-
+
### Ubuntu ARM64 support + more
- Playwright now supports **Ubuntu 20.04 ARM64**. You can now run Playwright tests inside Docker on Apple M1 and on Raspberry Pi.
@@ -2678,7 +2682,7 @@ $ npx playwright test --reporter=html
The HTML reporter has all the information about tests and their failures, including surfacing trace and image artifacts.
-
+
Read more about [our reporters](./test-reporters#html-reporter).
@@ -3034,7 +3038,7 @@ npx playwright show-trace trace.zip
That will open the following GUI:
-
+
👉 Read more in [trace viewer documentation](./trace-viewer.mdx).
diff --git a/nodejs/docs/test-ui-mode.mdx b/nodejs/docs/test-ui-mode.mdx
index b910d4f0a5..c7854e2860 100644
--- a/nodejs/docs/test-ui-mode.mdx
+++ b/nodejs/docs/test-ui-mode.mdx
@@ -26,89 +26,91 @@ 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.
-
+
## 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.
-
+
## 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.
-
+
## 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. 
+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.
+
+
## 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.
-
+
## 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.
-
+
## 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.
-
+
## 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.
-
+
## 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.
-
+
## 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.
-
+
## 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.
-
+
## 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.
-
+
## Attachments
The "Attachments" tab allows you to explore attachments. If you're doing [visual regression testing](./test-snapshots.mdx), 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.
-
+
## 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.
-
+
## 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.
-
+
## Docker & GitHub Codespaces
diff --git a/nodejs/docs/trace-viewer.mdx b/nodejs/docs/trace-viewer.mdx
index 7f048ac17c..b7c9329436 100644
--- a/nodejs/docs/trace-viewer.mdx
+++ b/nodejs/docs/trace-viewer.mdx
@@ -124,7 +124,7 @@ If you are not using Playwright as a Test Runner, use the [browserContext.tracin
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.
-
+
**Selecting each action reveals:**
- Action snapshots
@@ -137,7 +137,7 @@ When tracing with the [screenshots](/api/class-tracing.mdx#tracing-start-option-
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.
-
+
### Snapshots
@@ -151,7 +151,7 @@ When tracing with the [snapshots](/api/class-tracing.mdx#tracing-start-option-sn
Here is what the typical Action snapshot looks like:
-
+
Notice how it highlights both, the DOM Node as well as the exact click position.
@@ -159,31 +159,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.
-
+
### 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.
-
+
### 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.
-
+
### 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.
-
+
### 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.
-
+
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.
@@ -193,7 +193,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.
-
+
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.
@@ -203,13 +203,13 @@ 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.
-
+
### Attachments
The "Attachments" tab allows you to explore attachments. If you're doing [visual regression testing](./test-snapshots.mdx), 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.
-
+
[Android]: /api/class-android.mdx "Android"
diff --git a/python/docs/ci-intro.mdx b/python/docs/ci-intro.mdx
index ecf462770e..286e25dbfb 100644
--- a/python/docs/ci-intro.mdx
+++ b/python/docs/ci-intro.mdx
@@ -72,14 +72,14 @@ Once you have your [GitHub Actions workflow](#setting-up-github-actions) setup,
Click on the **Actions** tab to see the workflows. Here you see if your tests have passed or failed.
######
-
+
## Viewing Test Logs
Clicking on the workflow run shows you all the actions that GitHub performed and clicking on **Run Playwright tests** shows the error messages, what was expected and what was received as well as the call log.
######
-
+
## Viewing the Trace
diff --git a/python/docs/codegen.mdx b/python/docs/codegen.mdx
index 95bd845479..53df9627dd 100644
--- a/python/docs/codegen.mdx
+++ b/python/docs/codegen.mdx
@@ -36,7 +36,7 @@ With the test generator you can record:
* `'assert value'` to assert that an element has a specific value
######
-
+
######
When you have finished interacting with the page, press the **record** button to stop the recording and use the **copy** button to copy the generated code to your editor.
@@ -52,7 +52,7 @@ You can generate [locators](/locators.mdx) with the test generator.
* You can then edit the locator in this field to fine tune it or use the copy button to copy it and paste it into your code.
######
-
+
## Emulation
diff --git a/python/docs/library.mdx b/python/docs/library.mdx
index 5e96add12c..298568712c 100644
--- a/python/docs/library.mdx
+++ b/python/docs/library.mdx
@@ -10,7 +10,7 @@ import HTMLCard from '@site/src/components/HTMLCard';
### Pip
-[](https://pypi.python.org/pypi/playwright/)
+[
](https://pypi.python.org/pypi/playwright/)
```bash
pip install --upgrade pip
@@ -20,7 +20,7 @@ playwright install
### Conda
-[](https://anaconda.org/Microsoft/playwright)
+[
](https://anaconda.org/Microsoft/playwright)
```bash
conda config --add channels conda-forge
diff --git a/python/docs/mock.mdx b/python/docs/mock.mdx
index 241b912e82..0a8c723626 100644
--- a/python/docs/mock.mdx
+++ b/python/docs/mock.mdx
@@ -64,7 +64,9 @@ async def test_mock_the_fruit_api(page: Page):
-You can see from the trace of the example test that the API was never called, it was however fulfilled with the mock data. 
+You can see from the trace of the example test that the API was never called, it was however fulfilled with the mock data.
+
+
Read more about [advanced networking](./network.mdx).
@@ -128,9 +130,13 @@ async def test_gets_the_json_from_api_and_adds_a_new_fruit(page: Page):
-In the trace of our test we can see that the API was called and the response was modified. 
+In the trace of our test we can see that the API was called and the response was modified.
+
+
+
+By inspecting the response we can see that our new fruit was added to the list.
-By inspecting the response we can see that our new fruit was added to the list. 
+
Read more about [advanced networking](./network.mdx).
@@ -252,9 +258,13 @@ async def test_gets_the_json_from_har_and_checks_the_new_fruit_has_been_added(pa
-In the trace of our test we can see that the route was fulfilled from the HAR file and the API was not called. 
+In the trace of our test we can see that the route was fulfilled from the HAR file and the API was not called.
+
+
+
+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.
-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. 
+
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/python/docs/release-notes.mdx b/python/docs/release-notes.mdx
index d6db2d1dd6..d237962adb 100644
--- a/python/docs/release-notes.mdx
+++ b/python/docs/release-notes.mdx
@@ -42,7 +42,7 @@ This version was also tested against the following stable channels:
### Chrome for Testing
-Starting with this release, Playwright switches from Chromium, to using [Chrome for Testing](https://developer.chrome.com/blog/chrome-for-testing/) builds. Both headed and headless browsers are subject to this. Your tests should still be passing after upgrading to Playwright 1.57.
+Playwright now runs on [Chrome for Testing](https://googlechromelabs.github.io/chrome-for-testing/) builds rather than Chromium. Headed mode uses `chrome`; headless mode uses `chrome-headless-shell`. Existing tests should continue to pass after upgrading to v1.57.
We're expecting no functional changes to come from this switch. The biggest change is the new icon and title in your toolbar.
@@ -129,7 +129,9 @@ This version was also tested against the following stable channels:
## Version 1.53
### Trace Viewer and HTML Reporter Updates
-- New Steps in Trace Viewer: 
+- New Steps in Trace Viewer:
+
+
- New method [locator.describe()](/api/class-locator.mdx#locator-describe) to describe a locator. Used for trace viewer.
```python
@@ -364,7 +366,7 @@ The Network tab in the trace viewer has several nice improvements:
- better display of query string parameters
- preview of font assets
-
+
### Miscellaneous
- The `mcr.microsoft.com/playwright/python:v1.47.0` now serves a Playwright image based on Ubuntu 24.04 Noble. To use the 22.04 jammy-based image, please use `mcr.microsoft.com/playwright/python:v1.47.0-jammy` instead.
@@ -626,7 +628,7 @@ This version was also tested against the following stable channels:
### Test Generator Update
-
+
New tools to generate assertions:
- "Assert visibility" tool generates [expect(locator).to_be_visible()](/api/class-locatorassertions.mdx#locator-assertions-to-be-visible).
@@ -681,7 +683,7 @@ This version was also tested against the following stable channels:
### Trace Viewer Updates
-
+
1. Zoom into time range.
1. Network panel redesign.
@@ -950,7 +952,7 @@ This version was also tested against the following stable channels:
### Playwright Tools
* **Live Locators in CodeGen.** Generate a locator for any element on the page using "Explore" tool.
-
+
### New APIs
- [locator.blur()](/api/class-locator.mdx#locator-blur)
@@ -1318,7 +1320,7 @@ Note that the new methods [page.route_from_har()](/api/class-page.mdx#page-route
- Codegen now supports generating Pytest Tests
- 
+ 
## Version 1.21
@@ -1565,7 +1567,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.
-
+
Frame locators can be created with either [page.frame_locator()](/api/class-page.mdx#page-frame-locator) or [locator.frame_locator()](/api/class-locator.mdx#locator-frame-locator) method.
@@ -1586,13 +1588,13 @@ Playwright Trace Viewer is now **available online** at https://trace.playwright.
- New trace metadata tab with browser details
- Snapshots now have URL bar
-
+
### 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.
-
+
### Ubuntu ARM64 support + more
- Playwright now supports **Ubuntu 20.04 ARM64**. You can now run Playwright tests inside Docker on Apple M1 and on Raspberry Pi.
@@ -1795,7 +1797,7 @@ playwright show-trace trace.zip
That will open the following GUI:
-
+
👉 Read more in [trace viewer documentation](./trace-viewer.mdx).
diff --git a/python/docs/running-tests.mdx b/python/docs/running-tests.mdx
index 10fd48b405..99b092d94c 100644
--- a/python/docs/running-tests.mdx
+++ b/python/docs/running-tests.mdx
@@ -194,7 +194,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.
-
+
Check out our [debugging guide](./debug.mdx) to learn more about the [Playwright Inspector](./debug.mdx#playwright-inspector) as well as debugging with [Browser Developer tools](./debug.mdx#browser-developer-tools).
diff --git a/python/docs/trace-viewer-intro.mdx b/python/docs/trace-viewer-intro.mdx
index 00ddbbf5e2..6781c3cf0a 100644
--- a/python/docs/trace-viewer-intro.mdx
+++ b/python/docs/trace-viewer-intro.mdx
@@ -88,7 +88,7 @@ playwright show-trace trace.zip
```
######
-
+
To learn more check out our detailed guide on [Trace Viewer](/trace-viewer.mdx).
diff --git a/python/docs/trace-viewer.mdx b/python/docs/trace-viewer.mdx
index 2c49b94d2f..0631441c6f 100644
--- a/python/docs/trace-viewer.mdx
+++ b/python/docs/trace-viewer.mdx
@@ -113,7 +113,7 @@ await context.tracing.stop(path = "trace.zip")
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.
-
+
**Selecting each action reveals:**
- Action snapshots
@@ -126,7 +126,7 @@ When tracing with the [screenshots](/api/class-tracing.mdx#tracing-start-option-
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.
-
+
### Snapshots
@@ -140,7 +140,7 @@ When tracing with the [snapshots](/api/class-tracing.mdx#tracing-start-option-sn
Here is what the typical Action snapshot looks like:
-
+
Notice how it highlights both, the DOM Node as well as the exact click position.
@@ -148,31 +148,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.
-
+
### 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.
-
+
### 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.
-
+
### 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.
-
+
### 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.
-
+
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.
@@ -182,7 +182,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.
-
+
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.
@@ -192,7 +192,7 @@ 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.
-
+
[APIRequest]: /api/class-apirequest.mdx "APIRequest"
diff --git a/src/components/GitHubStarButton/index.tsx b/src/components/GitHubStarButton/index.tsx
index cd9e2810a3..9462b83645 100644
--- a/src/components/GitHubStarButton/index.tsx
+++ b/src/components/GitHubStarButton/index.tsx
@@ -6,7 +6,7 @@ type StarButtonProps = {
repo: string
}
-const STARS = '82k+'; // NOTE: this line is generated by src/generate.js. Do not change!
+const STARS = '83k+'; // NOTE: this line is generated by src/generate.js. Do not change!
const StarButton: React.FC = ({owner, repo}) => {
if (!repo)