diff --git a/dotnet/versioned_docs/version-stable/actionability.mdx b/dotnet/versioned_docs/version-stable/actionability.mdx index 62de3c36f0a..d12555758f3 100644 --- a/dotnet/versioned_docs/version-stable/actionability.mdx +++ b/dotnet/versioned_docs/version-stable/actionability.mdx @@ -5,6 +5,7 @@ title: "Auto-waiting" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/api-testing.mdx b/dotnet/versioned_docs/version-stable/api-testing.mdx index 53f8f232501..caf826b691c 100644 --- a/dotnet/versioned_docs/version-stable/api-testing.mdx +++ b/dotnet/versioned_docs/version-stable/api-testing.mdx @@ -5,6 +5,7 @@ title: "API testing" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/api/class-accessibility.mdx b/dotnet/versioned_docs/version-stable/api/class-accessibility.mdx index be54f8d7c9e..b989859c06e 100644 --- a/dotnet/versioned_docs/version-stable/api/class-accessibility.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-accessibility.mdx @@ -5,6 +5,7 @@ title: "Accessibility" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; :::warning[Deprecated] diff --git a/dotnet/versioned_docs/version-stable/api/class-apirequest.mdx b/dotnet/versioned_docs/version-stable/api/class-apirequest.mdx index 40305068094..5af8dd1c77c 100644 --- a/dotnet/versioned_docs/version-stable/api/class-apirequest.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-apirequest.mdx @@ -5,6 +5,7 @@ title: "APIRequest" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Exposes API that can be used for the Web API testing. This class is used for creating [APIRequestContext] instance which in turn can be used for sending web requests. An instance of this class can be obtained via [Playwright.APIRequest](/api/class-playwright.mdx#playwright-request). For more information see [APIRequestContext]. @@ -66,6 +67,8 @@ await ApiRequest.NewContextAsync(options); An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`, a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally, `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided with an exact match to the request origin that the certificate is valid for. + Client certificate authentication is only active when at least one client certificate is provided. If you want to reject all client certificates sent by the server, you need to provide a client certificate with an `origin` that does not match any of the domains you plan to visit. + :::note When using WebKit on macOS, accessing `localhost` will not pick up client certificates. You can make it work by replacing `localhost` with `local.playwright`. diff --git a/dotnet/versioned_docs/version-stable/api/class-apirequestcontext.mdx b/dotnet/versioned_docs/version-stable/api/class-apirequestcontext.mdx index b583a1bf242..7aac00a3fc4 100644 --- a/dotnet/versioned_docs/version-stable/api/class-apirequestcontext.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-apirequestcontext.mdx @@ -5,6 +5,7 @@ title: "APIRequestContext" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; This API is used for the Web API testing. You can use it to trigger API endpoints, configure micro-services, prepare environment or the service to your e2e test. diff --git a/dotnet/versioned_docs/version-stable/api/class-apiresponse.mdx b/dotnet/versioned_docs/version-stable/api/class-apiresponse.mdx index d18b3c8497b..fe29aa32cee 100644 --- a/dotnet/versioned_docs/version-stable/api/class-apiresponse.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-apiresponse.mdx @@ -5,6 +5,7 @@ title: "APIResponse" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [APIResponse] class represents responses returned by [ApiRequestContext.GetAsync()](/api/class-apirequestcontext.mdx#api-request-context-get) and similar methods. diff --git a/dotnet/versioned_docs/version-stable/api/class-apiresponseassertions.mdx b/dotnet/versioned_docs/version-stable/api/class-apiresponseassertions.mdx index b003204b53c..bb51496e1a8 100644 --- a/dotnet/versioned_docs/version-stable/api/class-apiresponseassertions.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-apiresponseassertions.mdx @@ -5,6 +5,7 @@ title: "APIResponseAssertions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The [APIResponseAssertions] class provides assertion methods that can be used to make assertions about the [APIResponse] in the tests. diff --git a/dotnet/versioned_docs/version-stable/api/class-browser.mdx b/dotnet/versioned_docs/version-stable/api/class-browser.mdx index 102d4393027..032996c48f7 100644 --- a/dotnet/versioned_docs/version-stable/api/class-browser.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-browser.mdx @@ -5,6 +5,7 @@ title: "Browser" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; A Browser is created via [BrowserType.LaunchAsync()](/api/class-browsertype.mdx#browser-type-launch). An example of using a [Browser] to create a [Page]: @@ -207,6 +208,8 @@ await browser.CloseAsync(); An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`, a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally, `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided with an exact match to the request origin that the certificate is valid for. + Client certificate authentication is only active when at least one client certificate is provided. If you want to reject all client certificates sent by the server, you need to provide a client certificate with an `origin` that does not match any of the domains you plan to visit. + :::note When using WebKit on macOS, accessing `localhost` will not pick up client certificates. You can make it work by replacing `localhost` with `local.playwright`. @@ -425,6 +428,8 @@ await Browser.NewPageAsync(options); An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`, a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally, `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided with an exact match to the request origin that the certificate is valid for. + Client certificate authentication is only active when at least one client certificate is provided. If you want to reject all client certificates sent by the server, you need to provide a client certificate with an `origin` that does not match any of the domains you plan to visit. + :::note When using WebKit on macOS, accessing `localhost` will not pick up client certificates. You can make it work by replacing `localhost` with `local.playwright`. diff --git a/dotnet/versioned_docs/version-stable/api/class-browsercontext.mdx b/dotnet/versioned_docs/version-stable/api/class-browsercontext.mdx index c19df7a3476..774212a731c 100644 --- a/dotnet/versioned_docs/version-stable/api/class-browsercontext.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-browsercontext.mdx @@ -5,6 +5,7 @@ title: "BrowserContext" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; BrowserContexts provide a way to operate multiple independent browser sessions. diff --git a/dotnet/versioned_docs/version-stable/api/class-browsertype.mdx b/dotnet/versioned_docs/version-stable/api/class-browsertype.mdx index 88b93d7f0ed..b576416d2b6 100644 --- a/dotnet/versioned_docs/version-stable/api/class-browsertype.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-browsertype.mdx @@ -5,6 +5,7 @@ title: "BrowserType" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; BrowserType provides methods to launch a specific browser instance or connect to an existing one. The following is a typical example of using Playwright to drive automation: @@ -279,6 +280,12 @@ await BrowserType.LaunchPersistentContextAsync(userDataDir, options); More details for [Chromium](https://chromium.googlesource.com/chromium/src/+/master/docs/user_data_dir.md#introduction) and [Firefox](https://wiki.mozilla.org/Firefox/CommandLineOptions#User_profile). Chromium's user data directory is the **parent** directory of the "Profile Path" seen at `chrome://version`. Note that browsers do not allow launching multiple instances with the same User Data Directory. + + :::warning + + Chromium/Chrome: Due to recent Chrome policy changes, automating the default Chrome user profile is not supported. Pointing `userDataDir` to Chrome's main "User Data" directory (the profile used for your regular browsing) may result in pages not loading or the browser exiting. Create and use a separate directory (for example, an empty folder) as your automation profile instead. See https://developer.chrome.com/blog/remote-debugging-port for details. + ::: + - `options` `BrowserTypeLaunchPersistentContextOptions?` *(optional)* - `AcceptDownloads` [bool]? *(optional)*# @@ -342,6 +349,8 @@ await BrowserType.LaunchPersistentContextAsync(userDataDir, options); An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`, a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally, `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided with an exact match to the request origin that the certificate is valid for. + Client certificate authentication is only active when at least one client certificate is provided. If you want to reject all client certificates sent by the server, you need to provide a client certificate with an `origin` that does not match any of the domains you plan to visit. + :::note When using WebKit on macOS, accessing `localhost` will not pick up client certificates. You can make it work by replacing `localhost` with `local.playwright`. diff --git a/dotnet/versioned_docs/version-stable/api/class-cdpsession.mdx b/dotnet/versioned_docs/version-stable/api/class-cdpsession.mdx index fcf218add1a..5ebb93bc6ba 100644 --- a/dotnet/versioned_docs/version-stable/api/class-cdpsession.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-cdpsession.mdx @@ -5,6 +5,7 @@ title: "CDPSession" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The `CDPSession` instances are used to talk raw Chrome Devtools Protocol: diff --git a/dotnet/versioned_docs/version-stable/api/class-cdpsessionevent.mdx b/dotnet/versioned_docs/version-stable/api/class-cdpsessionevent.mdx index 018340872b1..2db7f37d770 100644 --- a/dotnet/versioned_docs/version-stable/api/class-cdpsessionevent.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-cdpsessionevent.mdx @@ -5,6 +5,7 @@ title: "CDPSessionEvent" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [CDPSessionEvent] objects are returned by page via the [CdpSession.Event()](/api/class-cdpsession.mdx#cdp-session-event) method. diff --git a/dotnet/versioned_docs/version-stable/api/class-clock.mdx b/dotnet/versioned_docs/version-stable/api/class-clock.mdx index ed4ad039663..713c7a0a2bf 100644 --- a/dotnet/versioned_docs/version-stable/api/class-clock.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-clock.mdx @@ -5,6 +5,7 @@ title: "Clock" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Accurately simulating time-dependent behavior is essential for verifying the correctness of applications. Learn more about [clock emulation](../clock.mdx). diff --git a/dotnet/versioned_docs/version-stable/api/class-consolemessage.mdx b/dotnet/versioned_docs/version-stable/api/class-consolemessage.mdx index d468abddc16..424a5880baf 100644 --- a/dotnet/versioned_docs/version-stable/api/class-consolemessage.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-consolemessage.mdx @@ -5,6 +5,7 @@ title: "ConsoleMessage" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [ConsoleMessage] objects are dispatched by page via the [Page.Console](/api/class-page.mdx#page-event-console) event. For each console message logged in the page there will be corresponding event in the Playwright context. diff --git a/dotnet/versioned_docs/version-stable/api/class-dialog.mdx b/dotnet/versioned_docs/version-stable/api/class-dialog.mdx index 0c239aea28b..e8f598a308c 100644 --- a/dotnet/versioned_docs/version-stable/api/class-dialog.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-dialog.mdx @@ -5,6 +5,7 @@ title: "Dialog" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [Dialog] objects are dispatched by page via the [Page.Dialog](/api/class-page.mdx#page-event-dialog) event. diff --git a/dotnet/versioned_docs/version-stable/api/class-download.mdx b/dotnet/versioned_docs/version-stable/api/class-download.mdx index 1ead454fc71..a3cd0571e21 100644 --- a/dotnet/versioned_docs/version-stable/api/class-download.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-download.mdx @@ -5,6 +5,7 @@ title: "Download" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [Download] objects are dispatched by page via the [Page.Download](/api/class-page.mdx#page-event-download) event. diff --git a/dotnet/versioned_docs/version-stable/api/class-elementhandle.mdx b/dotnet/versioned_docs/version-stable/api/class-elementhandle.mdx index 406f1bb3a5c..247890d904d 100644 --- a/dotnet/versioned_docs/version-stable/api/class-elementhandle.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-elementhandle.mdx @@ -5,6 +5,7 @@ title: "ElementHandle" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; * extends: [JSHandle] diff --git a/dotnet/versioned_docs/version-stable/api/class-filechooser.mdx b/dotnet/versioned_docs/version-stable/api/class-filechooser.mdx index df3ad9642ab..e9efa17d517 100644 --- a/dotnet/versioned_docs/version-stable/api/class-filechooser.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-filechooser.mdx @@ -5,6 +5,7 @@ title: "FileChooser" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [FileChooser] objects are dispatched by the page in the [Page.FileChooser](/api/class-page.mdx#page-event-file-chooser) event. diff --git a/dotnet/versioned_docs/version-stable/api/class-formdata.mdx b/dotnet/versioned_docs/version-stable/api/class-formdata.mdx index 7419df2b6f5..bb1ff1ff8e6 100644 --- a/dotnet/versioned_docs/version-stable/api/class-formdata.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-formdata.mdx @@ -5,6 +5,7 @@ title: "FormData" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The [FormData] is used create form data that is sent via [APIRequestContext]. diff --git a/dotnet/versioned_docs/version-stable/api/class-frame.mdx b/dotnet/versioned_docs/version-stable/api/class-frame.mdx index 3b49f0a7f87..2f9d8d91b31 100644 --- a/dotnet/versioned_docs/version-stable/api/class-frame.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-frame.mdx @@ -5,6 +5,7 @@ title: "Frame" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; At every point of time, page exposes its current frame tree via the [Page.MainFrame](/api/class-page.mdx#page-main-frame) and [Frame.ChildFrames](/api/class-frame.mdx#frame-child-frames) methods. diff --git a/dotnet/versioned_docs/version-stable/api/class-framelocator.mdx b/dotnet/versioned_docs/version-stable/api/class-framelocator.mdx index df3f9feee08..d9574aa8ed2 100644 --- a/dotnet/versioned_docs/version-stable/api/class-framelocator.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-framelocator.mdx @@ -5,6 +5,7 @@ title: "FrameLocator" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; FrameLocator represents a view to the `iframe` on the page. It captures the logic sufficient to retrieve the `iframe` and locate elements in that iframe. FrameLocator can be created with either [Locator.ContentFrame](/api/class-locator.mdx#locator-content-frame), [Page.FrameLocator()](/api/class-page.mdx#page-frame-locator) or [Locator.FrameLocator()](/api/class-locator.mdx#locator-frame-locator) method. diff --git a/dotnet/versioned_docs/version-stable/api/class-jshandle.mdx b/dotnet/versioned_docs/version-stable/api/class-jshandle.mdx index b289757ebad..f3707490794 100644 --- a/dotnet/versioned_docs/version-stable/api/class-jshandle.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-jshandle.mdx @@ -5,6 +5,7 @@ title: "JSHandle" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; JSHandle represents an in-page JavaScript object. JSHandles can be created with the [Page.EvaluateHandleAsync()](/api/class-page.mdx#page-evaluate-handle) method. diff --git a/dotnet/versioned_docs/version-stable/api/class-keyboard.mdx b/dotnet/versioned_docs/version-stable/api/class-keyboard.mdx index 29c525e9cb2..c82c326ec81 100644 --- a/dotnet/versioned_docs/version-stable/api/class-keyboard.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-keyboard.mdx @@ -5,6 +5,7 @@ title: "Keyboard" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Keyboard provides an api for managing a virtual keyboard. The high level api is [Keyboard.TypeAsync()](/api/class-keyboard.mdx#keyboard-type), which takes raw characters and generates proper `keydown`, `keypress`/`input`, and `keyup` events on your page. diff --git a/dotnet/versioned_docs/version-stable/api/class-locator.mdx b/dotnet/versioned_docs/version-stable/api/class-locator.mdx index 62f77c78daa..46d4d580d63 100644 --- a/dotnet/versioned_docs/version-stable/api/class-locator.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-locator.mdx @@ -5,6 +5,7 @@ title: "Locator" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Locators are the central piece of Playwright's auto-waiting and retry-ability. In a nutshell, locators represent a way to find element(s) on the page at any moment. A locator can be created with the [Page.Locator()](/api/class-page.mdx#page-locator) method. diff --git a/dotnet/versioned_docs/version-stable/api/class-locatorassertions.mdx b/dotnet/versioned_docs/version-stable/api/class-locatorassertions.mdx index 5d69ecf63ff..07979a6c83b 100644 --- a/dotnet/versioned_docs/version-stable/api/class-locatorassertions.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-locatorassertions.mdx @@ -5,6 +5,7 @@ title: "LocatorAssertions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The [LocatorAssertions] class provides assertion methods that can be used to make assertions about the [Locator] state in the tests. diff --git a/dotnet/versioned_docs/version-stable/api/class-mouse.mdx b/dotnet/versioned_docs/version-stable/api/class-mouse.mdx index ace213b7186..eb18625877c 100644 --- a/dotnet/versioned_docs/version-stable/api/class-mouse.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-mouse.mdx @@ -5,6 +5,7 @@ title: "Mouse" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The Mouse class operates in main-frame CSS pixels relative to the top-left corner of the viewport. diff --git a/dotnet/versioned_docs/version-stable/api/class-page.mdx b/dotnet/versioned_docs/version-stable/api/class-page.mdx index b6284641518..372b3d6b77b 100644 --- a/dotnet/versioned_docs/version-stable/api/class-page.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-page.mdx @@ -5,6 +5,7 @@ title: "Page" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Page provides methods to interact with a single tab in a [Browser], or an [extension background page](https://developer.chrome.com/extensions/background_pages) in Chromium. One [Browser] instance might have multiple [Page] instances. @@ -1314,7 +1315,7 @@ await Page.OpenerAsync(); Added in: v1.9page.PauseAsync -Pauses script execution. Playwright will stop executing the script and wait for the user to either press 'Resume' button in the page overlay or to call `playwright.resume()` in the DevTools console. +Pauses script execution. Playwright will stop executing the script and wait for the user to either press the 'Resume' button in the page overlay or to call `playwright.resume()` in the DevTools console. User can inspect selectors or perform manual steps while paused. Resume will continue running the original script from the place it was paused. diff --git a/dotnet/versioned_docs/version-stable/api/class-pageassertions.mdx b/dotnet/versioned_docs/version-stable/api/class-pageassertions.mdx index 9952a82d1fc..bbd6921715c 100644 --- a/dotnet/versioned_docs/version-stable/api/class-pageassertions.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-pageassertions.mdx @@ -5,6 +5,7 @@ title: "PageAssertions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The [PageAssertions] class provides assertion methods that can be used to make assertions about the [Page] state in the tests. diff --git a/dotnet/versioned_docs/version-stable/api/class-playwright.mdx b/dotnet/versioned_docs/version-stable/api/class-playwright.mdx index 4b552226802..80d716b4846 100644 --- a/dotnet/versioned_docs/version-stable/api/class-playwright.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-playwright.mdx @@ -5,6 +5,7 @@ title: "Playwright" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Playwright module provides a method to launch a browser instance. The following is a typical example of using Playwright to drive automation: diff --git a/dotnet/versioned_docs/version-stable/api/class-playwrightassertions.mdx b/dotnet/versioned_docs/version-stable/api/class-playwrightassertions.mdx index cee9cdd51ca..731359e6ca9 100644 --- a/dotnet/versioned_docs/version-stable/api/class-playwrightassertions.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-playwrightassertions.mdx @@ -5,6 +5,7 @@ title: "PlaywrightAssertions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Playwright gives you Web-First Assertions with convenience methods for creating assertions that will wait and retry until the expected condition is met. diff --git a/dotnet/versioned_docs/version-stable/api/class-request.mdx b/dotnet/versioned_docs/version-stable/api/class-request.mdx index a346c9fe0a1..9e42852d09c 100644 --- a/dotnet/versioned_docs/version-stable/api/class-request.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-request.mdx @@ -5,6 +5,7 @@ title: "Request" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Whenever the page sends a request for a network resource the following sequence of events are emitted by [Page]: diff --git a/dotnet/versioned_docs/version-stable/api/class-response.mdx b/dotnet/versioned_docs/version-stable/api/class-response.mdx index 3b4f13d59d0..5d51fc8756a 100644 --- a/dotnet/versioned_docs/version-stable/api/class-response.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-response.mdx @@ -5,6 +5,7 @@ title: "Response" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [Response] class represents responses which are received by page. diff --git a/dotnet/versioned_docs/version-stable/api/class-route.mdx b/dotnet/versioned_docs/version-stable/api/class-route.mdx index 78748892afd..5f8e803f5e4 100644 --- a/dotnet/versioned_docs/version-stable/api/class-route.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-route.mdx @@ -5,6 +5,7 @@ title: "Route" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Whenever a network route is set up with [Page.RouteAsync()](/api/class-page.mdx#page-route) or [BrowserContext.RouteAsync()](/api/class-browsercontext.mdx#browser-context-route), the `Route` object allows to handle the route. diff --git a/dotnet/versioned_docs/version-stable/api/class-selectors.mdx b/dotnet/versioned_docs/version-stable/api/class-selectors.mdx index efee1d802b6..84096406f67 100644 --- a/dotnet/versioned_docs/version-stable/api/class-selectors.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-selectors.mdx @@ -5,6 +5,7 @@ title: "Selectors" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Selectors can be used to install custom selector engines. See [extensibility](../extensibility.mdx) for more information. diff --git a/dotnet/versioned_docs/version-stable/api/class-timeouterror.mdx b/dotnet/versioned_docs/version-stable/api/class-timeouterror.mdx index 11864b08d11..723d1b04650 100644 --- a/dotnet/versioned_docs/version-stable/api/class-timeouterror.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-timeouterror.mdx @@ -5,6 +5,7 @@ title: "TimeoutError" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; * extends: [Error] diff --git a/dotnet/versioned_docs/version-stable/api/class-touchscreen.mdx b/dotnet/versioned_docs/version-stable/api/class-touchscreen.mdx index 9a0fe300c8f..5ed2ffe0d9d 100644 --- a/dotnet/versioned_docs/version-stable/api/class-touchscreen.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-touchscreen.mdx @@ -5,6 +5,7 @@ title: "Touchscreen" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The Touchscreen class operates in main-frame CSS pixels relative to the top-left corner of the viewport. Methods on the touchscreen can only be used in browser contexts that have been initialized with `hasTouch` set to true. diff --git a/dotnet/versioned_docs/version-stable/api/class-tracing.mdx b/dotnet/versioned_docs/version-stable/api/class-tracing.mdx index da363d22ed2..9ed1d08bae2 100644 --- a/dotnet/versioned_docs/version-stable/api/class-tracing.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-tracing.mdx @@ -5,6 +5,7 @@ title: "Tracing" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; API for collecting and saving Playwright traces. Playwright traces can be opened in [Trace Viewer](../trace-viewer.mdx) after Playwright script runs. diff --git a/dotnet/versioned_docs/version-stable/api/class-video.mdx b/dotnet/versioned_docs/version-stable/api/class-video.mdx index a3d0ef4a679..ece589175ee 100644 --- a/dotnet/versioned_docs/version-stable/api/class-video.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-video.mdx @@ -5,6 +5,7 @@ title: "Video" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; When browser context is created with the `recordVideo` option, each page has a video object associated with it. diff --git a/dotnet/versioned_docs/version-stable/api/class-weberror.mdx b/dotnet/versioned_docs/version-stable/api/class-weberror.mdx index bbe73bf2d2b..2eda5340524 100644 --- a/dotnet/versioned_docs/version-stable/api/class-weberror.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-weberror.mdx @@ -5,6 +5,7 @@ title: "WebError" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [WebError] class represents an unhandled exception thrown in the page. It is dispatched via the [BrowserContext.WebError](/api/class-browsercontext.mdx#browser-context-event-web-error) event. diff --git a/dotnet/versioned_docs/version-stable/api/class-websocket.mdx b/dotnet/versioned_docs/version-stable/api/class-websocket.mdx index 8ca4fb4a0c9..6a068700f73 100644 --- a/dotnet/versioned_docs/version-stable/api/class-websocket.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-websocket.mdx @@ -5,6 +5,7 @@ title: "WebSocket" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The [WebSocket] class represents WebSocket connections within a page. It provides the ability to inspect and manipulate the data being transmitted and received. diff --git a/dotnet/versioned_docs/version-stable/api/class-websocketframe.mdx b/dotnet/versioned_docs/version-stable/api/class-websocketframe.mdx index 24903141f97..ee59e81ab76 100644 --- a/dotnet/versioned_docs/version-stable/api/class-websocketframe.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-websocketframe.mdx @@ -5,6 +5,7 @@ title: "WebSocketFrame" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The [WebSocketFrame] class represents frames sent over [WebSocket] connections in the page. Frame payload is returned by either [WebSocketFrame.Text](/api/class-websocketframe.mdx#web-socket-frame-text) or [WebSocketFrame.Binary](/api/class-websocketframe.mdx#web-socket-frame-binary) method depending on the its type. diff --git a/dotnet/versioned_docs/version-stable/api/class-websocketroute.mdx b/dotnet/versioned_docs/version-stable/api/class-websocketroute.mdx index 0c0d8b2449b..5958716f5ed 100644 --- a/dotnet/versioned_docs/version-stable/api/class-websocketroute.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-websocketroute.mdx @@ -5,6 +5,7 @@ title: "WebSocketRoute" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Whenever a [`WebSocket`](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) route is set up with [Page.RouteWebSocketAsync()](/api/class-page.mdx#page-route-web-socket) or [BrowserContext.RouteWebSocketAsync()](/api/class-browsercontext.mdx#browser-context-route-web-socket), the `WebSocketRoute` object allows to handle the WebSocket, like an actual server would do. diff --git a/dotnet/versioned_docs/version-stable/api/class-worker.mdx b/dotnet/versioned_docs/version-stable/api/class-worker.mdx index 11239d8db59..d16d830b939 100644 --- a/dotnet/versioned_docs/version-stable/api/class-worker.mdx +++ b/dotnet/versioned_docs/version-stable/api/class-worker.mdx @@ -5,6 +5,7 @@ title: "Worker" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The Worker class represents a [WebWorker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API). `worker` event is emitted on the page object to signal a worker creation. `close` event is emitted on the worker object when the worker is gone. diff --git a/dotnet/versioned_docs/version-stable/aria-snapshots.mdx b/dotnet/versioned_docs/version-stable/aria-snapshots.mdx index 60443a16e55..ac3bc8b1384 100644 --- a/dotnet/versioned_docs/version-stable/aria-snapshots.mdx +++ b/dotnet/versioned_docs/version-stable/aria-snapshots.mdx @@ -5,6 +5,7 @@ title: "Snapshot testing" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; import LiteYouTube from '@site/src/components/LiteYouTube'; diff --git a/dotnet/versioned_docs/version-stable/auth.mdx b/dotnet/versioned_docs/version-stable/auth.mdx index b852bb26e1c..241a9a792fb 100644 --- a/dotnet/versioned_docs/version-stable/auth.mdx +++ b/dotnet/versioned_docs/version-stable/auth.mdx @@ -5,6 +5,7 @@ title: "Authentication" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/browser-contexts.mdx b/dotnet/versioned_docs/version-stable/browser-contexts.mdx index 6ecd9a8c626..cf0a0c0035b 100644 --- a/dotnet/versioned_docs/version-stable/browser-contexts.mdx +++ b/dotnet/versioned_docs/version-stable/browser-contexts.mdx @@ -5,6 +5,7 @@ title: "Isolation" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/browsers.mdx b/dotnet/versioned_docs/version-stable/browsers.mdx index 56090e76f05..bf8638f5b62 100644 --- a/dotnet/versioned_docs/version-stable/browsers.mdx +++ b/dotnet/versioned_docs/version-stable/browsers.mdx @@ -5,6 +5,7 @@ title: "Browsers" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/ci-intro.mdx b/dotnet/versioned_docs/version-stable/ci-intro.mdx index 17f61aed3f7..8bc37bbc5ce 100644 --- a/dotnet/versioned_docs/version-stable/ci-intro.mdx +++ b/dotnet/versioned_docs/version-stable/ci-intro.mdx @@ -5,10 +5,11 @@ title: "Setting up CI" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction -Playwright tests can be run on any CI provider. In this section we will cover running tests on GitHub using GitHub actions. If you would like to see how to configure other CI providers check out our detailed doc on Continuous Integration. +Playwright tests can be run on any CI provider. In this section we cover running tests on GitHub using GitHub Actions. If you would like to see how to configure other CI providers, check out our detailed doc on Continuous Integration. #### You will learn - [How to set up GitHub Actions](/ci-intro.mdx#setting-up-github-actions) @@ -17,7 +18,7 @@ Playwright tests can be run on any CI provider. In this section we will cover ru ## Setting up GitHub Actions -To add a [GitHub Actions](https://docs.github.com/en/actions) file first create `.github/workflows` folder and inside it add a `playwright.yml` file containing the example code below so that your tests will run on each push and pull request for the main/master branch. +To add a [GitHub Actions](https://docs.github.com/en/actions) file, first create `.github/workflows` folder and inside it add a `playwright.yml` file containing the example code below so that your tests run on each push and pull request for the main/master branch. ```yml title=".github/workflows/playwright.yml" name: Playwright Tests @@ -55,14 +56,14 @@ Looking at the list of steps in `jobs.test.steps`, you can see that the workflow ## Create a Repo and Push to GitHub -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. +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. ###### ![dotnet repo on github](https://github.com/microsoft/playwright/assets/13063165/4f1b4cc3-b850-4d60-a99e-24057eaf91ad) ## Opening the Workflows -Click on the **Actions** tab to see the workflows. Here you will see if your tests have passed or failed. +Click on the **Actions** tab to see the workflows. Here you see if your tests have passed or failed. ###### ![opening the workflow](https://github.com/microsoft/playwright/assets/13063165/71793c09-0815-4faa-866b-85684a1f87e5) @@ -73,7 +74,7 @@ On Pull Requests you can also click on the **Details** link in the [PR status ch ## Viewing Test Logs -Clicking on the workflow run will show you the all the actions that GitHub performed and clicking on **Run Playwright tests** will show the error messages, what was expected and what was received as well as the call log. +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 test logs](https://github.com/microsoft/playwright/assets/13063165/ba2d8d7b-ffce-42de-95e0-bcb35c421975) @@ -83,11 +84,11 @@ Clicking on the workflow run will show you the all the actions that GitHub perfo You can upload Traces which get created on your CI like GitHub Actions as artifacts. This requires [starting and stopping the trace](./trace-viewer-intro#recording-a-trace). We recommend only recording traces for failing tests. Once your traces have been uploaded to CI, they can then be downloaded and opened using [trace.playwright.dev](https://trace.playwright.dev), which is a statically hosted variant of the Trace Viewer. You can upload trace files using drag and drop. ###### -![playwright trace viewer](https://github.com/microsoft/playwright/assets/13063165/84150084-5019-470a-8449-b61d206bfbb0) + ## Properly handling Secrets -Artifacts like trace files or console logs contain information about your test execution. They can contain sensitive data like user credentials for a test user, access tokens to a staging backend, testing source code or sometimes even your application source code. Treat these files just as careful as you treat that sensitive data. If you upload reports and traces as part of your CI workflow, make sure that you only upload them to trusted artifact stores, or that you encrypt the files before upload. The same is true for sharing artifacts with team members: Use a trusted file share or encrypt the files before sharing. +Artifacts like trace files or console logs contain information about your test execution. They can contain sensitive data like user credentials for a test user, access tokens to a staging backend, testing source code, or sometimes even your application source code. Treat these files just as carefully as you treat that sensitive data. If you upload reports and traces as part of your CI workflow, make sure that you only upload them to trusted artifact stores, or that you encrypt the files before upload. The same is true for sharing artifacts with team members: Use a trusted file share or encrypt the files before sharing. ## What's Next - [Learn how to use Locators](./locators.mdx) diff --git a/dotnet/versioned_docs/version-stable/ci.mdx b/dotnet/versioned_docs/version-stable/ci.mdx index da2d1134ed2..1bed1d75218 100644 --- a/dotnet/versioned_docs/version-stable/ci.mdx +++ b/dotnet/versioned_docs/version-stable/ci.mdx @@ -5,6 +5,7 @@ title: "Continuous Integration" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -76,7 +77,7 @@ jobs: name: 'Playwright Tests' runs-on: ubuntu-latest container: - image: mcr.microsoft.com/playwright/dotnet:v1.53.0-noble + image: mcr.microsoft.com/playwright/dotnet:v1.54.0-noble options: --user 1001 steps: - uses: actions/checkout@v4 @@ -159,7 +160,7 @@ trigger: pool: vmImage: ubuntu-latest -container: mcr.microsoft.com/playwright/dotnet:v1.53.0-noble +container: mcr.microsoft.com/playwright/dotnet:v1.54.0-noble steps: - task: UseDotNet@2 @@ -182,7 +183,7 @@ Running Playwright on CircleCI is very similar to running on GitHub Actions. In executors: pw-noble-development: docker: - - image: mcr.microsoft.com/playwright/dotnet:v1.53.0-noble + - image: mcr.microsoft.com/playwright/dotnet:v1.54.0-noble ``` Note: When using the docker agent definition, you are specifying the resource class of where playwright runs to the 'medium' tier [here](https://circleci.com/docs/configuration-reference?#docker-execution-environment). The default behavior of Playwright is to set the number of workers to the detected core count (2 in the case of the medium tier). Overriding the number of workers to greater than this number will cause unnecessary timeouts and failures. @@ -193,7 +194,7 @@ Jenkins supports Docker agents for pipelines. Use the [Playwright Docker image]( ```groovy pipeline { - agent { docker { image 'mcr.microsoft.com/playwright/dotnet:v1.53.0-noble' } } + agent { docker { image 'mcr.microsoft.com/playwright/dotnet:v1.54.0-noble' } } stages { stage('e2e-tests') { steps { @@ -210,7 +211,7 @@ pipeline { Bitbucket Pipelines can use public [Docker images as build environments](https://confluence.atlassian.com/bitbucket/use-docker-images-as-build-environments-792298897.html). To run Playwright tests on Bitbucket, use our public Docker image ([see Dockerfile](./docker.mdx)). ```yml -image: mcr.microsoft.com/playwright/dotnet:v1.53.0-noble +image: mcr.microsoft.com/playwright/dotnet:v1.54.0-noble ``` ### GitLab CI diff --git a/dotnet/versioned_docs/version-stable/clock.mdx b/dotnet/versioned_docs/version-stable/clock.mdx index 07adfe38211..28de6df39d8 100644 --- a/dotnet/versioned_docs/version-stable/clock.mdx +++ b/dotnet/versioned_docs/version-stable/clock.mdx @@ -5,6 +5,7 @@ title: "Clock" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; import LiteYouTube from '@site/src/components/LiteYouTube'; diff --git a/dotnet/versioned_docs/version-stable/codegen-intro.mdx b/dotnet/versioned_docs/version-stable/codegen-intro.mdx index 0c29067d34e..2c90212ac51 100644 --- a/dotnet/versioned_docs/version-stable/codegen-intro.mdx +++ b/dotnet/versioned_docs/version-stable/codegen-intro.mdx @@ -5,10 +5,11 @@ title: "Generating tests" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction -Playwright comes with the ability to generate tests out of the box and is a great way to quickly get started with testing. It will open two windows, a browser window where you interact with the website you wish to test and the Playwright Inspector window where you can record your tests, copy the tests, clear your tests as well as change the language of your tests. +Playwright can generate tests automatically, providing a quick way to get started with testing. Codegen opens a browser window for interaction and the Playwright Inspector for recording, copying, and managing your generated tests. **You will learn** - [How to record a test](/codegen.mdx#recording-a-test) @@ -16,7 +17,7 @@ Playwright comes with the ability to generate tests out of the box and is a grea ## Running Codegen -Use the `codegen` command to run the test generator followed by the URL of the website you want to generate tests for. The URL is optional and you can always run the command without it and then add the URL directly into the browser window instead. +Use the `codegen` command to run the test generator followed by the URL of the website you want to generate tests for. The URL is optional and can be added directly in the browser window if omitted. ```bash pwsh bin/Debug/net8.0/playwright.ps1 codegen demo.playwright.dev/todomvc @@ -24,40 +25,40 @@ pwsh bin/Debug/net8.0/playwright.ps1 codegen demo.playwright.dev/todomvc ### Recording a test -Run `codegen` and perform actions in the browser. Playwright will generate the code for the user interactions. `Codegen` will look at the rendered page and figure out the recommended locator, prioritizing role, text and test id locators. If the generator identifies multiple elements matching the locator, it will improve the locator to make it resilient and uniquely identify the target element, therefore eliminating and reducing test(s) failing and flaking due to locators. +Run `codegen` and perform actions in the browser. Playwright generates code for your interactions automatically. Codegen analyzes the rendered page and recommends the best locator, prioritizing role, text, and test id locators. When multiple elements match a locator, the generator improves it to uniquely identify the target element, reducing test failures and flakiness. With the test generator you can record: -* Actions like click or fill by simply interacting with the page -* Assertions by clicking on one of the icons in the toolbar and then clicking on an element on the page to assert against. You can choose: +* Actions like click or fill by interacting with the page +* Assertions by clicking a toolbar icon, then clicking a page element to assert against. You can choose: * `'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 ###### -![recording a test](https://github.com/microsoft/playwright/assets/13063165/53bdfb6f-d462-4ce0-ab95-0619faaebf1e) + ###### -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. +When you finish interacting with the page, press the `'record'` button to stop recording and use the `'copy'` button to copy the generated code to your editor. -Use the `'clear'` button to clear the code to start recording again. Once finished close the Playwright inspector window or stop the terminal command. +Use the `'clear'` button to clear the code and start recording again. Once finished, close the Playwright Inspector window or stop the terminal command. -To learn more about generating tests check out or detailed guide on [Codegen](./codegen.mdx). +To learn more about generating tests, check out our detailed guide on [Codegen](./codegen.mdx). ### Generating locators You can generate [locators](/locators.mdx) with the test generator. -* Press the `'Record'` button to stop the recording and the `'Pick Locator'` button will appear. -* Click on the `'Pick Locator'` button and then hover over elements in the browser window to see the locator highlighted underneath each element. -* To choose a locator click on the element you would like to locate and the code for that locator will appear in the locator playground next to the Pick Locator button. -* You can then edit the locator in the locator playground to fine tune it and see the matching element highlighted in the browser window. -* Use the copy button to copy the locator and paste it into your code. +* Press the `'Record'` button to stop recording and the `'Pick Locator'` button will appear +* Click the `'Pick Locator'` button and hover over elements in the browser window to see the locator highlighted underneath each element +* Click the element you want to locate and the code for that locator will appear in the locator playground next to the Pick Locator button +* Edit the locator in the locator playground to fine-tune it and see the matching element highlighted in the browser window +* Use the copy button to copy the locator and paste it into your code ###### -![picking a locator](https://github.com/microsoft/playwright/assets/13063165/1478f56f-422f-4276-9696-0674041f11dc) + ### Emulation -You can also generate tests using emulation so as to generate a test for a specific viewport, device, color scheme, as well as emulate the geolocation, language or timezone. The test generator can also generate a test while preserving authenticated state. Check out the [Test Generator](./codegen.mdx#emulation) guide to learn more. +You can generate tests using emulation for specific viewports, devices, color schemes, geolocation, language, or timezone. The test generator can also preserve authenticated state. Check out the [Test Generator](./codegen.mdx#emulation) guide to learn more. ## What's Next - [See a trace of your tests](./trace-viewer-intro.mdx) diff --git a/dotnet/versioned_docs/version-stable/codegen.mdx b/dotnet/versioned_docs/version-stable/codegen.mdx index 90f4855ac72..13b6b7a3a0b 100644 --- a/dotnet/versioned_docs/version-stable/codegen.mdx +++ b/dotnet/versioned_docs/version-stable/codegen.mdx @@ -5,6 +5,7 @@ title: "Test generator" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; import LiteYouTube from '@site/src/components/LiteYouTube'; diff --git a/dotnet/versioned_docs/version-stable/debug.mdx b/dotnet/versioned_docs/version-stable/debug.mdx index d58c29dd64a..e04f205f249 100644 --- a/dotnet/versioned_docs/version-stable/debug.mdx +++ b/dotnet/versioned_docs/version-stable/debug.mdx @@ -5,6 +5,7 @@ title: "Debugging Tests" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Playwright Inspector diff --git a/dotnet/versioned_docs/version-stable/dialogs.mdx b/dotnet/versioned_docs/version-stable/dialogs.mdx index 4a330b54729..5bc777df326 100644 --- a/dotnet/versioned_docs/version-stable/dialogs.mdx +++ b/dotnet/versioned_docs/version-stable/dialogs.mdx @@ -5,6 +5,7 @@ title: "Dialogs" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/docker.mdx b/dotnet/versioned_docs/version-stable/docker.mdx index 90730270f59..9eeed0d723e 100644 --- a/dotnet/versioned_docs/version-stable/docker.mdx +++ b/dotnet/versioned_docs/version-stable/docker.mdx @@ -5,6 +5,7 @@ title: "Docker" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -22,7 +23,7 @@ This Docker image is intended to be used for testing and development purposes on ### Pull the image ```bash -docker pull mcr.microsoft.com/playwright/dotnet:v1.53.0-noble +docker pull mcr.microsoft.com/playwright/dotnet:v1.54.0-noble ``` ### Run the image @@ -34,7 +35,7 @@ By default, the Docker image will use the `root` user to run the browsers. This On trusted websites, you can avoid creating a separate user and use root for it since you trust the code which will run on the browsers. ```bash -docker run -it --rm --ipc=host mcr.microsoft.com/playwright/dotnet:v1.53.0-noble /bin/bash +docker run -it --rm --ipc=host mcr.microsoft.com/playwright/dotnet:v1.54.0-noble /bin/bash ``` #### Crawling and scraping @@ -42,7 +43,7 @@ docker run -it --rm --ipc=host mcr.microsoft.com/playwright/dotnet:v1.53.0-noble On untrusted websites, it's recommended to use a separate user for launching the browsers in combination with the seccomp profile. Inside the container or if you are using the Docker image as a base image you have to use `adduser` for it. ```bash -docker run -it --rm --ipc=host --user pwuser --security-opt seccomp=seccomp_profile.json mcr.microsoft.com/playwright/dotnet:v1.53.0-noble /bin/bash +docker run -it --rm --ipc=host --user pwuser --security-opt seccomp=seccomp_profile.json mcr.microsoft.com/playwright/dotnet:v1.54.0-noble /bin/bash ``` [`seccomp_profile.json`](https://github.com/microsoft/playwright/blob/main/utils/docker/seccomp_profile.json) is needed to run Chromium with sandbox. This is a [default Docker seccomp profile](https://github.com/docker/engine/blob/d0d99b04cf6e00ed3fc27e81fc3d94e7eda70af3/profiles/seccomp/default.json) with extra user namespace cloning permissions: @@ -82,7 +83,7 @@ You can run Playwright Server in Docker while keeping your tests running on the Start the Playwright Server in Docker: ```bash -docker run -p 3000:3000 --rm --init -it --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.53.0-noble /bin/sh -c "npx -y playwright@1.53.0 run-server --port 3000 --host 0.0.0.0" +docker run -p 3000:3000 --rm --init -it --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.54.0-noble /bin/sh -c "npx -y playwright@1.54.0 run-server --port 3000 --host 0.0.0.0" ``` #### Connecting to the Server @@ -99,7 +100,7 @@ await using var browser = await playwright.Chromium.ConnectAsync("ws://127.0.0.1 If you need to access local servers from within the Docker container: ```bash -docker run --add-host=hostmachine:host-gateway -p 3000:3000 --rm --init -it --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.53.0-noble /bin/sh -c "npx -y playwright@1.53.0 run-server --port 3000 --host 0.0.0.0" +docker run --add-host=hostmachine:host-gateway -p 3000:3000 --rm --init -it --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.54.0-noble /bin/sh -c "npx -y playwright@1.54.0 run-server --port 3000 --host 0.0.0.0" ``` This makes `hostmachine` point to the host's localhost. Your tests should use `hostmachine` instead of `localhost` when accessing local servers. @@ -114,9 +115,9 @@ When running tests remotely, ensure the Playwright version in your tests matches See [all available image tags]. We currently publish images with the following tags: -- `:v1.53.0` - Playwright v1.53.0 release docker image based on Ubuntu 24.04 LTS (Noble Numbat). -- `:v1.53.0-noble` - Playwright v1.53.0 release docker image based on Ubuntu 24.04 LTS (Noble Numbat). -- `:v1.53.0-jammy` - Playwright v1.53.0 release docker image based on Ubuntu 22.04 LTS (Jammy Jellyfish). +- `:v1.54.0` - Playwright v1.54.0 release docker image based on Ubuntu 24.04 LTS (Noble Numbat). +- `:v1.54.0-noble` - Playwright v1.54.0 release docker image based on Ubuntu 24.04 LTS (Noble Numbat). +- `:v1.54.0-jammy` - Playwright v1.54.0 release docker image based on Ubuntu 22.04 LTS (Jammy Jellyfish). :::note diff --git a/dotnet/versioned_docs/version-stable/downloads.mdx b/dotnet/versioned_docs/version-stable/downloads.mdx index 4b2511f751a..99834b7cbe9 100644 --- a/dotnet/versioned_docs/version-stable/downloads.mdx +++ b/dotnet/versioned_docs/version-stable/downloads.mdx @@ -5,6 +5,7 @@ title: "Downloads" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/emulation.mdx b/dotnet/versioned_docs/version-stable/emulation.mdx index c5a4d0e4443..019d3f0315d 100644 --- a/dotnet/versioned_docs/version-stable/emulation.mdx +++ b/dotnet/versioned_docs/version-stable/emulation.mdx @@ -5,6 +5,7 @@ title: "Emulation" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/evaluating.mdx b/dotnet/versioned_docs/version-stable/evaluating.mdx index 2b46f35f916..314f1bcd2ff 100644 --- a/dotnet/versioned_docs/version-stable/evaluating.mdx +++ b/dotnet/versioned_docs/version-stable/evaluating.mdx @@ -5,6 +5,7 @@ title: "Evaluating JavaScript" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/events.mdx b/dotnet/versioned_docs/version-stable/events.mdx index fcc18829fd4..d4b10cf2d38 100644 --- a/dotnet/versioned_docs/version-stable/events.mdx +++ b/dotnet/versioned_docs/version-stable/events.mdx @@ -5,6 +5,7 @@ title: "Events" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/extensibility.mdx b/dotnet/versioned_docs/version-stable/extensibility.mdx index 1e4f3948000..3d0c5a1ab4d 100644 --- a/dotnet/versioned_docs/version-stable/extensibility.mdx +++ b/dotnet/versioned_docs/version-stable/extensibility.mdx @@ -5,6 +5,7 @@ title: "Extensibility" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Custom selector engines diff --git a/dotnet/versioned_docs/version-stable/frames.mdx b/dotnet/versioned_docs/version-stable/frames.mdx index 84797a050e9..9dfc8a4565a 100644 --- a/dotnet/versioned_docs/version-stable/frames.mdx +++ b/dotnet/versioned_docs/version-stable/frames.mdx @@ -5,6 +5,7 @@ title: "Frames" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/handles.mdx b/dotnet/versioned_docs/version-stable/handles.mdx index 6a8be5b34ce..8b295b098a5 100644 --- a/dotnet/versioned_docs/version-stable/handles.mdx +++ b/dotnet/versioned_docs/version-stable/handles.mdx @@ -5,6 +5,7 @@ title: "Handles" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/input.mdx b/dotnet/versioned_docs/version-stable/input.mdx index 61f5a13abcf..d9c42227d97 100644 --- a/dotnet/versioned_docs/version-stable/input.mdx +++ b/dotnet/versioned_docs/version-stable/input.mdx @@ -5,6 +5,7 @@ title: "Actions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/intro.mdx b/dotnet/versioned_docs/version-stable/intro.mdx index 6a3189ff8ca..3e4d7eeb875 100644 --- a/dotnet/versioned_docs/version-stable/intro.mdx +++ b/dotnet/versioned_docs/version-stable/intro.mdx @@ -5,6 +5,7 @@ title: "Installation" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -13,7 +14,7 @@ Playwright was created specifically to accommodate the needs of end-to-end testi You can choose to use MSTest, NUnit, or xUnit [base classes](./test-runners.mdx) that Playwright provides to write end-to-end tests. These classes support running tests on multiple browser engines, parallelizing tests, adjusting launch/context options and getting a [Page]/[BrowserContext] instance per test out of the box. Alternatively you can use the [library](./library.mdx) to manually write the testing infrastructure. 1. Start by creating a new project with `dotnet new`. This will create the `PlaywrightTests` directory which includes a `UnitTest1.cs` file: - + @@ -42,11 +43,20 @@ cd PlaywrightTests + + +```bash +dotnet new xunit -n PlaywrightTests +cd PlaywrightTests +``` + + + 2. Install the necessary Playwright dependencies: - + @@ -72,6 +82,14 @@ dotnet add package Microsoft.Playwright.Xunit + + +```bash +dotnet add package Microsoft.Playwright.Xunit.v3 +``` + + + 3. Build the project so the `playwright.ps1` is available inside the `bin` directory: @@ -92,7 +110,7 @@ If `pwsh` is not available, you will have to [install PowerShell](https://docs.m Edit the `UnitTest1.cs` file with the code below to create an example end-to-end test: - + @@ -207,6 +225,42 @@ public class UnitTest1: PageTest + + +```csharp title="UnitTest1.cs" +using System.Text.RegularExpressions; +using Microsoft.Playwright; +using Microsoft.Playwright.Xunit.v3; + +namespace PlaywrightTests; + +public class UnitTest1: PageTest +{ + [Fact] + public async Task HasTitle() + { + await Page.GotoAsync("https://playwright.dev"); + + // Expect a title "to contain" a substring. + await Expect(Page).ToHaveTitleAsync(new Regex("Playwright")); + } + + [Fact] + public async Task GetStartedLink() + { + await Page.GotoAsync("https://playwright.dev"); + + // Click the get started link. + await Page.GetByRole(AriaRole.Link, new() { Name = "Get started" }).ClickAsync(); + + // Expects page to have a heading with the name of Installation. + await Expect(Page.GetByRole(AriaRole.Heading, new() { Name = "Installation" })).ToBeVisibleAsync(); + } +} +``` + + + ## Running the Example Tests @@ -223,7 +277,7 @@ See our doc on [Running and Debugging Tests](./running-tests.mdx) to learn more - Playwright is distributed as a .NET Standard 2.0 library. We recommend .NET 8. - Windows 10+, Windows Server 2016+ or Windows Subsystem for Linux (WSL). - macOS 14 Ventura, or later. -- Debian 12, Ubuntu 22.04, Ubuntu 24.04, on x86-64 and arm64 architecture. +- Debian 12, Debian 13, Ubuntu 22.04, Ubuntu 24.04, on x86-64 and arm64 architecture. ## What's next - [Write tests using web first assertions, page fixtures and locators](./writing-tests.mdx) @@ -231,7 +285,7 @@ See our doc on [Running and Debugging Tests](./running-tests.mdx) to learn more - [Generate tests with Codegen](./codegen-intro.mdx) - [See a trace of your tests](./trace-viewer-intro.mdx) - [Run tests on CI](./ci-intro.mdx) -- [Learn more about the MSTest, NUnit, and xUnit base classes](./test-runners.mdx) +- [Learn more about the MSTest, NUnit, xUnit and xUnit v3 base classes](./test-runners.mdx) [Accessibility]: /api/class-accessibility.mdx "Accessibility" diff --git a/dotnet/versioned_docs/version-stable/languages.mdx b/dotnet/versioned_docs/version-stable/languages.mdx index 2d0b901919e..c960f672af7 100644 --- a/dotnet/versioned_docs/version-stable/languages.mdx +++ b/dotnet/versioned_docs/version-stable/languages.mdx @@ -5,6 +5,7 @@ title: "Supported languages" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -30,7 +31,7 @@ You can choose any testing framework such as JUnit or TestNG based on your proje ## .NET -Playwright for .NET comes with MSTest, NUnit, and xUnit [base classes](https://playwright.dev/dotnet/docs/test-runners) for writing end-to-end tests. +Playwright for .NET comes with MSTest, NUnit, xUnit, and xUnit v3 [base classes](https://playwright.dev/dotnet/docs/test-runners) for writing end-to-end tests. * [Documentation](https://playwright.dev/dotnet/docs/intro) * [GitHub repo](https://github.com/microsoft/playwright-dotnet) diff --git a/dotnet/versioned_docs/version-stable/library.mdx b/dotnet/versioned_docs/version-stable/library.mdx index c26935acb42..6fb52d6b810 100644 --- a/dotnet/versioned_docs/version-stable/library.mdx +++ b/dotnet/versioned_docs/version-stable/library.mdx @@ -5,10 +5,11 @@ title: "Getting started - Library" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction -Playwright can either be used with the [MSTest, NUnit, or xUnit base classes](./test-runners.mdx) or as a Playwright Library (this guide). If you are working on an application that utilizes Playwright capabilities or you are using Playwright with another test runner, read on. +Playwright can either be used with the [MSTest, NUnit, xUnit, or xUnit v3 base classes](./test-runners.mdx) or as a Playwright Library (this guide). If you are working on an application that utilizes Playwright capabilities or you are using Playwright with another test runner, read on. ## Usage diff --git a/dotnet/versioned_docs/version-stable/locators.mdx b/dotnet/versioned_docs/version-stable/locators.mdx index e961cb4d71a..428f37e816c 100644 --- a/dotnet/versioned_docs/version-stable/locators.mdx +++ b/dotnet/versioned_docs/version-stable/locators.mdx @@ -5,6 +5,7 @@ title: "Locators" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/mock.mdx b/dotnet/versioned_docs/version-stable/mock.mdx index 9ffa153af2f..fa848fec502 100644 --- a/dotnet/versioned_docs/version-stable/mock.mdx +++ b/dotnet/versioned_docs/version-stable/mock.mdx @@ -5,6 +5,7 @@ title: "Mock APIs" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -82,6 +83,9 @@ To record a HAR file we use [Page.RouteFromHARAsync()](/api/class-page.mdx#page- 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. +#### +Alternatively, you can also record HAR files by using the [RecordHarPath](/api/class-browser.mdx#browser-new-context-option-record-har-path) option in [Browser.NewContextAsync()](/api/class-browser.mdx#browser-new-context) when creating a browser context. This allows you to capture all network traffic for the entire context until the context is closed. + ```csharp // Get the response from the HAR file await page.RouteFromHARAsync("./hars/fruit.har", new () { diff --git a/dotnet/versioned_docs/version-stable/navigations.mdx b/dotnet/versioned_docs/version-stable/navigations.mdx index d60331e1370..a055e83aa0c 100644 --- a/dotnet/versioned_docs/version-stable/navigations.mdx +++ b/dotnet/versioned_docs/version-stable/navigations.mdx @@ -5,6 +5,7 @@ title: "Navigations" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/network.mdx b/dotnet/versioned_docs/version-stable/network.mdx index 512847ea620..71dc7418188 100644 --- a/dotnet/versioned_docs/version-stable/network.mdx +++ b/dotnet/versioned_docs/version-stable/network.mdx @@ -5,6 +5,7 @@ title: "Network" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/other-locators.mdx b/dotnet/versioned_docs/version-stable/other-locators.mdx index fd34190284d..5063b14858f 100644 --- a/dotnet/versioned_docs/version-stable/other-locators.mdx +++ b/dotnet/versioned_docs/version-stable/other-locators.mdx @@ -5,6 +5,7 @@ title: "Other locators" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/pages.mdx b/dotnet/versioned_docs/version-stable/pages.mdx index beddf404289..1d0356e9e55 100644 --- a/dotnet/versioned_docs/version-stable/pages.mdx +++ b/dotnet/versioned_docs/version-stable/pages.mdx @@ -5,6 +5,7 @@ title: "Pages" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Pages diff --git a/dotnet/versioned_docs/version-stable/pom.mdx b/dotnet/versioned_docs/version-stable/pom.mdx index da302a6704a..897fce0a5cf 100644 --- a/dotnet/versioned_docs/version-stable/pom.mdx +++ b/dotnet/versioned_docs/version-stable/pom.mdx @@ -5,6 +5,7 @@ title: "Page object models" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/release-notes.mdx b/dotnet/versioned_docs/version-stable/release-notes.mdx index 3b1eb6a4fe3..5329ac77da2 100644 --- a/dotnet/versioned_docs/version-stable/release-notes.mdx +++ b/dotnet/versioned_docs/version-stable/release-notes.mdx @@ -6,8 +6,33 @@ toc_max_heading_level: 2 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; + +## Version 1.55 + +### Codegen +- Automatic `toBeVisible()` assertions: Codegen can now generate automatic `toBeVisible()` assertions for common UI interactions. This feature can be enabled in the Codegen settings UI. + +### Breaking Changes +- ⚠️ Dropped support for Chromium extension manifest v2. + +### Miscellaneous +- Added support for Debian 13 "Trixie". +- Added support for Xunit v3 as part of [`Microsoft.Playwright.Xunit.v3`](https://www.nuget.org/packages/Microsoft.Playwright.Xunit.v3) +- Added support for MSTest v4 as part of [`Microsoft.Playwright.MSTest.v4`](https://www.nuget.org/packages/Microsoft.Playwright.MSTest.v4) + +### Browser Versions +- Chromium 140.0.7339.16 +- Mozilla Firefox 141.0 +- WebKit 26.0 + +This version was also tested against the following stable channels: +- Google Chrome 139 +- Microsoft Edge 139 ## Version 1.54 + +### Highlights - New cookie property `PartitionKey` in [BrowserContext.CookiesAsync()](/api/class-browsercontext.mdx#browser-context-cookies) and [BrowserContext.AddCookiesAsync()](/api/class-browsercontext.mdx#browser-context-add-cookies). This property allows to save and restore partitioned cookies. See [CHIPS MDN article](https://developer.mozilla.org/en-US/docs/Web/Privacy/Guides/Privacy_sandbox/Partitioned_cookies) for more information. Note that browsers have different support and defaults for cookie partitioning. - New option `--user-data-dir` in multiple commands. You can specify the same user data dir to reuse browsing state, like authentication, between sessions. @@ -28,7 +53,7 @@ This version was also tested against the following stable channels: ## Version 1.53 -### Miscellaneous +### 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 method [Locator.Describe()](/api/class-locator.mdx#locator-describe) to describe a locator. Used for trace viewer. @@ -72,7 +97,6 @@ This version was also tested against the following stable channels: ### Miscellaneous - New option [MaxRedirects](/api/class-apirequest.mdx#api-request-new-context-option-max-redirects) in [ApiRequest.NewContextAsync()](/api/class-apirequest.mdx#api-request-new-context) to control the maximum number of redirects. -- New option `ref` in [Locator.AriaSnapshotAsync()](/api/class-locator.mdx#locator-aria-snapshot) to generate reference for each element in the snapshot which can later be used to locate the element. ### Breaking Changes - Glob URL patterns in methods like [Page.RouteAsync()](/api/class-page.mdx#page-route) do not support `?` and `[]` anymore. We recommend using regular expressions instead. diff --git a/dotnet/versioned_docs/version-stable/running-tests.mdx b/dotnet/versioned_docs/version-stable/running-tests.mdx index 067d518eb90..4f9b3aa6034 100644 --- a/dotnet/versioned_docs/version-stable/running-tests.mdx +++ b/dotnet/versioned_docs/version-stable/running-tests.mdx @@ -5,6 +5,7 @@ title: "Running and debugging tests" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -149,7 +150,7 @@ dotnet test --filter "Name~GetStartedLink" ### Run tests with multiple workers: - + @@ -182,6 +183,21 @@ We recommend xUnit 2.8+ which uses the [`conservative` parallelism algorithm](ht + + +```bash +dotnet test -- xUnit.MaxParallelThreads=5 +``` + +See [here](https://xunit.net/docs/running-tests-in-parallel.html) for more information to run tests in parallel with xUnit v3. + +:::note + +xUnit v3 uses the [`conservative` parallelism algorithm](https://xunit.net/docs/running-tests-in-parallel.html#algorithms) by default. +::: + + + ## Debugging Tests @@ -230,7 +246,7 @@ Check out our [debugging guide](./debug.mdx) to learn more about the [Playwright - [Generate tests with Codegen](./codegen-intro.mdx) - [See a trace of your tests](./trace-viewer-intro.mdx) - [Run tests on CI](./ci-intro.mdx) -- [Learn more about the MSTest and NUnit base classes](./test-runners.mdx) +- [Learn more about the MSTest, NUnit, xUnit and xUnit v3 base classes](./test-runners.mdx) [Accessibility]: /api/class-accessibility.mdx "Accessibility" diff --git a/dotnet/versioned_docs/version-stable/screenshots.mdx b/dotnet/versioned_docs/version-stable/screenshots.mdx index c72ce7fdfec..42306845089 100644 --- a/dotnet/versioned_docs/version-stable/screenshots.mdx +++ b/dotnet/versioned_docs/version-stable/screenshots.mdx @@ -5,6 +5,7 @@ title: "Screenshots" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/selenium-grid.mdx b/dotnet/versioned_docs/version-stable/selenium-grid.mdx index 36dd5988d41..0a65242b49a 100644 --- a/dotnet/versioned_docs/version-stable/selenium-grid.mdx +++ b/dotnet/versioned_docs/version-stable/selenium-grid.mdx @@ -5,6 +5,7 @@ title: "Selenium Grid (experimental)" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/test-assertions.mdx b/dotnet/versioned_docs/version-stable/test-assertions.mdx index 93eeb4cfa16..9a4ff70c8ef 100644 --- a/dotnet/versioned_docs/version-stable/test-assertions.mdx +++ b/dotnet/versioned_docs/version-stable/test-assertions.mdx @@ -5,6 +5,7 @@ title: "Assertions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## List of assertions @@ -45,7 +46,7 @@ You can specify a custom timeout for assertions either globally or per assertion ### Global timeout - + @@ -114,6 +115,26 @@ public class UnitTest1: PageTest + + +```csharp title="UnitTest1.cs" +using Microsoft.Playwright; +using Microsoft.Playwright.Xunit.v3; + +namespace PlaywrightTests; + +public class UnitTest1: PageTest +{ + UnitTest1() + { + SetDefaultExpectTimeout(10_000); + } + // ... +} +``` + + + ### Per assertion timeout diff --git a/dotnet/versioned_docs/version-stable/test-runners.mdx b/dotnet/versioned_docs/version-stable/test-runners.mdx index 70a4c25aad5..933482232c6 100644 --- a/dotnet/versioned_docs/version-stable/test-runners.mdx +++ b/dotnet/versioned_docs/version-stable/test-runners.mdx @@ -5,14 +5,15 @@ title: "Test Runners" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction -While Playwright for .NET isn't tied to a particular test runner or testing framework, in our experience the easiest way of getting started is by using the base classes we provide for MSTest, NUnit, or xUnit. These classes support running tests on multiple browser engines, adjusting launch/context options and getting a [Page]/[BrowserContext] instance per test out of the box. +While Playwright for .NET isn't tied to a particular test runner or testing framework, in our experience the easiest way of getting started is by using the base classes we provide for MSTest, NUnit, xUnit, or xUnit v3. These classes support running tests on multiple browser engines, adjusting launch/context options and getting a [Page]/[BrowserContext] instance per test out of the box. Playwright and Browser instances will be reused between tests for better performance. We recommend running each test case in a new BrowserContext, this way browser state will be isolated between the tests. - + @@ -32,13 +33,19 @@ Playwright provides base classes to write tests with xUnit via the [`Microsoft.P + + +Playwright provides base classes to write tests with xUnit v3 via the [`Microsoft.Playwright.Xunit.v3`](https://www.nuget.org/packages/Microsoft.Playwright.Xunit.v3) package. + + + Check out the [installation guide](./intro.mdx) to get started. ## Running tests in Parallel - + @@ -76,11 +83,25 @@ We recommend xUnit 2.8+ which uses the [`conservative` parallelism algorithm](ht + + +By default xUnit v3 will run all classes in parallel, while running tests inside each class sequentially. It will create by default as many processes as there are cores on the system. You can adjust this behavior by using the following CLI parameter or using a `.runsettings` file, see below. + +```bash +dotnet test -- xUnit.MaxParallelThreads=5 +``` + +:::note +xUnit v3 uses the [`conservative` parallelism algorithm](https://xunit.net/docs/running-tests-in-parallel.html#algorithms) by default. +::: + + + ## Customizing [BrowserContext] options - + @@ -197,6 +218,42 @@ public class UnitTest1 : PageTest + + +To customize context options, you can override the `ContextOptions` method of your test class derived from `Microsoft.Playwright.Xunit.v3.PageTest` or `Microsoft.Playwright.Xunit.v3.ContextTest`. See the following example: + +```csharp +using Microsoft.Playwright; +using Microsoft.Playwright.Xunit.v3; + +namespace PlaywrightTests; + +public class UnitTest1 : PageTest +{ + [Fact] + public async Task TestWithCustomContextOptions() + { + // The following Page (and BrowserContext) instance has the custom colorScheme, viewport and baseURL set: + await Page.GotoAsync("/login"); + } + public override BrowserNewContextOptions ContextOptions() + { + return new BrowserNewContextOptions() + { + ColorScheme = ColorScheme.Light, + ViewportSize = new() + { + Width = 1920, + Height = 1080 + }, + BaseURL = "https://github.com", + }; + } +} +``` + + + ## Customizing [Browser]/launch options @@ -228,7 +285,7 @@ When you have enabled the [verbose API log](./debug.mdx#verbose-api-logs), via t When running tests from Visual Studio, you can take advantage of the `.runsettings` file. The following shows a reference of the supported values. - + @@ -328,11 +385,43 @@ For example, to specify the number of workers, you can use `xUnit.MaxParallelThr + + +For example, to specify the number of workers, you can use `xUnit.MaxParallelThreads`. You can also enable `DEBUG` logs using `RunConfiguration.EnvironmentVariables`. + +```xml + + + + + 1 + + + + + + pw:api + + + + + chromium + 5000 + + false + msedge + + + +``` + + + ## Base classes for Playwright - + @@ -352,6 +441,12 @@ There are a few base classes available to you in `Microsoft.Playwright.Xunit` na + + +There are a few base classes available to you in `Microsoft.Playwright.Xunit.v3` namespace: + + + |Test |Description| diff --git a/dotnet/versioned_docs/version-stable/touch-events.mdx b/dotnet/versioned_docs/version-stable/touch-events.mdx index 247e46af8f8..a323c123191 100644 --- a/dotnet/versioned_docs/version-stable/touch-events.mdx +++ b/dotnet/versioned_docs/version-stable/touch-events.mdx @@ -5,6 +5,7 @@ title: "Touch events (legacy)" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/trace-viewer-intro.mdx b/dotnet/versioned_docs/version-stable/trace-viewer-intro.mdx index 99bd16f1635..7e6d37d963f 100644 --- a/dotnet/versioned_docs/version-stable/trace-viewer-intro.mdx +++ b/dotnet/versioned_docs/version-stable/trace-viewer-intro.mdx @@ -5,6 +5,7 @@ title: "Trace viewer" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -18,7 +19,7 @@ Playwright Trace Viewer is a GUI tool that lets you explore recorded Playwright Traces can be recorded using the [BrowserContext.Tracing](/api/class-browsercontext.mdx#browser-context-tracing) API as follows: - + @@ -176,6 +177,71 @@ public class WithTestNameAttribute : BeforeAfterTestAttribute + + +```csharp +using System.Reflection; +using Microsoft.Playwright; +using Microsoft.Playwright.Xunit.v3; +using Xunit.Sdk; + +namespace PlaywrightTests; + +[WithTestName] +public class UnitTest1 : PageTest +{ + public override async Task InitializeAsync() + { + await base.InitializeAsync().ConfigureAwait(false); + await Context.Tracing.StartAsync(new() + { + Title = $"{WithTestNameAttribute.CurrentClassName}.{WithTestNameAttribute.CurrentTestName}", + Screenshots = true, + Snapshots = true, + Sources = true + }); + } + + public override async Task DisposeAsync() + { + await Context.Tracing.StopAsync(new() + { + Path = Path.Combine( + Environment.CurrentDirectory, + "playwright-traces", + $"{WithTestNameAttribute.CurrentClassName}.{WithTestNameAttribute.CurrentTestName}.zip" + ) + }); + await base.DisposeAsync().ConfigureAwait(false); + } + + [Fact] + public async Task GetStartedLink() + { + // ... + await Page.GotoAsync("https://playwright.dev/dotnet/docs/intro"); + } +} + +public class WithTestNameAttribute : BeforeAfterTestAttribute +{ + public static string CurrentTestName = string.Empty; + public static string CurrentClassName = string.Empty; + + public override void Before(MethodInfo methodInfo) + { + CurrentTestName = methodInfo.Name; + CurrentClassName = methodInfo.DeclaringType!.Name; + } + + public override void After(MethodInfo methodInfo) + { + } +} +``` + + + This will record a zip file for each test, e.g. `PlaywrightTests.ExampleTest.GetStartedLink.zip` and place it into the `bin/Debug/net8.0/playwright-traces/` directory. @@ -194,7 +260,7 @@ Check out our detailed guide on [Trace Viewer](/trace-viewer.mdx) to learn more ## What's next - [Run tests on CI with GitHub Actions](/ci-intro.mdx) -- [Learn more about the MSTest, NUnit, and xUnit base classes](./test-runners.mdx) +- [Learn more about the MSTest, NUnit, xUnit, and xUnit v3 base classes](./test-runners.mdx) [Accessibility]: /api/class-accessibility.mdx "Accessibility" diff --git a/dotnet/versioned_docs/version-stable/trace-viewer.mdx b/dotnet/versioned_docs/version-stable/trace-viewer.mdx index 4098118c627..6161c9ecb8b 100644 --- a/dotnet/versioned_docs/version-stable/trace-viewer.mdx +++ b/dotnet/versioned_docs/version-stable/trace-viewer.mdx @@ -5,6 +5,7 @@ title: "Trace viewer" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; import LiteYouTube from '@site/src/components/LiteYouTube'; @@ -46,7 +47,7 @@ https://trace.playwright.dev/?trace=https://demo.playwright.dev/reports/todomvc/ Traces can be recorded using the [BrowserContext.Tracing](/api/class-browsercontext.mdx#browser-context-tracing) API as follows: - + @@ -208,6 +209,71 @@ public class WithTestNameAttribute : BeforeAfterTestAttribute + + +```csharp +using System.Reflection; +using Microsoft.Playwright; +using Microsoft.Playwright.Xunit.v3; +using Xunit.Sdk; + +namespace PlaywrightTests; + +[WithTestName] +public class UnitTest1 : PageTest +{ + public override async Task InitializeAsync() + { + await base.InitializeAsync().ConfigureAwait(false); + await Context.Tracing.StartAsync(new() + { + Title = $"{WithTestNameAttribute.CurrentClassName}.{WithTestNameAttribute.CurrentTestName}", + Screenshots = true, + Snapshots = true, + Sources = true + }); + } + + public override async Task DisposeAsync() + { + await Context.Tracing.StopAsync(new() + { + Path = Path.Combine( + Environment.CurrentDirectory, + "playwright-traces", + $"{WithTestNameAttribute.CurrentClassName}.{WithTestNameAttribute.CurrentTestName}.zip" + ) + }); + await base.DisposeAsync().ConfigureAwait(false); + } + + [Fact] + public async Task GetStartedLink() + { + // ... + await Page.GotoAsync("https://playwright.dev/dotnet/docs/intro"); + } +} + +public class WithTestNameAttribute : BeforeAfterTestAttribute +{ + public static string CurrentTestName = string.Empty; + public static string CurrentClassName = string.Empty; + + public override void Before(MethodInfo methodInfo) + { + CurrentTestName = methodInfo.Name; + CurrentClassName = methodInfo.DeclaringType!.Name; + } + + public override void After(MethodInfo methodInfo) + { + } +} +``` + + + This will record the trace and place it into the `bin/Debug/net8.0/playwright-traces/` directory. @@ -216,7 +282,7 @@ This will record the trace and place it into the `bin/Debug/net8.0/playwright-tr Setup your tests to record a trace only when the test fails: - + @@ -379,6 +445,71 @@ public class WithTestNameAttribute : BeforeAfterTestAttribute + + +```csharp +using System.Reflection; +using Microsoft.Playwright; +using Microsoft.Playwright.Xunit.v3; +using Xunit.Sdk; + +namespace PlaywrightTests; + +[WithTestName] +public class UnitTest1 : PageTest +{ + public override async Task InitializeAsync() + { + await base.InitializeAsync().ConfigureAwait(false); + await Context.Tracing.StartAsync(new() + { + Title = $"{WithTestNameAttribute.CurrentClassName}.{WithTestNameAttribute.CurrentTestName}", + Screenshots = true, + Snapshots = true, + Sources = true + }); + } + + public override async Task DisposeAsync() + { + await Context.Tracing.StopAsync(new() + { + Path = !TestOk ? Path.Combine( + Environment.CurrentDirectory, + "playwright-traces", + $"{WithTestNameAttribute.CurrentClassName}.{WithTestNameAttribute.CurrentTestName}.zip" + ) : null + }); + await base.DisposeAsync().ConfigureAwait(false); + } + + [Fact] + public async Task GetStartedLink() + { + // ... + await Page.GotoAsync("https://playwright.dev/dotnet/docs/intro"); + } +} + +public class WithTestNameAttribute : BeforeAfterTestAttribute +{ + public static string CurrentTestName = string.Empty; + public static string CurrentClassName = string.Empty; + + public override void Before(MethodInfo methodInfo) + { + CurrentTestName = methodInfo.Name; + CurrentClassName = methodInfo.DeclaringType!.Name; + } + + public override void After(MethodInfo methodInfo) + { + } +} +``` + + + ## Trace Viewer features diff --git a/dotnet/versioned_docs/version-stable/videos.mdx b/dotnet/versioned_docs/version-stable/videos.mdx index 4c1e43e1390..61ddb9ea35f 100644 --- a/dotnet/versioned_docs/version-stable/videos.mdx +++ b/dotnet/versioned_docs/version-stable/videos.mdx @@ -5,6 +5,7 @@ title: "Videos" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/webview2.mdx b/dotnet/versioned_docs/version-stable/webview2.mdx index e2a47effd31..282f01a0820 100644 --- a/dotnet/versioned_docs/version-stable/webview2.mdx +++ b/dotnet/versioned_docs/version-stable/webview2.mdx @@ -5,6 +5,7 @@ title: "WebView2" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/dotnet/versioned_docs/version-stable/writing-tests.mdx b/dotnet/versioned_docs/version-stable/writing-tests.mdx index 14756f75102..f59a6df14bf 100644 --- a/dotnet/versioned_docs/version-stable/writing-tests.mdx +++ b/dotnet/versioned_docs/version-stable/writing-tests.mdx @@ -5,6 +5,7 @@ title: "Writing tests" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -29,7 +30,7 @@ That's it! These design choices allow Playwright users to forget about flaky tim Take a look at the following example to see how to write a test. - + @@ -146,6 +147,42 @@ public class UnitTest1: PageTest + + +```csharp title="UnitTest1.cs" +using System.Text.RegularExpressions; +using Microsoft.Playwright; +using Microsoft.Playwright.Xunit.v3; + +namespace PlaywrightTests; + +public class UnitTest1: PageTest +{ + [Fact] + public async Task HasTitle() + { + await Page.GotoAsync("https://playwright.dev"); + + // Expect a title "to contain" a substring. + await Expect(Page).ToHaveTitleAsync(new Regex("Playwright")); + } + + [Fact] + public async Task GetStartedLink() + { + await Page.GotoAsync("https://playwright.dev"); + + // Click the get started link. + await Page.GetByRole(AriaRole.Link, new() { Name = "Get started" }).ClickAsync(); + + // Expects page to have a heading with the name of Installation. + await Expect(Page.GetByRole(AriaRole.Heading, new() { Name = "Installation" })).ToBeVisibleAsync(); + } +} +``` + + + ## Actions @@ -219,9 +256,9 @@ Here is the list of the most popular async assertions. Note that there are [many ## Test Isolation -The Playwright NUnit and MSTest test framework base classes will isolate each test from each other by providing a separate `Page` instance. Pages are isolated between tests due to the Browser Context, which is equivalent to a brand new browser profile, where every test gets a fresh environment, even when multiple tests run in a single Browser. +The Playwright NUnit, MSTest, xUnit, and xUnit v3 test framework base classes will isolate each test from each other by providing a separate `Page` instance. Pages are isolated between tests due to the Browser Context, which is equivalent to a brand new browser profile, where every test gets a fresh environment, even when multiple tests run in a single Browser. - + @@ -288,11 +325,31 @@ public class UnitTest1: PageTest + + +```csharp title="UnitTest1.cs" +using Microsoft.Playwright; +using Microsoft.Playwright.Xunit.v3; + +namespace PlaywrightTests; + +public class UnitTest1: PageTest +{ + [Fact] + public async Task BasicTest() + { + await Page.GotoAsync("https://playwright.dev"); + } +} +``` + + + ## Using Test Hooks - + @@ -392,6 +449,41 @@ public class UnitTest1: PageTest + + +You can use `InitializeAsync`/`DisposeAsync` to prepare and clean up your test environment: + +```csharp title="UnitTest1.cs" +using Microsoft.Playwright; +using Microsoft.Playwright.Xunit.v3; + +namespace PlaywrightTests; + +public class UnitTest1: PageTest +{ + [Fact] + public async Task MainNavigation() + { + // Assertions use the expect API. + await Expect(Page).ToHaveURLAsync("https://playwright.dev/"); + } + + override public async Task InitializeAsync() + { + await base.InitializeAsync(); + await Page.GotoAsync("https://playwright.dev"); + } + + public override async Task DisposeAsync() + { + Console.WriteLine("After each test cleanup"); + await base.DisposeAsync(); + } +} +``` + + + ## What's Next @@ -399,7 +491,7 @@ public class UnitTest1: PageTest - [Generate tests with Codegen](./codegen-intro.mdx) - [See a trace of your tests](./trace-viewer-intro.mdx) - [Run tests on CI](./ci-intro.mdx) -- [Learn more about the MSTest, NUnit, or xUnit base classes](./test-runners.mdx) +- [Learn more about the MSTest, NUnit, xUnit, or xUnit v3 base classes](./test-runners.mdx) [Accessibility]: /api/class-accessibility.mdx "Accessibility" diff --git a/java/versioned_docs/version-stable/accessibility-testing.mdx b/java/versioned_docs/version-stable/accessibility-testing.mdx index e6f0cd9d490..36c964b1915 100644 --- a/java/versioned_docs/version-stable/accessibility-testing.mdx +++ b/java/versioned_docs/version-stable/accessibility-testing.mdx @@ -5,6 +5,7 @@ title: "Accessibility testing" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/actionability.mdx b/java/versioned_docs/version-stable/actionability.mdx index b56e8201110..85c3f019e08 100644 --- a/java/versioned_docs/version-stable/actionability.mdx +++ b/java/versioned_docs/version-stable/actionability.mdx @@ -5,6 +5,7 @@ title: "Auto-waiting" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/api-testing.mdx b/java/versioned_docs/version-stable/api-testing.mdx index 9e9e31ddaef..fceefe0fb51 100644 --- a/java/versioned_docs/version-stable/api-testing.mdx +++ b/java/versioned_docs/version-stable/api-testing.mdx @@ -5,6 +5,7 @@ title: "API testing" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/api/class-apirequest.mdx b/java/versioned_docs/version-stable/api/class-apirequest.mdx index 644279a655c..cf872cbe1d7 100644 --- a/java/versioned_docs/version-stable/api/class-apirequest.mdx +++ b/java/versioned_docs/version-stable/api/class-apirequest.mdx @@ -5,6 +5,7 @@ title: "APIRequest" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Exposes API that can be used for the Web API testing. This class is used for creating [APIRequestContext] instance which in turn can be used for sending web requests. An instance of this class can be obtained via [Playwright.request()](/api/class-playwright.mdx#playwright-request). For more information see [APIRequestContext]. @@ -67,6 +68,8 @@ APIRequest.newContext(options); An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`, a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally, `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided with an exact match to the request origin that the certificate is valid for. + Client certificate authentication is only active when at least one client certificate is provided. If you want to reject all client certificates sent by the server, you need to provide a client certificate with an `origin` that does not match any of the domains you plan to visit. + :::note When using WebKit on macOS, accessing `localhost` will not pick up client certificates. You can make it work by replacing `localhost` with `local.playwright`. diff --git a/java/versioned_docs/version-stable/api/class-apirequestcontext.mdx b/java/versioned_docs/version-stable/api/class-apirequestcontext.mdx index e794937f0c4..ed3f5ddaa06 100644 --- a/java/versioned_docs/version-stable/api/class-apirequestcontext.mdx +++ b/java/versioned_docs/version-stable/api/class-apirequestcontext.mdx @@ -5,6 +5,7 @@ title: "APIRequestContext" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; This API is used for the Web API testing. You can use it to trigger API endpoints, configure micro-services, prepare environment or the service to your e2e test. diff --git a/java/versioned_docs/version-stable/api/class-apiresponse.mdx b/java/versioned_docs/version-stable/api/class-apiresponse.mdx index 9eab4228ebd..68c60d291c2 100644 --- a/java/versioned_docs/version-stable/api/class-apiresponse.mdx +++ b/java/versioned_docs/version-stable/api/class-apiresponse.mdx @@ -5,6 +5,7 @@ title: "APIResponse" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [APIResponse] class represents responses returned by [APIRequestContext.get()](/api/class-apirequestcontext.mdx#api-request-context-get) and similar methods. diff --git a/java/versioned_docs/version-stable/api/class-apiresponseassertions.mdx b/java/versioned_docs/version-stable/api/class-apiresponseassertions.mdx index b12c477f99c..e09e980ebd7 100644 --- a/java/versioned_docs/version-stable/api/class-apiresponseassertions.mdx +++ b/java/versioned_docs/version-stable/api/class-apiresponseassertions.mdx @@ -5,6 +5,7 @@ title: "APIResponseAssertions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The [APIResponseAssertions] class provides assertion methods that can be used to make assertions about the [APIResponse] in the tests. diff --git a/java/versioned_docs/version-stable/api/class-browser.mdx b/java/versioned_docs/version-stable/api/class-browser.mdx index 3f3cb8b8f2e..8cecdb8f6c5 100644 --- a/java/versioned_docs/version-stable/api/class-browser.mdx +++ b/java/versioned_docs/version-stable/api/class-browser.mdx @@ -5,6 +5,7 @@ title: "Browser" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; A Browser is created via [BrowserType.launch()](/api/class-browsertype.mdx#browser-type-launch). An example of using a [Browser] to create a [Page]: @@ -211,6 +212,8 @@ browser.close(); An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`, a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally, `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided with an exact match to the request origin that the certificate is valid for. + Client certificate authentication is only active when at least one client certificate is provided. If you want to reject all client certificates sent by the server, you need to provide a client certificate with an `origin` that does not match any of the domains you plan to visit. + :::note When using WebKit on macOS, accessing `localhost` will not pick up client certificates. You can make it work by replacing `localhost` with `local.playwright`. @@ -430,6 +433,8 @@ Browser.newPage(options); An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`, a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally, `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided with an exact match to the request origin that the certificate is valid for. + Client certificate authentication is only active when at least one client certificate is provided. If you want to reject all client certificates sent by the server, you need to provide a client certificate with an `origin` that does not match any of the domains you plan to visit. + :::note When using WebKit on macOS, accessing `localhost` will not pick up client certificates. You can make it work by replacing `localhost` with `local.playwright`. diff --git a/java/versioned_docs/version-stable/api/class-browsercontext.mdx b/java/versioned_docs/version-stable/api/class-browsercontext.mdx index 71d675fb5cd..a6511761c8c 100644 --- a/java/versioned_docs/version-stable/api/class-browsercontext.mdx +++ b/java/versioned_docs/version-stable/api/class-browsercontext.mdx @@ -5,6 +5,7 @@ title: "BrowserContext" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; BrowserContexts provide a way to operate multiple independent browser sessions. diff --git a/java/versioned_docs/version-stable/api/class-browsertype.mdx b/java/versioned_docs/version-stable/api/class-browsertype.mdx index 667ac9994ad..7c533617e98 100644 --- a/java/versioned_docs/version-stable/api/class-browsertype.mdx +++ b/java/versioned_docs/version-stable/api/class-browsertype.mdx @@ -5,6 +5,7 @@ title: "BrowserType" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; BrowserType provides methods to launch a specific browser instance or connect to an existing one. The following is a typical example of using Playwright to drive automation: @@ -279,6 +280,12 @@ BrowserType.launchPersistentContext(userDataDir, options); More details for [Chromium](https://chromium.googlesource.com/chromium/src/+/master/docs/user_data_dir.md#introduction) and [Firefox](https://wiki.mozilla.org/Firefox/CommandLineOptions#User_profile). Chromium's user data directory is the **parent** directory of the "Profile Path" seen at `chrome://version`. Note that browsers do not allow launching multiple instances with the same User Data Directory. + + :::warning + + Chromium/Chrome: Due to recent Chrome policy changes, automating the default Chrome user profile is not supported. Pointing `userDataDir` to Chrome's main "User Data" directory (the profile used for your regular browsing) may result in pages not loading or the browser exiting. Create and use a separate directory (for example, an empty folder) as your automation profile instead. See https://developer.chrome.com/blog/remote-debugging-port for details. + ::: + - `options` `BrowserType.LaunchPersistentContextOptions` *(optional)* - `setAcceptDownloads` [boolean] *(optional)*# @@ -342,6 +349,8 @@ BrowserType.launchPersistentContext(userDataDir, options); An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`, a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally, `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided with an exact match to the request origin that the certificate is valid for. + Client certificate authentication is only active when at least one client certificate is provided. If you want to reject all client certificates sent by the server, you need to provide a client certificate with an `origin` that does not match any of the domains you plan to visit. + :::note When using WebKit on macOS, accessing `localhost` will not pick up client certificates. You can make it work by replacing `localhost` with `local.playwright`. diff --git a/java/versioned_docs/version-stable/api/class-cdpsession.mdx b/java/versioned_docs/version-stable/api/class-cdpsession.mdx index 85925a0830f..aabf3f76f30 100644 --- a/java/versioned_docs/version-stable/api/class-cdpsession.mdx +++ b/java/versioned_docs/version-stable/api/class-cdpsession.mdx @@ -5,6 +5,7 @@ title: "CDPSession" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The `CDPSession` instances are used to talk raw Chrome Devtools Protocol: diff --git a/java/versioned_docs/version-stable/api/class-clock.mdx b/java/versioned_docs/version-stable/api/class-clock.mdx index 8524d9b7d75..e201c8a5a47 100644 --- a/java/versioned_docs/version-stable/api/class-clock.mdx +++ b/java/versioned_docs/version-stable/api/class-clock.mdx @@ -5,6 +5,7 @@ title: "Clock" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Accurately simulating time-dependent behavior is essential for verifying the correctness of applications. Learn more about [clock emulation](../clock.mdx). diff --git a/java/versioned_docs/version-stable/api/class-consolemessage.mdx b/java/versioned_docs/version-stable/api/class-consolemessage.mdx index a545927a9ef..1bcb021928b 100644 --- a/java/versioned_docs/version-stable/api/class-consolemessage.mdx +++ b/java/versioned_docs/version-stable/api/class-consolemessage.mdx @@ -5,6 +5,7 @@ title: "ConsoleMessage" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [ConsoleMessage] objects are dispatched by page via the [Page.onConsoleMessage(handler)](/api/class-page.mdx#page-event-console) event. For each console message logged in the page there will be corresponding event in the Playwright context. diff --git a/java/versioned_docs/version-stable/api/class-dialog.mdx b/java/versioned_docs/version-stable/api/class-dialog.mdx index a885c843673..e2cb355274e 100644 --- a/java/versioned_docs/version-stable/api/class-dialog.mdx +++ b/java/versioned_docs/version-stable/api/class-dialog.mdx @@ -5,6 +5,7 @@ title: "Dialog" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [Dialog] objects are dispatched by page via the [Page.onDialog(handler)](/api/class-page.mdx#page-event-dialog) event. diff --git a/java/versioned_docs/version-stable/api/class-download.mdx b/java/versioned_docs/version-stable/api/class-download.mdx index 073088ca1bf..c5362efc07e 100644 --- a/java/versioned_docs/version-stable/api/class-download.mdx +++ b/java/versioned_docs/version-stable/api/class-download.mdx @@ -5,6 +5,7 @@ title: "Download" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [Download] objects are dispatched by page via the [Page.onDownload(handler)](/api/class-page.mdx#page-event-download) event. diff --git a/java/versioned_docs/version-stable/api/class-elementhandle.mdx b/java/versioned_docs/version-stable/api/class-elementhandle.mdx index 257924f1ce6..7d07e1a65e9 100644 --- a/java/versioned_docs/version-stable/api/class-elementhandle.mdx +++ b/java/versioned_docs/version-stable/api/class-elementhandle.mdx @@ -5,6 +5,7 @@ title: "ElementHandle" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; * extends: [JSHandle] diff --git a/java/versioned_docs/version-stable/api/class-filechooser.mdx b/java/versioned_docs/version-stable/api/class-filechooser.mdx index e0fea5a321e..453264f4c6c 100644 --- a/java/versioned_docs/version-stable/api/class-filechooser.mdx +++ b/java/versioned_docs/version-stable/api/class-filechooser.mdx @@ -5,6 +5,7 @@ title: "FileChooser" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [FileChooser] objects are dispatched by the page in the [Page.onFileChooser(handler)](/api/class-page.mdx#page-event-file-chooser) event. diff --git a/java/versioned_docs/version-stable/api/class-formdata.mdx b/java/versioned_docs/version-stable/api/class-formdata.mdx index c438d104382..805daee883a 100644 --- a/java/versioned_docs/version-stable/api/class-formdata.mdx +++ b/java/versioned_docs/version-stable/api/class-formdata.mdx @@ -5,6 +5,7 @@ title: "FormData" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The [FormData] is used create form data that is sent via [APIRequestContext]. diff --git a/java/versioned_docs/version-stable/api/class-frame.mdx b/java/versioned_docs/version-stable/api/class-frame.mdx index c33a3ae8564..3f060ee8030 100644 --- a/java/versioned_docs/version-stable/api/class-frame.mdx +++ b/java/versioned_docs/version-stable/api/class-frame.mdx @@ -5,6 +5,7 @@ title: "Frame" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; At every point of time, page exposes its current frame tree via the [Page.mainFrame()](/api/class-page.mdx#page-main-frame) and [Frame.childFrames()](/api/class-frame.mdx#frame-child-frames) methods. diff --git a/java/versioned_docs/version-stable/api/class-framelocator.mdx b/java/versioned_docs/version-stable/api/class-framelocator.mdx index 78eedabc22c..e5e8365f4ab 100644 --- a/java/versioned_docs/version-stable/api/class-framelocator.mdx +++ b/java/versioned_docs/version-stable/api/class-framelocator.mdx @@ -5,6 +5,7 @@ title: "FrameLocator" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; FrameLocator represents a view to the `iframe` on the page. It captures the logic sufficient to retrieve the `iframe` and locate elements in that iframe. FrameLocator can be created with either [Locator.contentFrame()](/api/class-locator.mdx#locator-content-frame), [Page.frameLocator()](/api/class-page.mdx#page-frame-locator) or [Locator.frameLocator()](/api/class-locator.mdx#locator-frame-locator) method. diff --git a/java/versioned_docs/version-stable/api/class-jshandle.mdx b/java/versioned_docs/version-stable/api/class-jshandle.mdx index 7754fe2685f..944c7ca7493 100644 --- a/java/versioned_docs/version-stable/api/class-jshandle.mdx +++ b/java/versioned_docs/version-stable/api/class-jshandle.mdx @@ -5,6 +5,7 @@ title: "JSHandle" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; JSHandle represents an in-page JavaScript object. JSHandles can be created with the [Page.evaluateHandle()](/api/class-page.mdx#page-evaluate-handle) method. diff --git a/java/versioned_docs/version-stable/api/class-keyboard.mdx b/java/versioned_docs/version-stable/api/class-keyboard.mdx index d4e332a3665..db44cc086b9 100644 --- a/java/versioned_docs/version-stable/api/class-keyboard.mdx +++ b/java/versioned_docs/version-stable/api/class-keyboard.mdx @@ -5,6 +5,7 @@ title: "Keyboard" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Keyboard provides an api for managing a virtual keyboard. The high level api is [Keyboard.type()](/api/class-keyboard.mdx#keyboard-type), which takes raw characters and generates proper `keydown`, `keypress`/`input`, and `keyup` events on your page. diff --git a/java/versioned_docs/version-stable/api/class-locator.mdx b/java/versioned_docs/version-stable/api/class-locator.mdx index 2aca2d1d148..3a79e400623 100644 --- a/java/versioned_docs/version-stable/api/class-locator.mdx +++ b/java/versioned_docs/version-stable/api/class-locator.mdx @@ -5,6 +5,7 @@ title: "Locator" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Locators are the central piece of Playwright's auto-waiting and retry-ability. In a nutshell, locators represent a way to find element(s) on the page at any moment. A locator can be created with the [Page.locator()](/api/class-page.mdx#page-locator) method. diff --git a/java/versioned_docs/version-stable/api/class-locatorassertions.mdx b/java/versioned_docs/version-stable/api/class-locatorassertions.mdx index 53e31f6e3c4..a03581311b3 100644 --- a/java/versioned_docs/version-stable/api/class-locatorassertions.mdx +++ b/java/versioned_docs/version-stable/api/class-locatorassertions.mdx @@ -5,6 +5,7 @@ title: "LocatorAssertions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The [LocatorAssertions] class provides assertion methods that can be used to make assertions about the [Locator] state in the tests. diff --git a/java/versioned_docs/version-stable/api/class-mouse.mdx b/java/versioned_docs/version-stable/api/class-mouse.mdx index 2ce1015698f..865de2b20c2 100644 --- a/java/versioned_docs/version-stable/api/class-mouse.mdx +++ b/java/versioned_docs/version-stable/api/class-mouse.mdx @@ -5,6 +5,7 @@ title: "Mouse" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The Mouse class operates in main-frame CSS pixels relative to the top-left corner of the viewport. diff --git a/java/versioned_docs/version-stable/api/class-page.mdx b/java/versioned_docs/version-stable/api/class-page.mdx index 37c756657e1..501c3bd2789 100644 --- a/java/versioned_docs/version-stable/api/class-page.mdx +++ b/java/versioned_docs/version-stable/api/class-page.mdx @@ -5,6 +5,7 @@ title: "Page" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Page provides methods to interact with a single tab in a [Browser], or an [extension background page](https://developer.chrome.com/extensions/background_pages) in Chromium. One [Browser] instance might have multiple [Page] instances. @@ -1370,7 +1371,7 @@ Page.opener(); Added in: v1.9page.pause -Pauses script execution. Playwright will stop executing the script and wait for the user to either press 'Resume' button in the page overlay or to call `playwright.resume()` in the DevTools console. +Pauses script execution. Playwright will stop executing the script and wait for the user to either press the 'Resume' button in the page overlay or to call `playwright.resume()` in the DevTools console. User can inspect selectors or perform manual steps while paused. Resume will continue running the original script from the place it was paused. diff --git a/java/versioned_docs/version-stable/api/class-pageassertions.mdx b/java/versioned_docs/version-stable/api/class-pageassertions.mdx index 887e0bd5fe4..432b87fd3e2 100644 --- a/java/versioned_docs/version-stable/api/class-pageassertions.mdx +++ b/java/versioned_docs/version-stable/api/class-pageassertions.mdx @@ -5,6 +5,7 @@ title: "PageAssertions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The [PageAssertions] class provides assertion methods that can be used to make assertions about the [Page] state in the tests. diff --git a/java/versioned_docs/version-stable/api/class-playwright.mdx b/java/versioned_docs/version-stable/api/class-playwright.mdx index 53b175db645..6314262a700 100644 --- a/java/versioned_docs/version-stable/api/class-playwright.mdx +++ b/java/versioned_docs/version-stable/api/class-playwright.mdx @@ -5,6 +5,7 @@ title: "Playwright" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Playwright module provides a method to launch a browser instance. The following is a typical example of using Playwright to drive automation: diff --git a/java/versioned_docs/version-stable/api/class-playwrightassertions.mdx b/java/versioned_docs/version-stable/api/class-playwrightassertions.mdx index 04d27460b3d..f8dff25a211 100644 --- a/java/versioned_docs/version-stable/api/class-playwrightassertions.mdx +++ b/java/versioned_docs/version-stable/api/class-playwrightassertions.mdx @@ -5,6 +5,7 @@ title: "PlaywrightAssertions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Playwright gives you Web-First Assertions with convenience methods for creating assertions that will wait and retry until the expected condition is met. diff --git a/java/versioned_docs/version-stable/api/class-playwrightexception.mdx b/java/versioned_docs/version-stable/api/class-playwrightexception.mdx index 37c0a20db5b..cfc359e06fe 100644 --- a/java/versioned_docs/version-stable/api/class-playwrightexception.mdx +++ b/java/versioned_docs/version-stable/api/class-playwrightexception.mdx @@ -5,6 +5,7 @@ title: "PlaywrightException" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; * extends: [RuntimeException] diff --git a/java/versioned_docs/version-stable/api/class-request.mdx b/java/versioned_docs/version-stable/api/class-request.mdx index 11d2f87c357..566962850e1 100644 --- a/java/versioned_docs/version-stable/api/class-request.mdx +++ b/java/versioned_docs/version-stable/api/class-request.mdx @@ -5,6 +5,7 @@ title: "Request" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Whenever the page sends a request for a network resource the following sequence of events are emitted by [Page]: diff --git a/java/versioned_docs/version-stable/api/class-requestoptions.mdx b/java/versioned_docs/version-stable/api/class-requestoptions.mdx index 59d44b4e624..c6f217f360f 100644 --- a/java/versioned_docs/version-stable/api/class-requestoptions.mdx +++ b/java/versioned_docs/version-stable/api/class-requestoptions.mdx @@ -5,6 +5,7 @@ title: "RequestOptions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The [RequestOptions] allows to create form data to be sent via [APIRequestContext]. Playwright will automatically determine content type of the request. diff --git a/java/versioned_docs/version-stable/api/class-response.mdx b/java/versioned_docs/version-stable/api/class-response.mdx index a20dc1b5573..641bc47c202 100644 --- a/java/versioned_docs/version-stable/api/class-response.mdx +++ b/java/versioned_docs/version-stable/api/class-response.mdx @@ -5,6 +5,7 @@ title: "Response" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [Response] class represents responses which are received by page. diff --git a/java/versioned_docs/version-stable/api/class-route.mdx b/java/versioned_docs/version-stable/api/class-route.mdx index a50646b90a0..5e71c317383 100644 --- a/java/versioned_docs/version-stable/api/class-route.mdx +++ b/java/versioned_docs/version-stable/api/class-route.mdx @@ -5,6 +5,7 @@ title: "Route" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Whenever a network route is set up with [Page.route()](/api/class-page.mdx#page-route) or [BrowserContext.route()](/api/class-browsercontext.mdx#browser-context-route), the `Route` object allows to handle the route. diff --git a/java/versioned_docs/version-stable/api/class-selectors.mdx b/java/versioned_docs/version-stable/api/class-selectors.mdx index 2d4b2c13a3c..388c57b4269 100644 --- a/java/versioned_docs/version-stable/api/class-selectors.mdx +++ b/java/versioned_docs/version-stable/api/class-selectors.mdx @@ -5,6 +5,7 @@ title: "Selectors" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Selectors can be used to install custom selector engines. See [extensibility](../extensibility.mdx) for more information. diff --git a/java/versioned_docs/version-stable/api/class-timeouterror.mdx b/java/versioned_docs/version-stable/api/class-timeouterror.mdx index cb9c7aabc13..b13455a563f 100644 --- a/java/versioned_docs/version-stable/api/class-timeouterror.mdx +++ b/java/versioned_docs/version-stable/api/class-timeouterror.mdx @@ -5,6 +5,7 @@ title: "TimeoutError" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; * extends: [PlaywrightException] diff --git a/java/versioned_docs/version-stable/api/class-touchscreen.mdx b/java/versioned_docs/version-stable/api/class-touchscreen.mdx index 6159d2422d1..540e9ec8032 100644 --- a/java/versioned_docs/version-stable/api/class-touchscreen.mdx +++ b/java/versioned_docs/version-stable/api/class-touchscreen.mdx @@ -5,6 +5,7 @@ title: "Touchscreen" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The Touchscreen class operates in main-frame CSS pixels relative to the top-left corner of the viewport. Methods on the touchscreen can only be used in browser contexts that have been initialized with `hasTouch` set to true. diff --git a/java/versioned_docs/version-stable/api/class-tracing.mdx b/java/versioned_docs/version-stable/api/class-tracing.mdx index 844c09f1ca9..94cabc29618 100644 --- a/java/versioned_docs/version-stable/api/class-tracing.mdx +++ b/java/versioned_docs/version-stable/api/class-tracing.mdx @@ -5,6 +5,7 @@ title: "Tracing" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; API for collecting and saving Playwright traces. Playwright traces can be opened in [Trace Viewer](../trace-viewer.mdx) after Playwright script runs. diff --git a/java/versioned_docs/version-stable/api/class-video.mdx b/java/versioned_docs/version-stable/api/class-video.mdx index e88f02a5b01..f0a2698150b 100644 --- a/java/versioned_docs/version-stable/api/class-video.mdx +++ b/java/versioned_docs/version-stable/api/class-video.mdx @@ -5,6 +5,7 @@ title: "Video" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; When browser context is created with the `recordVideo` option, each page has a video object associated with it. diff --git a/java/versioned_docs/version-stable/api/class-weberror.mdx b/java/versioned_docs/version-stable/api/class-weberror.mdx index 90796f6d65b..a557739f19f 100644 --- a/java/versioned_docs/version-stable/api/class-weberror.mdx +++ b/java/versioned_docs/version-stable/api/class-weberror.mdx @@ -5,6 +5,7 @@ title: "WebError" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [WebError] class represents an unhandled exception thrown in the page. It is dispatched via the [BrowserContext.onWebError(handler)](/api/class-browsercontext.mdx#browser-context-event-web-error) event. diff --git a/java/versioned_docs/version-stable/api/class-websocket.mdx b/java/versioned_docs/version-stable/api/class-websocket.mdx index d1e0e9e0944..d6fca617d1d 100644 --- a/java/versioned_docs/version-stable/api/class-websocket.mdx +++ b/java/versioned_docs/version-stable/api/class-websocket.mdx @@ -5,6 +5,7 @@ title: "WebSocket" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The [WebSocket] class represents WebSocket connections within a page. It provides the ability to inspect and manipulate the data being transmitted and received. diff --git a/java/versioned_docs/version-stable/api/class-websocketframe.mdx b/java/versioned_docs/version-stable/api/class-websocketframe.mdx index a9eb945cd98..3809999e590 100644 --- a/java/versioned_docs/version-stable/api/class-websocketframe.mdx +++ b/java/versioned_docs/version-stable/api/class-websocketframe.mdx @@ -5,6 +5,7 @@ title: "WebSocketFrame" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The [WebSocketFrame] class represents frames sent over [WebSocket] connections in the page. Frame payload is returned by either [WebSocketFrame.text()](/api/class-websocketframe.mdx#web-socket-frame-text) or [WebSocketFrame.binary()](/api/class-websocketframe.mdx#web-socket-frame-binary) method depending on the its type. diff --git a/java/versioned_docs/version-stable/api/class-websocketroute.mdx b/java/versioned_docs/version-stable/api/class-websocketroute.mdx index 204636c059d..307dd25ec96 100644 --- a/java/versioned_docs/version-stable/api/class-websocketroute.mdx +++ b/java/versioned_docs/version-stable/api/class-websocketroute.mdx @@ -5,6 +5,7 @@ title: "WebSocketRoute" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Whenever a [`WebSocket`](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) route is set up with [Page.routeWebSocket()](/api/class-page.mdx#page-route-web-socket) or [BrowserContext.routeWebSocket()](/api/class-browsercontext.mdx#browser-context-route-web-socket), the `WebSocketRoute` object allows to handle the WebSocket, like an actual server would do. diff --git a/java/versioned_docs/version-stable/api/class-worker.mdx b/java/versioned_docs/version-stable/api/class-worker.mdx index f387780e844..686fc6343aa 100644 --- a/java/versioned_docs/version-stable/api/class-worker.mdx +++ b/java/versioned_docs/version-stable/api/class-worker.mdx @@ -5,6 +5,7 @@ title: "Worker" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The Worker class represents a [WebWorker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API). `worker` event is emitted on the page object to signal a worker creation. `close` event is emitted on the worker object when the worker is gone. diff --git a/java/versioned_docs/version-stable/aria-snapshots.mdx b/java/versioned_docs/version-stable/aria-snapshots.mdx index df92b9876cb..00210824f22 100644 --- a/java/versioned_docs/version-stable/aria-snapshots.mdx +++ b/java/versioned_docs/version-stable/aria-snapshots.mdx @@ -5,6 +5,7 @@ title: "Snapshot testing" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; import LiteYouTube from '@site/src/components/LiteYouTube'; diff --git a/java/versioned_docs/version-stable/auth.mdx b/java/versioned_docs/version-stable/auth.mdx index 2a0d6f5f037..9030cc97c3d 100644 --- a/java/versioned_docs/version-stable/auth.mdx +++ b/java/versioned_docs/version-stable/auth.mdx @@ -5,6 +5,7 @@ title: "Authentication" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/browser-contexts.mdx b/java/versioned_docs/version-stable/browser-contexts.mdx index 2ad715392d4..530fd6d2bd5 100644 --- a/java/versioned_docs/version-stable/browser-contexts.mdx +++ b/java/versioned_docs/version-stable/browser-contexts.mdx @@ -5,6 +5,7 @@ title: "Isolation" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/browsers.mdx b/java/versioned_docs/version-stable/browsers.mdx index 1f4eb3952c8..7d53ba5e1d2 100644 --- a/java/versioned_docs/version-stable/browsers.mdx +++ b/java/versioned_docs/version-stable/browsers.mdx @@ -5,6 +5,7 @@ title: "Browsers" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -413,6 +414,42 @@ mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="in +## Using a pre-installed Node.js + + + + +```bash +PLAYWRIGHT_NODEJS_PATH="/usr/local/bin/node" mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="install" +``` + + + + +```powershell +$Env:PLAYWRIGHT_NODEJS_PATH="C:\Program Files\nodejs\node.exe" +mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="install" +``` + + + + +```batch +set PLAYWRIGHT_NODEJS_PATH=C:\Program Files\nodejs\node.exe +mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="install" +``` + + + + ## Managing browser binaries Playwright downloads Chromium, WebKit and Firefox browsers into the OS-specific cache folders: diff --git a/java/versioned_docs/version-stable/ci-intro.mdx b/java/versioned_docs/version-stable/ci-intro.mdx index 84423e6c59a..cfb2a0c6d60 100644 --- a/java/versioned_docs/version-stable/ci-intro.mdx +++ b/java/versioned_docs/version-stable/ci-intro.mdx @@ -5,10 +5,11 @@ title: "Setting up CI" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction -Playwright tests can be run on any CI provider. In this section we will cover running tests on GitHub using GitHub actions. If you would like to see how to configure other CI providers check out our detailed doc on Continuous Integration. +Playwright tests can be run on any CI provider. In this section we cover running tests on GitHub using GitHub Actions. If you would like to see how to configure other CI providers, check out our detailed doc on Continuous Integration. #### You will learn - [How to set up GitHub Actions](/ci-intro.mdx#setting-up-github-actions) @@ -17,7 +18,7 @@ Playwright tests can be run on any CI provider. In this section we will cover ru ## Setting up GitHub Actions -To add a [GitHub Actions](https://docs.github.com/en/actions) file first create `.github/workflows` folder and inside it add a `playwright.yml` file containing the example code below so that your tests will run on each push and pull request for the main/master branch. +To add a [GitHub Actions](https://docs.github.com/en/actions) file, first create `.github/workflows` folder and inside it add a `playwright.yml` file containing the example code below so that your tests run on each push and pull request for the main/master branch. ```yml title=".github/workflows/playwright.yml" name: Playwright Tests @@ -55,21 +56,21 @@ Looking at the list of steps in `jobs.test.steps`, you can see that the workflow ## Create a Repo and Push to GitHub -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. +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. ###### Create a Repo and Push to GitHub ## Opening the Workflows -Click on the **Actions** tab to see the workflows. Here you will see if your tests have passed or failed. +Click on the **Actions** tab to see the workflows. Here you see if your tests have passed or failed. ###### ![opening the workflow](https://user-images.githubusercontent.com/13063165/183423783-58bf2008-514e-4f96-9c12-c9a55703960c.png) ## Viewing Test Logs -Clicking on the workflow run will show you the all the actions that GitHub performed and clicking on **Run Playwright tests** will show the error messages, what was expected and what was received as well as the call log. +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 Test Logs](https://user-images.githubusercontent.com/13063165/183423783-58bf2008-514e-4f96-9c12-c9a55703960c.png) @@ -78,11 +79,11 @@ Clicking on the workflow run will show you the all the actions that GitHub perfo [trace.playwright.dev](https://trace.playwright.dev) is a statically hosted variant of the Trace Viewer. You can upload trace files using drag and drop. -![playwright trace viewer](https://github.com/microsoft/playwright/assets/13063165/6d5885dc-d511-4c20-b728-040a7ef6cea4) + ## Properly handling Secrets -Artifacts like trace files or console logs contain information about your test execution. They can contain sensitive data like user credentials for a test user, access tokens to a staging backend, testing source code or sometimes even your application source code. Treat these files just as careful as you treat that sensitive data. If you upload reports and traces as part of your CI workflow, make sure that you only upload them to trusted artifact stores, or that you encrypt the files before upload. The same is true for sharing artifacts with team members: Use a trusted file share or encrypt the files before sharing. +Artifacts like trace files or console logs contain information about your test execution. They can contain sensitive data like user credentials for a test user, access tokens to a staging backend, testing source code, or sometimes even your application source code. Treat these files just as carefully as you treat that sensitive data. If you upload reports and traces as part of your CI workflow, make sure that you only upload them to trusted artifact stores, or that you encrypt the files before upload. The same is true for sharing artifacts with team members: Use a trusted file share or encrypt the files before sharing. ## What's Next - [Learn how to use Locators](./locators.mdx) diff --git a/java/versioned_docs/version-stable/ci.mdx b/java/versioned_docs/version-stable/ci.mdx index 8e84328bb22..d02c986d4eb 100644 --- a/java/versioned_docs/version-stable/ci.mdx +++ b/java/versioned_docs/version-stable/ci.mdx @@ -5,6 +5,7 @@ title: "Continuous Integration" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -75,7 +76,7 @@ jobs: name: 'Playwright Tests' runs-on: ubuntu-latest container: - image: mcr.microsoft.com/playwright/java:v1.53.0-noble + image: mcr.microsoft.com/playwright/java:v1.54.0-noble options: --user 1001 steps: - uses: actions/checkout@v4 @@ -160,7 +161,7 @@ trigger: pool: vmImage: ubuntu-latest -container: mcr.microsoft.com/playwright/java:v1.53.0-noble +container: mcr.microsoft.com/playwright/java:v1.54.0-noble steps: - task: JavaToolInstaller@0 @@ -183,7 +184,7 @@ Running Playwright on CircleCI is very similar to running on GitHub Actions. In executors: pw-noble-development: docker: - - image: mcr.microsoft.com/playwright/java:v1.53.0-noble + - image: mcr.microsoft.com/playwright/java:v1.54.0-noble ``` Note: When using the docker agent definition, you are specifying the resource class of where playwright runs to the 'medium' tier [here](https://circleci.com/docs/configuration-reference?#docker-execution-environment). The default behavior of Playwright is to set the number of workers to the detected core count (2 in the case of the medium tier). Overriding the number of workers to greater than this number will cause unnecessary timeouts and failures. @@ -194,7 +195,7 @@ Jenkins supports Docker agents for pipelines. Use the [Playwright Docker image]( ```groovy pipeline { - agent { docker { image 'mcr.microsoft.com/playwright/java:v1.53.0-noble' } } + agent { docker { image 'mcr.microsoft.com/playwright/java:v1.54.0-noble' } } stages { stage('e2e-tests') { steps { @@ -211,7 +212,7 @@ pipeline { Bitbucket Pipelines can use public [Docker images as build environments](https://confluence.atlassian.com/bitbucket/use-docker-images-as-build-environments-792298897.html). To run Playwright tests on Bitbucket, use our public Docker image ([see Dockerfile](./docker.mdx)). ```yml -image: mcr.microsoft.com/playwright/java:v1.53.0-noble +image: mcr.microsoft.com/playwright/java:v1.54.0-noble ``` ### GitLab CI @@ -224,7 +225,7 @@ stages: tests: stage: test - image: mcr.microsoft.com/playwright/java:v1.53.0-noble + image: mcr.microsoft.com/playwright/java:v1.54.0-noble script: ... ``` diff --git a/java/versioned_docs/version-stable/clock.mdx b/java/versioned_docs/version-stable/clock.mdx index 64655dd6fb1..ea395dfa335 100644 --- a/java/versioned_docs/version-stable/clock.mdx +++ b/java/versioned_docs/version-stable/clock.mdx @@ -5,6 +5,7 @@ title: "Clock" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; import LiteYouTube from '@site/src/components/LiteYouTube'; diff --git a/java/versioned_docs/version-stable/codegen-intro.mdx b/java/versioned_docs/version-stable/codegen-intro.mdx index e36f0714e75..98ae1195323 100644 --- a/java/versioned_docs/version-stable/codegen-intro.mdx +++ b/java/versioned_docs/version-stable/codegen-intro.mdx @@ -5,10 +5,11 @@ title: "Generating tests" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction -Playwright comes with the ability to generate tests out of the box and is a great way to quickly get started with testing. It will open two windows, a browser window where you interact with the website you wish to test and the Playwright Inspector window where you can record your tests, copy the tests, clear your tests as well as change the language of your tests. +Playwright can generate tests automatically, providing a quick way to get started with testing. Codegen opens a browser window for interaction and the Playwright Inspector for recording, copying, and managing your generated tests. **You will learn** - [How to record a test](/codegen.mdx#recording-a-test) @@ -16,7 +17,7 @@ Playwright comes with the ability to generate tests out of the box and is a grea ## Running Codegen -Use the `codegen` command to run the test generator followed by the URL of the website you want to generate tests for. The URL is optional and you can always run the command without it and then add the URL directly into the browser window instead. +Use the `codegen` command to run the test generator followed by the URL of the website you want to generate tests for. The URL is optional and can be added directly in the browser window if omitted. ```bash mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen demo.playwright.dev/todomvc" @@ -24,40 +25,40 @@ mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="co ### Recording a test -Run `codegen` and perform actions in the browser. Playwright will generate the code for the user interactions. `Codegen` will look at the rendered page and figure out the recommended locator, prioritizing role, text and test id locators. If the generator identifies multiple elements matching the locator, it will improve the locator to make it resilient and uniquely identify the target element, therefore eliminating and reducing test(s) failing and flaking due to locators. +Run `codegen` and perform actions in the browser. Playwright generates code for your interactions automatically. Codegen analyzes the rendered page and recommends the best locator, prioritizing role, text, and test id locators. When multiple elements match a locator, the generator improves it to uniquely identify the target element, reducing test failures and flakiness. With the test generator you can record: -* Actions like click or fill by simply interacting with the page -* Assertions by clicking on one of the icons in the toolbar and then clicking on an element on the page to assert against. You can choose: +* Actions like click or fill by interacting with the page +* Assertions by clicking a toolbar icon, then clicking a page element to assert against. You can choose: * `'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 ###### -![recording a test](https://github.com/microsoft/playwright/assets/13063165/ec9c4071-4af8-4ae7-8b36-aebcc29bdbbb) + ###### -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. +When you finish interacting with the page, press the `'record'` button to stop recording and use the `'copy'` button to copy the generated code to your editor. -Use the `'clear'` button to clear the code to start recording again. Once finished close the Playwright inspector window or stop the terminal command. +Use the `'clear'` button to clear the code and start recording again. Once finished, close the Playwright Inspector window or stop the terminal command. -To learn more about generating tests check out or detailed guide on [Codegen](./codegen.mdx). +To learn more about generating tests, check out our detailed guide on [Codegen](./codegen.mdx). ### Generating locators You can generate [locators](/locators.mdx) with the test generator. -* Press the `'Record'` button to stop the recording and the `'Pick Locator'` button will appear. -* Click on the `'Pick Locator'` button and then hover over elements in the browser window to see the locator highlighted underneath each element. -* To choose a locator click on the element you would like to locate and the code for that locator will appear in the locator playground next to the Pick Locator button. -* You can then edit the locator in the locator playground to fine tune it and see the matching element highlighted in the browser window. -* Use the copy button to copy the locator and paste it into your code. +* Press the `'Record'` button to stop recording and the `'Pick Locator'` button will appear +* Click the `'Pick Locator'` button and hover over elements in the browser window to see the locator highlighted underneath each element +* Click the element you want to locate and the code for that locator will appear in the locator playground next to the Pick Locator button +* Edit the locator in the locator playground to fine-tune it and see the matching element highlighted in the browser window +* Use the copy button to copy the locator and paste it into your code ###### -![picking a locator](https://github.com/microsoft/playwright/assets/13063165/733b48fd-5edf-4150-93f0-018adc52b6ff) + ### Emulation -You can also generate tests using emulation so as to generate a test for a specific viewport, device, color scheme, as well as emulate the geolocation, language or timezone. The test generator can also generate a test while preserving authenticated state. Check out the [Test Generator](./codegen.mdx#emulation) guide to learn more. +You can generate tests using emulation for specific viewports, devices, color schemes, geolocation, language, or timezone. The test generator can also preserve authenticated state. Check out the [Test Generator](./codegen.mdx#emulation) guide to learn more. ## What's Next - [See a trace of your tests](./trace-viewer-intro.mdx) diff --git a/java/versioned_docs/version-stable/codegen.mdx b/java/versioned_docs/version-stable/codegen.mdx index 1d5ec814d2c..fa31003521d 100644 --- a/java/versioned_docs/version-stable/codegen.mdx +++ b/java/versioned_docs/version-stable/codegen.mdx @@ -5,6 +5,7 @@ title: "Test generator" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; import LiteYouTube from '@site/src/components/LiteYouTube'; diff --git a/java/versioned_docs/version-stable/debug.mdx b/java/versioned_docs/version-stable/debug.mdx index d72575da6ba..10c4464c471 100644 --- a/java/versioned_docs/version-stable/debug.mdx +++ b/java/versioned_docs/version-stable/debug.mdx @@ -5,6 +5,7 @@ title: "Debugging Tests" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Playwright Inspector diff --git a/java/versioned_docs/version-stable/dialogs.mdx b/java/versioned_docs/version-stable/dialogs.mdx index 9f984d4bfd5..04802aaeb66 100644 --- a/java/versioned_docs/version-stable/dialogs.mdx +++ b/java/versioned_docs/version-stable/dialogs.mdx @@ -5,6 +5,7 @@ title: "Dialogs" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/docker.mdx b/java/versioned_docs/version-stable/docker.mdx index 7866a099eee..304fa203b40 100644 --- a/java/versioned_docs/version-stable/docker.mdx +++ b/java/versioned_docs/version-stable/docker.mdx @@ -5,6 +5,7 @@ title: "Docker" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -22,7 +23,7 @@ This Docker image is intended to be used for testing and development purposes on ### Pull the image ```bash -docker pull mcr.microsoft.com/playwright/java:v1.53.0-noble +docker pull mcr.microsoft.com/playwright/java:v1.54.0-noble ``` ### Run the image @@ -34,7 +35,7 @@ By default, the Docker image will use the `root` user to run the browsers. This On trusted websites, you can avoid creating a separate user and use root for it since you trust the code which will run on the browsers. ```bash -docker run -it --rm --ipc=host mcr.microsoft.com/playwright/java:v1.53.0-noble /bin/bash +docker run -it --rm --ipc=host mcr.microsoft.com/playwright/java:v1.54.0-noble /bin/bash ``` #### Crawling and scraping @@ -42,7 +43,7 @@ docker run -it --rm --ipc=host mcr.microsoft.com/playwright/java:v1.53.0-noble / On untrusted websites, it's recommended to use a separate user for launching the browsers in combination with the seccomp profile. Inside the container or if you are using the Docker image as a base image you have to use `adduser` for it. ```bash -docker run -it --rm --ipc=host --user pwuser --security-opt seccomp=seccomp_profile.json mcr.microsoft.com/playwright/java:v1.53.0-noble /bin/bash +docker run -it --rm --ipc=host --user pwuser --security-opt seccomp=seccomp_profile.json mcr.microsoft.com/playwright/java:v1.54.0-noble /bin/bash ``` [`seccomp_profile.json`](https://github.com/microsoft/playwright/blob/main/utils/docker/seccomp_profile.json) is needed to run Chromium with sandbox. This is a [default Docker seccomp profile](https://github.com/docker/engine/blob/d0d99b04cf6e00ed3fc27e81fc3d94e7eda70af3/profiles/seccomp/default.json) with extra user namespace cloning permissions: @@ -82,7 +83,7 @@ You can run Playwright Server in Docker while keeping your tests running on the Start the Playwright Server in Docker: ```bash -docker run -p 3000:3000 --rm --init -it --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.53.0-noble /bin/sh -c "npx -y playwright@1.53.0 run-server --port 3000 --host 0.0.0.0" +docker run -p 3000:3000 --rm --init -it --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.54.0-noble /bin/sh -c "npx -y playwright@1.54.0 run-server --port 3000 --host 0.0.0.0" ``` #### Connecting to the Server @@ -107,7 +108,7 @@ public class App { If you need to access local servers from within the Docker container: ```bash -docker run --add-host=hostmachine:host-gateway -p 3000:3000 --rm --init -it --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.53.0-noble /bin/sh -c "npx -y playwright@1.53.0 run-server --port 3000 --host 0.0.0.0" +docker run --add-host=hostmachine:host-gateway -p 3000:3000 --rm --init -it --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.54.0-noble /bin/sh -c "npx -y playwright@1.54.0 run-server --port 3000 --host 0.0.0.0" ``` This makes `hostmachine` point to the host's localhost. Your tests should use `hostmachine` instead of `localhost` when accessing local servers. @@ -122,9 +123,9 @@ When running tests remotely, ensure the Playwright version in your tests matches See [all available image tags]. We currently publish images with the following tags: -- `:v1.53.0` - Playwright v1.53.0 release docker image based on Ubuntu 24.04 LTS (Noble Numbat). -- `:v1.53.0-noble` - Playwright v1.53.0 release docker image based on Ubuntu 24.04 LTS (Noble Numbat). -- `:v1.53.0-jammy` - Playwright v1.53.0 release docker image based on Ubuntu 22.04 LTS (Jammy Jellyfish). +- `:v1.54.0` - Playwright v1.54.0 release docker image based on Ubuntu 24.04 LTS (Noble Numbat). +- `:v1.54.0-noble` - Playwright v1.54.0 release docker image based on Ubuntu 24.04 LTS (Noble Numbat). +- `:v1.54.0-jammy` - Playwright v1.54.0 release docker image based on Ubuntu 22.04 LTS (Jammy Jellyfish). :::note diff --git a/java/versioned_docs/version-stable/downloads.mdx b/java/versioned_docs/version-stable/downloads.mdx index ef37e8effa6..e979439aed6 100644 --- a/java/versioned_docs/version-stable/downloads.mdx +++ b/java/versioned_docs/version-stable/downloads.mdx @@ -5,6 +5,7 @@ title: "Downloads" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/emulation.mdx b/java/versioned_docs/version-stable/emulation.mdx index e9ab0fed3f8..051d97c4056 100644 --- a/java/versioned_docs/version-stable/emulation.mdx +++ b/java/versioned_docs/version-stable/emulation.mdx @@ -5,6 +5,7 @@ title: "Emulation" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/evaluating.mdx b/java/versioned_docs/version-stable/evaluating.mdx index c584364e5df..80bddf49440 100644 --- a/java/versioned_docs/version-stable/evaluating.mdx +++ b/java/versioned_docs/version-stable/evaluating.mdx @@ -5,6 +5,7 @@ title: "Evaluating JavaScript" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/events.mdx b/java/versioned_docs/version-stable/events.mdx index 8c3a6624ae8..346882f0634 100644 --- a/java/versioned_docs/version-stable/events.mdx +++ b/java/versioned_docs/version-stable/events.mdx @@ -5,6 +5,7 @@ title: "Events" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/extensibility.mdx b/java/versioned_docs/version-stable/extensibility.mdx index 2e2e4efe5f3..32027c6ee91 100644 --- a/java/versioned_docs/version-stable/extensibility.mdx +++ b/java/versioned_docs/version-stable/extensibility.mdx @@ -5,6 +5,7 @@ title: "Extensibility" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Custom selector engines diff --git a/java/versioned_docs/version-stable/frames.mdx b/java/versioned_docs/version-stable/frames.mdx index 0e01dba06f1..1b149ea7eaa 100644 --- a/java/versioned_docs/version-stable/frames.mdx +++ b/java/versioned_docs/version-stable/frames.mdx @@ -5,6 +5,7 @@ title: "Frames" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/handles.mdx b/java/versioned_docs/version-stable/handles.mdx index d8e8c3824dc..01bc3054d39 100644 --- a/java/versioned_docs/version-stable/handles.mdx +++ b/java/versioned_docs/version-stable/handles.mdx @@ -5,6 +5,7 @@ title: "Handles" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/input.mdx b/java/versioned_docs/version-stable/input.mdx index 1527d1df3db..1031a3a0c8b 100644 --- a/java/versioned_docs/version-stable/input.mdx +++ b/java/versioned_docs/version-stable/input.mdx @@ -5,6 +5,7 @@ title: "Actions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/intro.mdx b/java/versioned_docs/version-stable/intro.mdx index a54a65d7d9d..906a2bc338c 100644 --- a/java/versioned_docs/version-stable/intro.mdx +++ b/java/versioned_docs/version-stable/intro.mdx @@ -5,6 +5,7 @@ title: "Installation" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -58,7 +59,7 @@ public class App { com.microsoft.playwright playwright - 1.53.0 + 1.54.0 @@ -130,7 +131,7 @@ By default browsers launched with Playwright run headless, meaning no browser UI - Java 8 or higher. - Windows 10+, Windows Server 2016+ or Windows Subsystem for Linux (WSL). - macOS 14 Ventura, or later. -- Debian 12, Ubuntu 22.04, Ubuntu 24.04, on x86-64 and arm64 architecture. +- Debian 12, Debian 13, Ubuntu 22.04, Ubuntu 24.04, on x86-64 and arm64 architecture. ## What's next - [Write tests using web first assertions, page fixtures and locators](./writing-tests.mdx) diff --git a/java/versioned_docs/version-stable/junit.mdx b/java/versioned_docs/version-stable/junit.mdx index 8cd9ee7b427..ce9c2169a2d 100644 --- a/java/versioned_docs/version-stable/junit.mdx +++ b/java/versioned_docs/version-stable/junit.mdx @@ -5,6 +5,7 @@ title: "JUnit (experimental)" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/languages.mdx b/java/versioned_docs/version-stable/languages.mdx index a2504016d9e..5e4c8e296e3 100644 --- a/java/versioned_docs/version-stable/languages.mdx +++ b/java/versioned_docs/version-stable/languages.mdx @@ -5,6 +5,7 @@ title: "Supported languages" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -30,7 +31,7 @@ You can choose any testing framework such as JUnit or TestNG based on your proje ## .NET -Playwright for .NET comes with MSTest, NUnit, and xUnit [base classes](https://playwright.dev/dotnet/docs/test-runners) for writing end-to-end tests. +Playwright for .NET comes with MSTest, NUnit, xUnit, and xUnit v3 [base classes](https://playwright.dev/dotnet/docs/test-runners) for writing end-to-end tests. * [Documentation](https://playwright.dev/dotnet/docs/intro) * [GitHub repo](https://github.com/microsoft/playwright-dotnet) diff --git a/java/versioned_docs/version-stable/locators.mdx b/java/versioned_docs/version-stable/locators.mdx index cbb508e2a73..c87e0f34454 100644 --- a/java/versioned_docs/version-stable/locators.mdx +++ b/java/versioned_docs/version-stable/locators.mdx @@ -5,6 +5,7 @@ title: "Locators" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/mock.mdx b/java/versioned_docs/version-stable/mock.mdx index 3764e69431b..66a23c670ba 100644 --- a/java/versioned_docs/version-stable/mock.mdx +++ b/java/versioned_docs/version-stable/mock.mdx @@ -5,6 +5,7 @@ title: "Mock APIs" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -80,6 +81,9 @@ To record a HAR file we use [Page.routeFromHAR()](/api/class-page.mdx#page-route 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. +#### +Alternatively, you can also record HAR files by using the [setRecordHarPath](/api/class-browser.mdx#browser-new-context-option-record-har-path) option in [Browser.newContext()](/api/class-browser.mdx#browser-new-context) when creating a browser context. This allows you to capture all network traffic for the entire context until the context is closed. + ```java // Get the response from the HAR file page.routeFromHAR(Path.of("./hars/fruit.har"), new RouteFromHAROptions() diff --git a/java/versioned_docs/version-stable/navigations.mdx b/java/versioned_docs/version-stable/navigations.mdx index 5d29509f164..59e2d1e596b 100644 --- a/java/versioned_docs/version-stable/navigations.mdx +++ b/java/versioned_docs/version-stable/navigations.mdx @@ -5,6 +5,7 @@ title: "Navigations" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/network.mdx b/java/versioned_docs/version-stable/network.mdx index 97c34f97b68..04045944563 100644 --- a/java/versioned_docs/version-stable/network.mdx +++ b/java/versioned_docs/version-stable/network.mdx @@ -5,6 +5,7 @@ title: "Network" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/other-locators.mdx b/java/versioned_docs/version-stable/other-locators.mdx index 66b256c5cd5..ad2a279040f 100644 --- a/java/versioned_docs/version-stable/other-locators.mdx +++ b/java/versioned_docs/version-stable/other-locators.mdx @@ -5,6 +5,7 @@ title: "Other locators" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/pages.mdx b/java/versioned_docs/version-stable/pages.mdx index 62e190dc35a..783fba26a51 100644 --- a/java/versioned_docs/version-stable/pages.mdx +++ b/java/versioned_docs/version-stable/pages.mdx @@ -5,6 +5,7 @@ title: "Pages" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Pages diff --git a/java/versioned_docs/version-stable/pom.mdx b/java/versioned_docs/version-stable/pom.mdx index 25a69f6b6b8..cdd27fb94ad 100644 --- a/java/versioned_docs/version-stable/pom.mdx +++ b/java/versioned_docs/version-stable/pom.mdx @@ -5,6 +5,7 @@ title: "Page object models" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/release-notes.mdx b/java/versioned_docs/version-stable/release-notes.mdx index e60edacfdae..a43e1395ae6 100644 --- a/java/versioned_docs/version-stable/release-notes.mdx +++ b/java/versioned_docs/version-stable/release-notes.mdx @@ -6,8 +6,31 @@ toc_max_heading_level: 2 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; + +## Version 1.55 + +### Codegen +- Automatic `toBeVisible()` assertions: Codegen can now generate automatic `toBeVisible()` assertions for common UI interactions. This feature can be enabled in the Codegen settings UI. + +### Breaking Changes +- ⚠️ Dropped support for Chromium extension manifest v2. + +### Miscellaneous +- Added support for Debian 13 "Trixie". + +### Browser Versions +- Chromium 140.0.7339.16 +- Mozilla Firefox 141.0 +- WebKit 26.0 + +This version was also tested against the following stable channels: +- Google Chrome 139 +- Microsoft Edge 139 ## Version 1.54 + +### Highlights - New cookie property `partitionKey` in [BrowserContext.cookies()](/api/class-browsercontext.mdx#browser-context-cookies) and [BrowserContext.addCookies()](/api/class-browsercontext.mdx#browser-context-add-cookies). This property allows to save and restore partitioned cookies. See [CHIPS MDN article](https://developer.mozilla.org/en-US/docs/Web/Privacy/Guides/Privacy_sandbox/Partitioned_cookies) for more information. Note that browsers have different support and defaults for cookie partitioning. - New option `--user-data-dir` in multiple commands. You can specify the same user data dir to reuse browsing state, like authentication, between sessions. @@ -15,7 +38,7 @@ import HTMLCard from '@site/src/components/HTMLCard'; mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen --user-data-dir=./user-data" ``` -- `open` command does not open the test recorder anymore. Use `codegen` instead. +- `mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args=open` command does not open the test recorder anymore. Use `mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args=codegen` instead. ### Browser Versions - Chromium 139.0.7258.5 @@ -28,7 +51,7 @@ This version was also tested against the following stable channels: ## Version 1.53 -### Miscellaneous +### 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 method [Locator.describe()](/api/class-locator.mdx#locator-describe) to describe a locator. Used for trace viewer. @@ -72,7 +95,6 @@ This version was also tested against the following stable channels: ### Miscellaneous - New option [setMaxRedirects](/api/class-apirequest.mdx#api-request-new-context-option-max-redirects) in [APIRequest.newContext()](/api/class-apirequest.mdx#api-request-new-context) to control the maximum number of redirects. -- New option `ref` in [Locator.ariaSnapshot()](/api/class-locator.mdx#locator-aria-snapshot) to generate reference for each element in the snapshot which can later be used to locate the element. ### Breaking Changes - Glob URL patterns in methods like [Page.route()](/api/class-page.mdx#page-route) do not support `?` and `[]` anymore. We recommend using regular expressions instead. diff --git a/java/versioned_docs/version-stable/running-tests.mdx b/java/versioned_docs/version-stable/running-tests.mdx index 51e9aa9e33a..37009908dbc 100644 --- a/java/versioned_docs/version-stable/running-tests.mdx +++ b/java/versioned_docs/version-stable/running-tests.mdx @@ -5,6 +5,7 @@ title: "Running and debugging tests" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/screenshots.mdx b/java/versioned_docs/version-stable/screenshots.mdx index 90dbb322a90..217bdeac753 100644 --- a/java/versioned_docs/version-stable/screenshots.mdx +++ b/java/versioned_docs/version-stable/screenshots.mdx @@ -5,6 +5,7 @@ title: "Screenshots" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/selenium-grid.mdx b/java/versioned_docs/version-stable/selenium-grid.mdx index 87a1a1d154e..3459ddced8d 100644 --- a/java/versioned_docs/version-stable/selenium-grid.mdx +++ b/java/versioned_docs/version-stable/selenium-grid.mdx @@ -5,6 +5,7 @@ title: "Selenium Grid (experimental)" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/test-assertions.mdx b/java/versioned_docs/version-stable/test-assertions.mdx index 88dc40b867c..1181de61855 100644 --- a/java/versioned_docs/version-stable/test-assertions.mdx +++ b/java/versioned_docs/version-stable/test-assertions.mdx @@ -5,6 +5,7 @@ title: "Assertions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## List of assertions diff --git a/java/versioned_docs/version-stable/test-runners.mdx b/java/versioned_docs/version-stable/test-runners.mdx index 84ed12671c9..22c0962ccb5 100644 --- a/java/versioned_docs/version-stable/test-runners.mdx +++ b/java/versioned_docs/version-stable/test-runners.mdx @@ -5,6 +5,7 @@ title: "Test Runners" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -198,7 +199,7 @@ repositories { } dependencies { - implementation 'com.microsoft.playwright:playwright:1.53.0' + implementation 'com.microsoft.playwright:playwright:1.54.0' } application { @@ -231,7 +232,7 @@ repositories { } dependencies { - implementation("com.microsoft.playwright:playwright:1.53.0") + implementation("com.microsoft.playwright:playwright:1.54.0") } application { diff --git a/java/versioned_docs/version-stable/threading.mdx b/java/versioned_docs/version-stable/threading.mdx index e97e36a486b..a3f1fb66bff 100644 --- a/java/versioned_docs/version-stable/threading.mdx +++ b/java/versioned_docs/version-stable/threading.mdx @@ -5,6 +5,7 @@ title: "Multithreading" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/touch-events.mdx b/java/versioned_docs/version-stable/touch-events.mdx index 1041b23f9af..916a44345ad 100644 --- a/java/versioned_docs/version-stable/touch-events.mdx +++ b/java/versioned_docs/version-stable/touch-events.mdx @@ -5,6 +5,7 @@ title: "Touch events (legacy)" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/trace-viewer-intro.mdx b/java/versioned_docs/version-stable/trace-viewer-intro.mdx index 1110c26c0a2..59b4fb4858c 100644 --- a/java/versioned_docs/version-stable/trace-viewer-intro.mdx +++ b/java/versioned_docs/version-stable/trace-viewer-intro.mdx @@ -5,6 +5,7 @@ title: "Trace viewer" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/trace-viewer.mdx b/java/versioned_docs/version-stable/trace-viewer.mdx index b446e1d01a6..00f1bfd516d 100644 --- a/java/versioned_docs/version-stable/trace-viewer.mdx +++ b/java/versioned_docs/version-stable/trace-viewer.mdx @@ -5,6 +5,7 @@ title: "Trace viewer" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; import LiteYouTube from '@site/src/components/LiteYouTube'; diff --git a/java/versioned_docs/version-stable/videos.mdx b/java/versioned_docs/version-stable/videos.mdx index 53b66491503..d0fa0cb5785 100644 --- a/java/versioned_docs/version-stable/videos.mdx +++ b/java/versioned_docs/version-stable/videos.mdx @@ -5,6 +5,7 @@ title: "Videos" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/webview2.mdx b/java/versioned_docs/version-stable/webview2.mdx index 394d4f055ff..cc0e73b3886 100644 --- a/java/versioned_docs/version-stable/webview2.mdx +++ b/java/versioned_docs/version-stable/webview2.mdx @@ -5,6 +5,7 @@ title: "WebView2" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/java/versioned_docs/version-stable/writing-tests.mdx b/java/versioned_docs/version-stable/writing-tests.mdx index 95018cbf098..2357972c783 100644 --- a/java/versioned_docs/version-stable/writing-tests.mdx +++ b/java/versioned_docs/version-stable/writing-tests.mdx @@ -5,6 +5,7 @@ title: "Writing tests" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/accessibility-testing.mdx b/nodejs/versioned_docs/version-stable/accessibility-testing.mdx index 1001896d000..9afe292783f 100644 --- a/nodejs/versioned_docs/version-stable/accessibility-testing.mdx +++ b/nodejs/versioned_docs/version-stable/accessibility-testing.mdx @@ -5,6 +5,7 @@ title: "Accessibility testing" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/actionability.mdx b/nodejs/versioned_docs/version-stable/actionability.mdx index c1a305d5eb9..6e62170e8ba 100644 --- a/nodejs/versioned_docs/version-stable/actionability.mdx +++ b/nodejs/versioned_docs/version-stable/actionability.mdx @@ -5,6 +5,7 @@ title: "Auto-waiting" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/api-testing.mdx b/nodejs/versioned_docs/version-stable/api-testing.mdx index 45f4e7a5af0..c078709d65c 100644 --- a/nodejs/versioned_docs/version-stable/api-testing.mdx +++ b/nodejs/versioned_docs/version-stable/api-testing.mdx @@ -5,6 +5,7 @@ title: "API testing" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/api/class-accessibility.mdx b/nodejs/versioned_docs/version-stable/api/class-accessibility.mdx index 14ce9846c70..94544635c8d 100644 --- a/nodejs/versioned_docs/version-stable/api/class-accessibility.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-accessibility.mdx @@ -5,6 +5,7 @@ title: "Accessibility" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; :::warning[Deprecated] diff --git a/nodejs/versioned_docs/version-stable/api/class-android.mdx b/nodejs/versioned_docs/version-stable/api/class-android.mdx index 180b780be04..5dca12a85c0 100644 --- a/nodejs/versioned_docs/version-stable/api/class-android.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-android.mdx @@ -5,6 +5,7 @@ title: "Android" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Playwright has **experimental** support for Android automation. This includes Chrome for Android and Android WebView. diff --git a/nodejs/versioned_docs/version-stable/api/class-androiddevice.mdx b/nodejs/versioned_docs/version-stable/api/class-androiddevice.mdx index 5e628dfc641..5d6a367876a 100644 --- a/nodejs/versioned_docs/version-stable/api/class-androiddevice.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-androiddevice.mdx @@ -5,6 +5,7 @@ title: "AndroidDevice" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [AndroidDevice] represents a connected device, either real hardware or emulated. Devices can be obtained using [android.devices()](/api/class-android.mdx#android-devices). diff --git a/nodejs/versioned_docs/version-stable/api/class-androidinput.mdx b/nodejs/versioned_docs/version-stable/api/class-androidinput.mdx index 30ab549be38..3f1d1e8f41d 100644 --- a/nodejs/versioned_docs/version-stable/api/class-androidinput.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-androidinput.mdx @@ -5,6 +5,7 @@ title: "AndroidInput" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; diff --git a/nodejs/versioned_docs/version-stable/api/class-androidsocket.mdx b/nodejs/versioned_docs/version-stable/api/class-androidsocket.mdx index 2aceae3d950..8f3200cbfa4 100644 --- a/nodejs/versioned_docs/version-stable/api/class-androidsocket.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-androidsocket.mdx @@ -5,6 +5,7 @@ title: "AndroidSocket" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [AndroidSocket] is a way to communicate with a process launched on the [AndroidDevice]. Use [androidDevice.open()](/api/class-androiddevice.mdx#android-device-open) to open a socket. diff --git a/nodejs/versioned_docs/version-stable/api/class-androidwebview.mdx b/nodejs/versioned_docs/version-stable/api/class-androidwebview.mdx index 83b8198e26e..a788446c9d0 100644 --- a/nodejs/versioned_docs/version-stable/api/class-androidwebview.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-androidwebview.mdx @@ -5,6 +5,7 @@ title: "AndroidWebView" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [AndroidWebView] represents a WebView open on the [AndroidDevice]. WebView is usually obtained using [androidDevice.webView()](/api/class-androiddevice.mdx#android-device-web-view). diff --git a/nodejs/versioned_docs/version-stable/api/class-apirequest.mdx b/nodejs/versioned_docs/version-stable/api/class-apirequest.mdx index 095c210a89b..fe1706bc2f6 100644 --- a/nodejs/versioned_docs/version-stable/api/class-apirequest.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-apirequest.mdx @@ -5,6 +5,7 @@ title: "APIRequest" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Exposes API that can be used for the Web API testing. This class is used for creating [APIRequestContext] instance which in turn can be used for sending web requests. An instance of this class can be obtained via [playwright.request](/api/class-playwright.mdx#playwright-request). For more information see [APIRequestContext]. @@ -67,6 +68,8 @@ await apiRequest.newContext(options); An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`, a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally, `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided with an exact match to the request origin that the certificate is valid for. + Client certificate authentication is only active when at least one client certificate is provided. If you want to reject all client certificates sent by the server, you need to provide a client certificate with an `origin` that does not match any of the domains you plan to visit. + :::note When using WebKit on macOS, accessing `localhost` will not pick up client certificates. You can make it work by replacing `localhost` with `local.playwright`. diff --git a/nodejs/versioned_docs/version-stable/api/class-apirequestcontext.mdx b/nodejs/versioned_docs/version-stable/api/class-apirequestcontext.mdx index becb68c8048..1e81638d528 100644 --- a/nodejs/versioned_docs/version-stable/api/class-apirequestcontext.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-apirequestcontext.mdx @@ -5,6 +5,7 @@ title: "APIRequestContext" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; This API is used for the Web API testing. You can use it to trigger API endpoints, configure micro-services, prepare environment or the service to your e2e test. diff --git a/nodejs/versioned_docs/version-stable/api/class-apiresponse.mdx b/nodejs/versioned_docs/version-stable/api/class-apiresponse.mdx index c9e92db9165..0e792609d0c 100644 --- a/nodejs/versioned_docs/version-stable/api/class-apiresponse.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-apiresponse.mdx @@ -5,6 +5,7 @@ title: "APIResponse" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [APIResponse] class represents responses returned by [apiRequestContext.get()](/api/class-apirequestcontext.mdx#api-request-context-get) and similar methods. diff --git a/nodejs/versioned_docs/version-stable/api/class-apiresponseassertions.mdx b/nodejs/versioned_docs/version-stable/api/class-apiresponseassertions.mdx index 1c91dbdf8ab..10f8db11089 100644 --- a/nodejs/versioned_docs/version-stable/api/class-apiresponseassertions.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-apiresponseassertions.mdx @@ -5,6 +5,7 @@ title: "APIResponseAssertions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The [APIResponseAssertions] class provides assertion methods that can be used to make assertions about the [APIResponse] in the tests. diff --git a/nodejs/versioned_docs/version-stable/api/class-browser.mdx b/nodejs/versioned_docs/version-stable/api/class-browser.mdx index d75231b2d57..b0c1d421b0d 100644 --- a/nodejs/versioned_docs/version-stable/api/class-browser.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-browser.mdx @@ -5,6 +5,7 @@ title: "Browser" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; A Browser is created via [browserType.launch()](/api/class-browsertype.mdx#browser-type-launch). An example of using a [Browser] to create a [Page]: @@ -209,6 +210,8 @@ If directly using this method to create [BrowserContext]s, it is best practice t An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`, a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally, `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided with an exact match to the request origin that the certificate is valid for. + Client certificate authentication is only active when at least one client certificate is provided. If you want to reject all client certificates sent by the server, you need to provide a client certificate with an `origin` that does not match any of the domains you plan to visit. + :::note When using WebKit on macOS, accessing `localhost` will not pick up client certificates. You can make it work by replacing `localhost` with `local.playwright`. @@ -501,6 +504,8 @@ await browser.newPage(options); An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`, a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally, `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided with an exact match to the request origin that the certificate is valid for. + Client certificate authentication is only active when at least one client certificate is provided. If you want to reject all client certificates sent by the server, you need to provide a client certificate with an `origin` that does not match any of the domains you plan to visit. + :::note When using WebKit on macOS, accessing `localhost` will not pick up client certificates. You can make it work by replacing `localhost` with `local.playwright`. diff --git a/nodejs/versioned_docs/version-stable/api/class-browsercontext.mdx b/nodejs/versioned_docs/version-stable/api/class-browsercontext.mdx index 510e28809c3..9e0ef6e2fe9 100644 --- a/nodejs/versioned_docs/version-stable/api/class-browsercontext.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-browsercontext.mdx @@ -5,6 +5,7 @@ title: "BrowserContext" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; BrowserContexts provide a way to operate multiple independent browser sessions. diff --git a/nodejs/versioned_docs/version-stable/api/class-browserserver.mdx b/nodejs/versioned_docs/version-stable/api/class-browserserver.mdx index 2dfdc6c3aac..0888cce7a07 100644 --- a/nodejs/versioned_docs/version-stable/api/class-browserserver.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-browserserver.mdx @@ -5,6 +5,7 @@ title: "BrowserServer" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; diff --git a/nodejs/versioned_docs/version-stable/api/class-browsertype.mdx b/nodejs/versioned_docs/version-stable/api/class-browsertype.mdx index 50c2136ea56..b0fbce2d4df 100644 --- a/nodejs/versioned_docs/version-stable/api/class-browsertype.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-browsertype.mdx @@ -5,6 +5,7 @@ title: "BrowserType" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; BrowserType provides methods to launch a specific browser instance or connect to an existing one. The following is a typical example of using Playwright to drive automation: @@ -301,6 +302,12 @@ await browserType.launchPersistentContext(userDataDir, options); More details for [Chromium](https://chromium.googlesource.com/chromium/src/+/master/docs/user_data_dir.md#introduction) and [Firefox](https://wiki.mozilla.org/Firefox/CommandLineOptions#User_profile). Chromium's user data directory is the **parent** directory of the "Profile Path" seen at `chrome://version`. Note that browsers do not allow launching multiple instances with the same User Data Directory. + + :::warning + + Chromium/Chrome: Due to recent Chrome policy changes, automating the default Chrome user profile is not supported. Pointing `userDataDir` to Chrome's main "User Data" directory (the profile used for your regular browsing) may result in pages not loading or the browser exiting. Create and use a separate directory (for example, an empty folder) as your automation profile instead. See https://developer.chrome.com/blog/remote-debugging-port for details. + ::: + - `options` [Object] *(optional)* - `acceptDownloads` [boolean] *(optional)*# @@ -364,6 +371,8 @@ await browserType.launchPersistentContext(userDataDir, options); An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`, a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally, `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided with an exact match to the request origin that the certificate is valid for. + Client certificate authentication is only active when at least one client certificate is provided. If you want to reject all client certificates sent by the server, you need to provide a client certificate with an `origin` that does not match any of the domains you plan to visit. + :::note When using WebKit on macOS, accessing `localhost` will not pick up client certificates. You can make it work by replacing `localhost` with `local.playwright`. diff --git a/nodejs/versioned_docs/version-stable/api/class-cdpsession.mdx b/nodejs/versioned_docs/version-stable/api/class-cdpsession.mdx index 8d321cacdf0..78ac899f25f 100644 --- a/nodejs/versioned_docs/version-stable/api/class-cdpsession.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-cdpsession.mdx @@ -5,6 +5,7 @@ title: "CDPSession" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The `CDPSession` instances are used to talk raw Chrome Devtools Protocol: diff --git a/nodejs/versioned_docs/version-stable/api/class-clock.mdx b/nodejs/versioned_docs/version-stable/api/class-clock.mdx index 20fdb94a376..74ae60ab1c0 100644 --- a/nodejs/versioned_docs/version-stable/api/class-clock.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-clock.mdx @@ -5,6 +5,7 @@ title: "Clock" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Accurately simulating time-dependent behavior is essential for verifying the correctness of applications. Learn more about [clock emulation](../clock.mdx). diff --git a/nodejs/versioned_docs/version-stable/api/class-consolemessage.mdx b/nodejs/versioned_docs/version-stable/api/class-consolemessage.mdx index 2b92dadfdae..837d5730c2a 100644 --- a/nodejs/versioned_docs/version-stable/api/class-consolemessage.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-consolemessage.mdx @@ -5,6 +5,7 @@ title: "ConsoleMessage" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [ConsoleMessage] objects are dispatched by page via the [page.on('console')](/api/class-page.mdx#page-event-console) event. For each console message logged in the page there will be corresponding event in the Playwright context. diff --git a/nodejs/versioned_docs/version-stable/api/class-coverage.mdx b/nodejs/versioned_docs/version-stable/api/class-coverage.mdx index 4c64d6cf908..51021f5a5ef 100644 --- a/nodejs/versioned_docs/version-stable/api/class-coverage.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-coverage.mdx @@ -5,6 +5,7 @@ title: "Coverage" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Coverage gathers information about parts of JavaScript and CSS that were used by the page. diff --git a/nodejs/versioned_docs/version-stable/api/class-dialog.mdx b/nodejs/versioned_docs/version-stable/api/class-dialog.mdx index 1f3347fc018..9a5a703fe38 100644 --- a/nodejs/versioned_docs/version-stable/api/class-dialog.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-dialog.mdx @@ -5,6 +5,7 @@ title: "Dialog" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [Dialog] objects are dispatched by page via the [page.on('dialog')](/api/class-page.mdx#page-event-dialog) event. diff --git a/nodejs/versioned_docs/version-stable/api/class-download.mdx b/nodejs/versioned_docs/version-stable/api/class-download.mdx index 1b22f24a763..c20a68cc7a2 100644 --- a/nodejs/versioned_docs/version-stable/api/class-download.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-download.mdx @@ -5,6 +5,7 @@ title: "Download" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [Download] objects are dispatched by page via the [page.on('download')](/api/class-page.mdx#page-event-download) event. diff --git a/nodejs/versioned_docs/version-stable/api/class-electron.mdx b/nodejs/versioned_docs/version-stable/api/class-electron.mdx index f73104f385d..7293eb056d2 100644 --- a/nodejs/versioned_docs/version-stable/api/class-electron.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-electron.mdx @@ -5,6 +5,7 @@ title: "Electron" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Playwright has **experimental** support for Electron automation. You can access electron namespace via: diff --git a/nodejs/versioned_docs/version-stable/api/class-electronapplication.mdx b/nodejs/versioned_docs/version-stable/api/class-electronapplication.mdx index 544f41b9c1e..d05afb5fa2d 100644 --- a/nodejs/versioned_docs/version-stable/api/class-electronapplication.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-electronapplication.mdx @@ -5,6 +5,7 @@ title: "ElectronApplication" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Electron application representation. You can use [electron.launch()](/api/class-electron.mdx#electron-launch) to obtain the application instance. This instance you can control main electron process as well as work with Electron windows: diff --git a/nodejs/versioned_docs/version-stable/api/class-elementhandle.mdx b/nodejs/versioned_docs/version-stable/api/class-elementhandle.mdx index 9f11669d1a8..f9a64c69699 100644 --- a/nodejs/versioned_docs/version-stable/api/class-elementhandle.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-elementhandle.mdx @@ -5,6 +5,7 @@ title: "ElementHandle" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; * extends: [JSHandle] diff --git a/nodejs/versioned_docs/version-stable/api/class-filechooser.mdx b/nodejs/versioned_docs/version-stable/api/class-filechooser.mdx index 99f5cb32318..fdcb573cdd5 100644 --- a/nodejs/versioned_docs/version-stable/api/class-filechooser.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-filechooser.mdx @@ -5,6 +5,7 @@ title: "FileChooser" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [FileChooser] objects are dispatched by the page in the [page.on('filechooser')](/api/class-page.mdx#page-event-file-chooser) event. diff --git a/nodejs/versioned_docs/version-stable/api/class-fixtures.mdx b/nodejs/versioned_docs/version-stable/api/class-fixtures.mdx index 7425517af01..ca43aed71f5 100644 --- a/nodejs/versioned_docs/version-stable/api/class-fixtures.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-fixtures.mdx @@ -5,6 +5,7 @@ title: "Fixtures" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Playwright Test is based on the concept of the [test fixtures](../test-fixtures.mdx). Test fixtures are used to establish environment for each test, giving the test everything it needs and nothing else. diff --git a/nodejs/versioned_docs/version-stable/api/class-frame.mdx b/nodejs/versioned_docs/version-stable/api/class-frame.mdx index 397db6b0ccb..28968838682 100644 --- a/nodejs/versioned_docs/version-stable/api/class-frame.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-frame.mdx @@ -5,6 +5,7 @@ title: "Frame" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; At every point of time, page exposes its current frame tree via the [page.mainFrame()](/api/class-page.mdx#page-main-frame) and [frame.childFrames()](/api/class-frame.mdx#frame-child-frames) methods. diff --git a/nodejs/versioned_docs/version-stable/api/class-framelocator.mdx b/nodejs/versioned_docs/version-stable/api/class-framelocator.mdx index 5282e3eab77..69f8b5794b2 100644 --- a/nodejs/versioned_docs/version-stable/api/class-framelocator.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-framelocator.mdx @@ -5,6 +5,7 @@ title: "FrameLocator" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; FrameLocator represents a view to the `iframe` on the page. It captures the logic sufficient to retrieve the `iframe` and locate elements in that iframe. FrameLocator can be created with either [locator.contentFrame()](/api/class-locator.mdx#locator-content-frame), [page.frameLocator()](/api/class-page.mdx#page-frame-locator) or [locator.frameLocator()](/api/class-locator.mdx#locator-frame-locator) method. diff --git a/nodejs/versioned_docs/version-stable/api/class-fullconfig.mdx b/nodejs/versioned_docs/version-stable/api/class-fullconfig.mdx index 39899fdd35f..49f5513961f 100644 --- a/nodejs/versioned_docs/version-stable/api/class-fullconfig.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-fullconfig.mdx @@ -5,6 +5,7 @@ title: "FullConfig" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Resolved configuration which is accessible via [testInfo.config](/api/class-testinfo.mdx#test-info-config) and is passed to the test reporters. To see the format of Playwright configuration file, please see [TestConfig] instead. diff --git a/nodejs/versioned_docs/version-stable/api/class-fullproject.mdx b/nodejs/versioned_docs/version-stable/api/class-fullproject.mdx index edc9d6deb17..f4b8a0115af 100644 --- a/nodejs/versioned_docs/version-stable/api/class-fullproject.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-fullproject.mdx @@ -5,6 +5,7 @@ title: "FullProject" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Runtime representation of the test project configuration. It is accessible in the tests via [testInfo.project](/api/class-testinfo.mdx#test-info-project) and [workerInfo.project](/api/class-workerinfo.mdx#worker-info-project) and is passed to the test reporters. To see the format of the project in the Playwright configuration file please see [TestProject] instead. diff --git a/nodejs/versioned_docs/version-stable/api/class-genericassertions.mdx b/nodejs/versioned_docs/version-stable/api/class-genericassertions.mdx index 52e3c4d3761..9c54b167410 100644 --- a/nodejs/versioned_docs/version-stable/api/class-genericassertions.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-genericassertions.mdx @@ -5,6 +5,7 @@ title: "GenericAssertions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The [GenericAssertions] class provides assertion methods that can be used to make assertions about any values in the tests. A new instance of [GenericAssertions] is created by calling [expect()](/api/class-playwrightassertions.mdx#playwright-assertions-expect-generic): diff --git a/nodejs/versioned_docs/version-stable/api/class-jshandle.mdx b/nodejs/versioned_docs/version-stable/api/class-jshandle.mdx index 6139cef830c..787157e3f08 100644 --- a/nodejs/versioned_docs/version-stable/api/class-jshandle.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-jshandle.mdx @@ -5,6 +5,7 @@ title: "JSHandle" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; JSHandle represents an in-page JavaScript object. JSHandles can be created with the [page.evaluateHandle()](/api/class-page.mdx#page-evaluate-handle) method. diff --git a/nodejs/versioned_docs/version-stable/api/class-keyboard.mdx b/nodejs/versioned_docs/version-stable/api/class-keyboard.mdx index 850dfba6383..ee604a40370 100644 --- a/nodejs/versioned_docs/version-stable/api/class-keyboard.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-keyboard.mdx @@ -5,6 +5,7 @@ title: "Keyboard" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Keyboard provides an api for managing a virtual keyboard. The high level api is [keyboard.type()](/api/class-keyboard.mdx#keyboard-type), which takes raw characters and generates proper `keydown`, `keypress`/`input`, and `keyup` events on your page. diff --git a/nodejs/versioned_docs/version-stable/api/class-location.mdx b/nodejs/versioned_docs/version-stable/api/class-location.mdx index c44e9ecbc0f..4f6f8fc9d02 100644 --- a/nodejs/versioned_docs/version-stable/api/class-location.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-location.mdx @@ -5,6 +5,7 @@ title: "Location" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Represents a location in the source code where [TestCase] or [Suite] is defined. diff --git a/nodejs/versioned_docs/version-stable/api/class-locator.mdx b/nodejs/versioned_docs/version-stable/api/class-locator.mdx index 19208a39d5b..152987c69e3 100644 --- a/nodejs/versioned_docs/version-stable/api/class-locator.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-locator.mdx @@ -5,6 +5,7 @@ title: "Locator" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Locators are the central piece of Playwright's auto-waiting and retry-ability. In a nutshell, locators represent a way to find element(s) on the page at any moment. A locator can be created with the [page.locator()](/api/class-page.mdx#page-locator) method. diff --git a/nodejs/versioned_docs/version-stable/api/class-locatorassertions.mdx b/nodejs/versioned_docs/version-stable/api/class-locatorassertions.mdx index e23f2f82614..a4b2a0b2fc9 100644 --- a/nodejs/versioned_docs/version-stable/api/class-locatorassertions.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-locatorassertions.mdx @@ -5,6 +5,7 @@ title: "LocatorAssertions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The [LocatorAssertions] class provides assertion methods that can be used to make assertions about the [Locator] state in the tests. diff --git a/nodejs/versioned_docs/version-stable/api/class-logger.mdx b/nodejs/versioned_docs/version-stable/api/class-logger.mdx index c549adb1ce6..d2d2284d759 100644 --- a/nodejs/versioned_docs/version-stable/api/class-logger.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-logger.mdx @@ -5,6 +5,7 @@ title: "Logger" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; :::warning[Deprecated] diff --git a/nodejs/versioned_docs/version-stable/api/class-mouse.mdx b/nodejs/versioned_docs/version-stable/api/class-mouse.mdx index 46415239c00..fe4183a6f11 100644 --- a/nodejs/versioned_docs/version-stable/api/class-mouse.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-mouse.mdx @@ -5,6 +5,7 @@ title: "Mouse" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The Mouse class operates in main-frame CSS pixels relative to the top-left corner of the viewport. diff --git a/nodejs/versioned_docs/version-stable/api/class-page.mdx b/nodejs/versioned_docs/version-stable/api/class-page.mdx index 27f1d735a29..2df32dd7f34 100644 --- a/nodejs/versioned_docs/version-stable/api/class-page.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-page.mdx @@ -5,6 +5,7 @@ title: "Page" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Page provides methods to interact with a single tab in a [Browser], or an [extension background page](https://developer.chrome.com/extensions/background_pages) in Chromium. One [Browser] instance might have multiple [Page] instances. @@ -1306,7 +1307,7 @@ await page.opener(); Added in: v1.9page.pause -Pauses script execution. Playwright will stop executing the script and wait for the user to either press 'Resume' button in the page overlay or to call `playwright.resume()` in the DevTools console. +Pauses script execution. Playwright will stop executing the script and wait for the user to either press the 'Resume' button in the page overlay or to call `playwright.resume()` in the DevTools console. User can inspect selectors or perform manual steps while paused. Resume will continue running the original script from the place it was paused. diff --git a/nodejs/versioned_docs/version-stable/api/class-pageassertions.mdx b/nodejs/versioned_docs/version-stable/api/class-pageassertions.mdx index 5c71ee88b6d..8021bc38bbd 100644 --- a/nodejs/versioned_docs/version-stable/api/class-pageassertions.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-pageassertions.mdx @@ -5,6 +5,7 @@ title: "PageAssertions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The [PageAssertions] class provides assertion methods that can be used to make assertions about the [Page] state in the tests. diff --git a/nodejs/versioned_docs/version-stable/api/class-playwright.mdx b/nodejs/versioned_docs/version-stable/api/class-playwright.mdx index 50abdcfeb58..7cdd1af90b8 100644 --- a/nodejs/versioned_docs/version-stable/api/class-playwright.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-playwright.mdx @@ -5,6 +5,7 @@ title: "Playwright Library" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Playwright module provides a method to launch a browser instance. The following is a typical example of using Playwright to drive automation: diff --git a/nodejs/versioned_docs/version-stable/api/class-playwrightassertions.mdx b/nodejs/versioned_docs/version-stable/api/class-playwrightassertions.mdx index 975832568a5..1de27d743f3 100644 --- a/nodejs/versioned_docs/version-stable/api/class-playwrightassertions.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-playwrightassertions.mdx @@ -5,6 +5,7 @@ title: "PlaywrightAssertions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Playwright gives you Web-First Assertions with convenience methods for creating assertions that will wait and retry until the expected condition is met. diff --git a/nodejs/versioned_docs/version-stable/api/class-reporter.mdx b/nodejs/versioned_docs/version-stable/api/class-reporter.mdx index 20dea760129..a2010f95dd9 100644 --- a/nodejs/versioned_docs/version-stable/api/class-reporter.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-reporter.mdx @@ -5,6 +5,7 @@ title: "Reporter" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Test runner notifies the reporter about various events during test execution. All methods of the reporter are optional. diff --git a/nodejs/versioned_docs/version-stable/api/class-request.mdx b/nodejs/versioned_docs/version-stable/api/class-request.mdx index 097954e0605..df138a0afdf 100644 --- a/nodejs/versioned_docs/version-stable/api/class-request.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-request.mdx @@ -5,6 +5,7 @@ title: "Request" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Whenever the page sends a request for a network resource the following sequence of events are emitted by [Page]: diff --git a/nodejs/versioned_docs/version-stable/api/class-response.mdx b/nodejs/versioned_docs/version-stable/api/class-response.mdx index 9708a479779..73d6ef15581 100644 --- a/nodejs/versioned_docs/version-stable/api/class-response.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-response.mdx @@ -5,6 +5,7 @@ title: "Response" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [Response] class represents responses which are received by page. diff --git a/nodejs/versioned_docs/version-stable/api/class-route.mdx b/nodejs/versioned_docs/version-stable/api/class-route.mdx index 268a3beb783..3ea6f06e939 100644 --- a/nodejs/versioned_docs/version-stable/api/class-route.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-route.mdx @@ -5,6 +5,7 @@ title: "Route" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Whenever a network route is set up with [page.route()](/api/class-page.mdx#page-route) or [browserContext.route()](/api/class-browsercontext.mdx#browser-context-route), the `Route` object allows to handle the route. diff --git a/nodejs/versioned_docs/version-stable/api/class-selectors.mdx b/nodejs/versioned_docs/version-stable/api/class-selectors.mdx index 5408cb3db3b..cf296111e6f 100644 --- a/nodejs/versioned_docs/version-stable/api/class-selectors.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-selectors.mdx @@ -5,6 +5,7 @@ title: "Selectors" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Selectors can be used to install custom selector engines. See [extensibility](../extensibility.mdx) for more information. diff --git a/nodejs/versioned_docs/version-stable/api/class-snapshotassertions.mdx b/nodejs/versioned_docs/version-stable/api/class-snapshotassertions.mdx index 25a2815b07a..eb127019ae4 100644 --- a/nodejs/versioned_docs/version-stable/api/class-snapshotassertions.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-snapshotassertions.mdx @@ -5,6 +5,7 @@ title: "SnapshotAssertions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Playwright provides methods for comparing page and element screenshots with expected values stored in files. diff --git a/nodejs/versioned_docs/version-stable/api/class-suite.mdx b/nodejs/versioned_docs/version-stable/api/class-suite.mdx index 5e78d23b6ae..4d9f0233696 100644 --- a/nodejs/versioned_docs/version-stable/api/class-suite.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-suite.mdx @@ -5,6 +5,7 @@ title: "Suite" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; `Suite` is a group of tests. All tests in Playwright Test form the following hierarchy: diff --git a/nodejs/versioned_docs/version-stable/api/class-test.mdx b/nodejs/versioned_docs/version-stable/api/class-test.mdx index 5a289da65ae..f5b568d22c4 100644 --- a/nodejs/versioned_docs/version-stable/api/class-test.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-test.mdx @@ -5,6 +5,7 @@ title: "Playwright Test" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Playwright Test provides a `test` function to declare tests and `expect` function to write assertions. @@ -1057,10 +1058,10 @@ test('less readable', async ({ page }) => { Test body that takes one or two arguments: an object with fixtures and optional [TestInfo]. - `condition` [boolean] *(optional)*# - Test is marked as "should fail" when the condition is `true`. + Test is marked as "fixme" when the condition is `true`. - `callback` [function]\([Fixtures]\):[boolean] *(optional)*# - A function that returns whether to mark as "should fail", based on test fixtures. Test or tests are marked as "should fail" when the return value is `true`. + A function that returns whether to mark as "fixme", based on test fixtures. Test or tests are marked as "fixme" when the return value is `true`. - `description` [string] *(optional)*# Optional description that will be reflected in a test report. @@ -1240,7 +1241,7 @@ test('Safari-only test 2', async ({ page }) => { }); ``` -You can also call `test.skip()` without arguments inside the test body to always mark the test as failed. We recommend using `test.skip(title, body)` instead. +You can also call `test.skip()` without arguments inside the test body to always skip the test. However, we recommend using `test.skip(title, body)` instead. ```js import { test, expect } from '@playwright/test'; @@ -1273,10 +1274,10 @@ test('less readable', async ({ page }) => { Test body that takes one or two arguments: an object with fixtures and optional [TestInfo]. - `condition` [boolean] *(optional)*# - Test is marked as "should fail" when the condition is `true`. + Test is marked as "skipped" when the condition is `true`. - `callback` [function]\([Fixtures]\):[boolean] *(optional)*# - A function that returns whether to mark as "should fail", based on test fixtures. Test or tests are marked as "should fail" when the return value is `true`. + A function that returns whether to mark as "skipped", based on test fixtures. Test or tests are marked as "skipped" when the return value is `true`. - `description` [string] *(optional)*# Optional description that will be reflected in a test report. diff --git a/nodejs/versioned_docs/version-stable/api/class-testcase.mdx b/nodejs/versioned_docs/version-stable/api/class-testcase.mdx index 7b0079fe2ba..e1dae8bdfe9 100644 --- a/nodejs/versioned_docs/version-stable/api/class-testcase.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-testcase.mdx @@ -5,6 +5,7 @@ title: "TestCase" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; `TestCase` corresponds to every [test()](/api/class-test.mdx#test-call) call in a test file. When a single [test()](/api/class-test.mdx#test-call) is running in multiple projects or repeated multiple times, it will have multiple `TestCase` objects in corresponding projects' suites. diff --git a/nodejs/versioned_docs/version-stable/api/class-testconfig.mdx b/nodejs/versioned_docs/version-stable/api/class-testconfig.mdx index 0a2f60f6469..9962fa43c00 100644 --- a/nodejs/versioned_docs/version-stable/api/class-testconfig.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-testconfig.mdx @@ -5,6 +5,7 @@ title: "TestConfig" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Playwright Test provides many options to configure how your tests are collected and executed, for example `timeout` or `testDir`. These options are described in the [TestConfig] object in the [configuration file](../test-configuration.mdx). This type describes format of the configuration file, to access resolved configuration parameters at run time use [FullConfig]. diff --git a/nodejs/versioned_docs/version-stable/api/class-testerror.mdx b/nodejs/versioned_docs/version-stable/api/class-testerror.mdx index cf73cf29366..a5c57df7fe7 100644 --- a/nodejs/versioned_docs/version-stable/api/class-testerror.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-testerror.mdx @@ -5,6 +5,7 @@ title: "TestError" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Information about an error thrown during test execution. diff --git a/nodejs/versioned_docs/version-stable/api/class-testinfo.mdx b/nodejs/versioned_docs/version-stable/api/class-testinfo.mdx index 54fe20911a8..dc07deff8e9 100644 --- a/nodejs/versioned_docs/version-stable/api/class-testinfo.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-testinfo.mdx @@ -5,6 +5,7 @@ title: "TestInfo" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; `TestInfo` contains information about currently running test. It is available to test functions, [test.beforeEach()](/api/class-test.mdx#test-before-each), [test.afterEach()](/api/class-test.mdx#test-after-each), [test.beforeAll()](/api/class-test.mdx#test-before-all) and [test.afterAll()](/api/class-test.mdx#test-after-all) hooks, and test-scoped fixtures. `TestInfo` provides utilities to control test execution: attach files, update test timeout, determine which test is currently running and whether it was retried, etc. diff --git a/nodejs/versioned_docs/version-stable/api/class-testinfoerror.mdx b/nodejs/versioned_docs/version-stable/api/class-testinfoerror.mdx index ea196dca906..07331bccada 100644 --- a/nodejs/versioned_docs/version-stable/api/class-testinfoerror.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-testinfoerror.mdx @@ -5,6 +5,7 @@ title: "TestInfoError" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Information about an error thrown during test execution. diff --git a/nodejs/versioned_docs/version-stable/api/class-testoptions.mdx b/nodejs/versioned_docs/version-stable/api/class-testoptions.mdx index 1f81b05e3e5..71f6f4e799f 100644 --- a/nodejs/versioned_docs/version-stable/api/class-testoptions.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-testoptions.mdx @@ -5,6 +5,7 @@ title: "TestOptions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Playwright Test provides many options to configure test environment, [Browser], [BrowserContext] and more. @@ -252,6 +253,8 @@ export default defineConfig({ An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`, a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally, `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided with an exact match to the request origin that the certificate is valid for. +Client certificate authentication is only active when at least one client certificate is provided. If you want to reject all client certificates sent by the server, you need to provide a client certificate with an `origin` that does not match any of the domains you plan to visit. + :::note When using WebKit on macOS, accessing `localhost` will not pick up client certificates. You can make it work by replacing `localhost` with `local.playwright`. diff --git a/nodejs/versioned_docs/version-stable/api/class-testproject.mdx b/nodejs/versioned_docs/version-stable/api/class-testproject.mdx index d2775b2a2b8..b4fdda4a79c 100644 --- a/nodejs/versioned_docs/version-stable/api/class-testproject.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-testproject.mdx @@ -5,6 +5,7 @@ title: "TestProject" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Playwright Test supports running multiple test projects at the same time. This is useful for running tests in multiple configurations. For example, consider running tests against multiple browsers. This type describes format of a project in the configuration file, to access resolved configuration parameters at run time use [FullProject]. @@ -215,7 +216,7 @@ testProject.grep Added in: v1.10testProject.grepInvert -Filter to only run tests with a title **not** matching one of the patterns. This is the opposite of [testProject.grep](/api/class-testproject.mdx#test-project-grep). Also available globally and in the [command line](../test-cli.mdx) with the `--grep-invert` option. +Filter to only run tests with a title **not** matching any of the patterns. This is the opposite of [testProject.grep](/api/class-testproject.mdx#test-project-grep). Also available globally and in the [command line](../test-cli.mdx) with the `--grep-invert` option. `grepInvert` option is also useful for [tagging tests](../test-annotations.mdx#tag-tests). diff --git a/nodejs/versioned_docs/version-stable/api/class-testresult.mdx b/nodejs/versioned_docs/version-stable/api/class-testresult.mdx index 9361fbeba0d..4a25307321c 100644 --- a/nodejs/versioned_docs/version-stable/api/class-testresult.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-testresult.mdx @@ -5,6 +5,7 @@ title: "TestResult" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; A result of a single [TestCase] run. diff --git a/nodejs/versioned_docs/version-stable/api/class-teststep.mdx b/nodejs/versioned_docs/version-stable/api/class-teststep.mdx index 0175c490198..44eace4b806 100644 --- a/nodejs/versioned_docs/version-stable/api/class-teststep.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-teststep.mdx @@ -5,6 +5,7 @@ title: "TestStep" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Represents a step in the [TestRun]. diff --git a/nodejs/versioned_docs/version-stable/api/class-teststepinfo.mdx b/nodejs/versioned_docs/version-stable/api/class-teststepinfo.mdx index 6ead8014fa0..59c8cf7cd37 100644 --- a/nodejs/versioned_docs/version-stable/api/class-teststepinfo.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-teststepinfo.mdx @@ -5,6 +5,7 @@ title: "TestStepInfo" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; `TestStepInfo` contains information about currently running test step. It is passed as an argument to the step function. `TestStepInfo` provides utilities to control test step execution. @@ -140,6 +141,25 @@ test('my test', async ({ page, isMobile }) => { Optional description that will be reflected in a test report. +--- + +## Properties + +### titlePath {#test-step-info-title-path} + +Added in: v1.55testStepInfo.titlePath + +The full title path starting with the test file name, including the step titles. See also [testInfo.titlePath](/api/class-testinfo.mdx#test-info-title-path). + +**Usage** + +```js +testStepInfo.titlePath +``` + +**Type** +- [Array]<[string]> + [Accessibility]: /api/class-accessibility.mdx "Accessibility" [Android]: /api/class-android.mdx "Android" diff --git a/nodejs/versioned_docs/version-stable/api/class-timeouterror.mdx b/nodejs/versioned_docs/version-stable/api/class-timeouterror.mdx index 04896071a00..9f4968d8a50 100644 --- a/nodejs/versioned_docs/version-stable/api/class-timeouterror.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-timeouterror.mdx @@ -5,6 +5,7 @@ title: "TimeoutError" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; * extends: [Error] diff --git a/nodejs/versioned_docs/version-stable/api/class-touchscreen.mdx b/nodejs/versioned_docs/version-stable/api/class-touchscreen.mdx index 8edddf5a38b..77bd35fae2d 100644 --- a/nodejs/versioned_docs/version-stable/api/class-touchscreen.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-touchscreen.mdx @@ -5,6 +5,7 @@ title: "Touchscreen" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The Touchscreen class operates in main-frame CSS pixels relative to the top-left corner of the viewport. Methods on the touchscreen can only be used in browser contexts that have been initialized with `hasTouch` set to true. diff --git a/nodejs/versioned_docs/version-stable/api/class-tracing.mdx b/nodejs/versioned_docs/version-stable/api/class-tracing.mdx index 45ace077818..7a44b2d5b9b 100644 --- a/nodejs/versioned_docs/version-stable/api/class-tracing.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-tracing.mdx @@ -5,6 +5,7 @@ title: "Tracing" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; API for collecting and saving Playwright traces. Playwright traces can be opened in [Trace Viewer](../trace-viewer.mdx) after Playwright script runs. diff --git a/nodejs/versioned_docs/version-stable/api/class-video.mdx b/nodejs/versioned_docs/version-stable/api/class-video.mdx index ca8cfcd9a02..f1edfd33fd6 100644 --- a/nodejs/versioned_docs/version-stable/api/class-video.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-video.mdx @@ -5,6 +5,7 @@ title: "Video" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; When browser context is created with the `recordVideo` option, each page has a video object associated with it. diff --git a/nodejs/versioned_docs/version-stable/api/class-weberror.mdx b/nodejs/versioned_docs/version-stable/api/class-weberror.mdx index 36ac8ab3872..0c21d029b91 100644 --- a/nodejs/versioned_docs/version-stable/api/class-weberror.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-weberror.mdx @@ -5,6 +5,7 @@ title: "WebError" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [WebError] class represents an unhandled exception thrown in the page. It is dispatched via the [browserContext.on('weberror')](/api/class-browsercontext.mdx#browser-context-event-web-error) event. diff --git a/nodejs/versioned_docs/version-stable/api/class-websocket.mdx b/nodejs/versioned_docs/version-stable/api/class-websocket.mdx index a5d457bbdee..5da1802bdf6 100644 --- a/nodejs/versioned_docs/version-stable/api/class-websocket.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-websocket.mdx @@ -5,6 +5,7 @@ title: "WebSocket" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The [WebSocket] class represents WebSocket connections within a page. It provides the ability to inspect and manipulate the data being transmitted and received. diff --git a/nodejs/versioned_docs/version-stable/api/class-websocketroute.mdx b/nodejs/versioned_docs/version-stable/api/class-websocketroute.mdx index 12be0f5e2da..69bba2f7e19 100644 --- a/nodejs/versioned_docs/version-stable/api/class-websocketroute.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-websocketroute.mdx @@ -5,6 +5,7 @@ title: "WebSocketRoute" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Whenever a [`WebSocket`](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) route is set up with [page.routeWebSocket()](/api/class-page.mdx#page-route-web-socket) or [browserContext.routeWebSocket()](/api/class-browsercontext.mdx#browser-context-route-web-socket), the `WebSocketRoute` object allows to handle the WebSocket, like an actual server would do. diff --git a/nodejs/versioned_docs/version-stable/api/class-worker.mdx b/nodejs/versioned_docs/version-stable/api/class-worker.mdx index d540273eec9..94f54126179 100644 --- a/nodejs/versioned_docs/version-stable/api/class-worker.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-worker.mdx @@ -5,6 +5,7 @@ title: "Worker" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The Worker class represents a [WebWorker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API). `worker` event is emitted on the page object to signal a worker creation. `close` event is emitted on the worker object when the worker is gone. diff --git a/nodejs/versioned_docs/version-stable/api/class-workerinfo.mdx b/nodejs/versioned_docs/version-stable/api/class-workerinfo.mdx index c462f54b206..1217a30fb50 100644 --- a/nodejs/versioned_docs/version-stable/api/class-workerinfo.mdx +++ b/nodejs/versioned_docs/version-stable/api/class-workerinfo.mdx @@ -5,6 +5,7 @@ title: "WorkerInfo" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; `WorkerInfo` contains information about the worker that is running tests and is available to worker-scoped fixtures. `WorkerInfo` is a subset of [TestInfo] that is available in many other places. diff --git a/nodejs/versioned_docs/version-stable/aria-snapshots.mdx b/nodejs/versioned_docs/version-stable/aria-snapshots.mdx index 928ed1d5483..3b4f5bdbb80 100644 --- a/nodejs/versioned_docs/version-stable/aria-snapshots.mdx +++ b/nodejs/versioned_docs/version-stable/aria-snapshots.mdx @@ -5,6 +5,7 @@ title: "Snapshot testing" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; import LiteYouTube from '@site/src/components/LiteYouTube'; diff --git a/nodejs/versioned_docs/version-stable/auth.mdx b/nodejs/versioned_docs/version-stable/auth.mdx index b5810db4e34..5f6c767fe5c 100644 --- a/nodejs/versioned_docs/version-stable/auth.mdx +++ b/nodejs/versioned_docs/version-stable/auth.mdx @@ -5,6 +5,7 @@ title: "Authentication" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/best-practices.mdx b/nodejs/versioned_docs/version-stable/best-practices.mdx index b014115c576..7df9fb05c7f 100644 --- a/nodejs/versioned_docs/version-stable/best-practices.mdx +++ b/nodejs/versioned_docs/version-stable/best-practices.mdx @@ -5,6 +5,7 @@ title: "Best Practices" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/browser-contexts.mdx b/nodejs/versioned_docs/version-stable/browser-contexts.mdx index d9e7f0c5fbd..c9657d019e9 100644 --- a/nodejs/versioned_docs/version-stable/browser-contexts.mdx +++ b/nodejs/versioned_docs/version-stable/browser-contexts.mdx @@ -5,6 +5,7 @@ title: "Isolation" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/browsers.mdx b/nodejs/versioned_docs/version-stable/browsers.mdx index c435956cdaf..16ec7a5ee62 100644 --- a/nodejs/versioned_docs/version-stable/browsers.mdx +++ b/nodejs/versioned_docs/version-stable/browsers.mdx @@ -5,6 +5,7 @@ title: "Browsers" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -149,7 +150,7 @@ Running 1 test using 1 worker With the VS Code extension you can run your tests on different browsers by checking the checkbox next to the browser name in the Playwright sidebar. These names are defined in your Playwright config file under the projects section. The default config when installing Playwright gives you 3 projects, Chromium, Firefox and WebKit. The first project is selected by default. -![Projects section in VS Code extension](https://github.com/microsoft/playwright/assets/13063165/58fedea6-a2b9-4942-b2c7-2f3d482210cf) + To run tests on multiple projects(browsers), select each project by checking the checkboxes next to the project name. diff --git a/nodejs/versioned_docs/version-stable/canary-releases.mdx b/nodejs/versioned_docs/version-stable/canary-releases.mdx index 9340c37001d..4bc9c475344 100644 --- a/nodejs/versioned_docs/version-stable/canary-releases.mdx +++ b/nodejs/versioned_docs/version-stable/canary-releases.mdx @@ -5,6 +5,7 @@ title: "Canary releases" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/chrome-extensions.mdx b/nodejs/versioned_docs/version-stable/chrome-extensions.mdx index a0b1c340890..74c93f88ceb 100644 --- a/nodejs/versioned_docs/version-stable/chrome-extensions.mdx +++ b/nodejs/versioned_docs/version-stable/chrome-extensions.mdx @@ -5,12 +5,15 @@ title: "Chrome extensions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction :::note -Extensions only work in Chrome / Chromium launched with a persistent context. Use custom browser args at your own risk, as some of them may break Playwright functionality. +Extensions only work in Chromium when launched with a persistent context. Use custom browser args at your own risk, as some of them may break Playwright functionality. + +Google Chrome and Microsoft Edge [removed the command-line flags needed to side-load extensions](https://groups.google.com/a/chromium.org/g/chromium-extensions/c/FxMU1TvxWWg/m/daZVTYNlBQAJ), so use Chromium that comes bundled with Playwright. ::: The snippet below retrieves the [service worker](https://developer.chrome.com/docs/extensions/develop/concepts/service-workers) of a [Manifest v3](https://developer.chrome.com/docs/extensions/develop/migrate) extension whose source is located in `./my-extension`. diff --git a/nodejs/versioned_docs/version-stable/ci-intro.mdx b/nodejs/versioned_docs/version-stable/ci-intro.mdx index 449ecb91099..2ddba34a231 100644 --- a/nodejs/versioned_docs/version-stable/ci-intro.mdx +++ b/nodejs/versioned_docs/version-stable/ci-intro.mdx @@ -5,10 +5,11 @@ title: "Setting up CI" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction -Playwright tests can be run on any CI provider. This guide covers one way of running tests on GitHub using GitHub actions. If you would like to learn more, or how to configure other CI providers, check out our detailed [doc on Continuous Integration](./ci.mdx). +Playwright tests can be run on any CI provider. This guide covers one way of running tests on GitHub using GitHub Actions. If you would like to learn more, or how to configure other CI providers, check out our detailed [doc on Continuous Integration](./ci.mdx). #### You will learn - [How to set up GitHub Actions](/ci-intro.mdx#setting-up-github-actions) @@ -19,7 +20,7 @@ Playwright tests can be run on any CI provider. This guide covers one way of run ## Setting up GitHub Actions -When [installing Playwright](./intro.mdx) using the [VS Code extension](./getting-started-vscode.mdx) or with `npm init playwright@latest` you are given the option to add a [GitHub Actions](https://docs.github.com/en/actions) workflow. This creates a `playwright.yml` file inside a `.github/workflows` folder containing everything you need so that your tests run on each push and pull request into the main/master branch. Here's how that file looks: +When [installing Playwright](./intro.mdx) using the [VS Code extension](./getting-started-vscode.mdx) or with `npm init playwright@latest`, you are given the option to add a [GitHub Actions](https://docs.github.com/en/actions) workflow. This creates a `playwright.yml` file inside a `.github/workflows` folder containing everything you need so that your tests run on each push and pull request into the main/master branch. Here's how that file looks: ```yml title=".github/workflows/playwright.yml" name: Playwright Tests @@ -63,38 +64,38 @@ To learn more about this, see ["Understanding GitHub Actions"](https://docs.gith ## Create a Repo and Push to GitHub -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. +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. ###### Create a Repo and Push to GitHub ## Opening the Workflows -Click on the **Actions** tab to see the workflows. Here you will see if your tests have passed or failed. +Click on the **Actions** tab to see the workflows. Here you see if your tests have passed or failed. ###### ![opening the workflow](https://user-images.githubusercontent.com/13063165/183423783-58bf2008-514e-4f96-9c12-c9a55703960c.png) ## Viewing Test Logs -Clicking on the workflow run will show you the all the actions that GitHub performed and clicking on **Run Playwright tests** will show the error messages, what was expected and what was received as well as the call log. +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 Test Logs](https://user-images.githubusercontent.com/13063165/183423783-58bf2008-514e-4f96-9c12-c9a55703960c.png) ## HTML Report -The HTML Report shows you a full report of your tests. You can filter the report by browsers, passed tests, failed tests, skipped tests and flaky tests. +The HTML Report shows you a full report of your tests. You can filter the report by browsers, passed tests, failed tests, skipped tests, and flaky tests. ### Downloading the HTML Report -In the Artifacts section click on the **playwright-report** to download your report in the format of a zip file. +In the Artifacts section, click on the **playwright-report** to download your report in the format of a zip file. Downloading the HTML Report ### Viewing the HTML Report -Locally opening the report will not work as expected as you need a web server in order for everything to work correctly. First, extract the zip, preferably in a folder that already has Playwright installed. Using the command line change into the directory where the report is and use `npx playwright show-report` followed by the name of the extracted folder. This will serve up the report and enable you to view it in your browser. +Locally opening the report does not work as expected as you need a web server for everything to work correctly. First, extract the zip, preferably in a folder that already has Playwright installed. Using the command line, change into the directory where the report is and use `npx playwright show-report` followed by the name of the extracted folder. This serves up the report and enables you to view it in your browser. ```bash npx playwright show-report name-of-my-extracted-playwright-report @@ -102,7 +103,7 @@ 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) -To learn more about reports check out our detailed guide on [HTML Reporter](/test-reporters.mdx#html-reporter) +To learn more about reports, check out our detailed guide on [HTML Reporter](/test-reporters.mdx#html-reporter) ## Viewing the Trace @@ -153,7 +154,7 @@ This step will not work for pull requests created from a forked repository becau ## Properly handling Secrets -Artifacts like trace files, HTML reports or even the console logs contain information about your test execution. They can contain sensitive data like user credentials for a test user, access tokens to a staging backend, testing source code or sometimes even your application source code. Treat these files just as careful as you treat that sensitive data. If you upload reports and traces as part of your CI workflow, make sure that you only upload them to trusted artifact stores, or that you encrypt the files before upload. The same is true for sharing artifacts with team members: Use a trusted file share or encrypt the files before sharing. +Artifacts like trace files, HTML reports or even the console logs contain information about your test execution. They can contain sensitive data like user credentials for a test user, access tokens to a staging backend, testing source code, or sometimes even your application source code. Treat these files just as carefully as you treat that sensitive data. If you upload reports and traces as part of your CI workflow, make sure that you only upload them to trusted artifact stores, or that you encrypt the files before upload. The same is true for sharing artifacts with team members: Use a trusted file share or encrypt the files before sharing. ## What's Next - [Learn how to use Locators](./locators.mdx) diff --git a/nodejs/versioned_docs/version-stable/ci.mdx b/nodejs/versioned_docs/version-stable/ci.mdx index c0d6f8dbf2f..2dead782b72 100644 --- a/nodejs/versioned_docs/version-stable/ci.mdx +++ b/nodejs/versioned_docs/version-stable/ci.mdx @@ -5,6 +5,7 @@ title: "Continuous Integration" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -101,7 +102,7 @@ jobs: name: 'Playwright Tests' runs-on: ubuntu-latest container: - image: mcr.microsoft.com/playwright:v1.54.0-noble + image: mcr.microsoft.com/playwright:v1.54.2-noble options: --user 1001 steps: - uses: actions/checkout@v4 @@ -335,7 +336,7 @@ trigger: pool: vmImage: ubuntu-latest -container: mcr.microsoft.com/playwright:v1.54.0-noble +container: mcr.microsoft.com/playwright:v1.54.2-noble steps: - task: NodeTool@0 @@ -359,7 +360,7 @@ Running Playwright on CircleCI is very similar to running on GitHub Actions. In executors: pw-noble-development: docker: - - image: mcr.microsoft.com/playwright:v1.54.0-noble + - image: mcr.microsoft.com/playwright:v1.54.2-noble ``` Note: When using the docker agent definition, you are specifying the resource class of where playwright runs to the 'medium' tier [here](https://circleci.com/docs/configuration-reference?#docker-execution-environment). The default behavior of Playwright is to set the number of workers to the detected core count (2 in the case of the medium tier). Overriding the number of workers to greater than this number will cause unnecessary timeouts and failures. @@ -382,7 +383,7 @@ Jenkins supports Docker agents for pipelines. Use the [Playwright Docker image]( ```groovy pipeline { - agent { docker { image 'mcr.microsoft.com/playwright:v1.54.0-noble' } } + agent { docker { image 'mcr.microsoft.com/playwright:v1.54.2-noble' } } stages { stage('e2e-tests') { steps { @@ -399,7 +400,7 @@ pipeline { Bitbucket Pipelines can use public [Docker images as build environments](https://confluence.atlassian.com/bitbucket/use-docker-images-as-build-environments-792298897.html). To run Playwright tests on Bitbucket, use our public Docker image ([see Dockerfile](./docker.mdx)). ```yml -image: mcr.microsoft.com/playwright:v1.54.0-noble +image: mcr.microsoft.com/playwright:v1.54.2-noble ``` ### GitLab CI @@ -412,7 +413,7 @@ stages: tests: stage: test - image: mcr.microsoft.com/playwright:v1.54.0-noble + image: mcr.microsoft.com/playwright:v1.54.2-noble script: ... ``` @@ -427,7 +428,7 @@ stages: tests: stage: test - image: mcr.microsoft.com/playwright:v1.54.0-noble + image: mcr.microsoft.com/playwright:v1.54.2-noble parallel: 7 script: - npm ci @@ -442,7 +443,7 @@ stages: tests: stage: test - image: mcr.microsoft.com/playwright:v1.54.0-noble + image: mcr.microsoft.com/playwright:v1.54.2-noble parallel: matrix: - PROJECT: ['chromium', 'webkit'] @@ -458,7 +459,7 @@ To run Playwright tests on Google Cloud Build, use our public Docker image ([see ```yml steps: -- name: mcr.microsoft.com/playwright:v1.54.0-noble +- name: mcr.microsoft.com/playwright:v1.54.2-noble script: ... env: @@ -476,7 +477,7 @@ type: docker steps: - name: test - image: mcr.microsoft.com/playwright:v1.54.0-noble + image: mcr.microsoft.com/playwright:v1.54.2-noble commands: - npx playwright test ``` diff --git a/nodejs/versioned_docs/version-stable/clock.mdx b/nodejs/versioned_docs/version-stable/clock.mdx index beb1a663ae9..38168f57943 100644 --- a/nodejs/versioned_docs/version-stable/clock.mdx +++ b/nodejs/versioned_docs/version-stable/clock.mdx @@ -5,6 +5,7 @@ title: "Clock" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; import LiteYouTube from '@site/src/components/LiteYouTube'; diff --git a/nodejs/versioned_docs/version-stable/codegen-intro.mdx b/nodejs/versioned_docs/version-stable/codegen-intro.mdx index 0020535bcae..71e68194d1f 100644 --- a/nodejs/versioned_docs/version-stable/codegen-intro.mdx +++ b/nodejs/versioned_docs/version-stable/codegen-intro.mdx @@ -5,10 +5,11 @@ title: "Generating tests" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction -Playwright comes with the ability to generate tests out of the box and is a great way to quickly get started with testing. It will open two windows, a browser window where you interact with the website you wish to test and the Playwright Inspector window where you can record your tests, copy the tests, clear your tests as well as change the language of your tests. +Playwright can generate tests automatically, providing a quick way to get started with testing. Codegen opens a browser window for interaction and the Playwright Inspector for recording, copying, and managing your generated tests. **You will learn** - [How to record a test](/codegen.mdx#recording-a-test) @@ -16,7 +17,7 @@ Playwright comes with the ability to generate tests out of the box and is a grea ## Running Codegen -Use the `codegen` command to run the test generator followed by the URL of the website you want to generate tests for. The URL is optional and you can always run the command without it and then add the URL directly into the browser window instead. +Use the `codegen` command to run the test generator followed by the URL of the website you want to generate tests for. The URL is optional and can be added directly in the browser window if omitted. ```bash npx playwright codegen demo.playwright.dev/todomvc @@ -24,40 +25,40 @@ npx playwright codegen demo.playwright.dev/todomvc ### Recording a test -Run `codegen` and perform actions in the browser. Playwright will generate the code for the user interactions. `Codegen` will look at the rendered page and figure out the recommended locator, prioritizing role, text and test id locators. If the generator identifies multiple elements matching the locator, it will improve the locator to make it resilient and uniquely identify the target element, therefore eliminating and reducing test(s) failing and flaking due to locators. +Run `codegen` and perform actions in the browser. Playwright generates code for your interactions automatically. Codegen analyzes the rendered page and recommends the best locator, prioritizing role, text, and test id locators. When multiple elements match a locator, the generator improves it to uniquely identify the target element, reducing test failures and flakiness. With the test generator you can record: -* Actions like click or fill by simply interacting with the page -* Assertions by clicking on one of the icons in the toolbar and then clicking on an element on the page to assert against. You can choose: +* Actions like click or fill by interacting with the page +* Assertions by clicking a toolbar icon, then clicking a page element to assert against. You can choose: * `'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 ###### -![Recording a test](https://github.com/microsoft/playwright/assets/13063165/34a79ea1-639e-4cb3-8115-bfdc78e3d34d) + ###### -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. +When you finish interacting with the page, press the `'record'` button to stop recording and use the `'copy'` button to copy the generated code to your editor. -Use the `'clear'` button to clear the code to start recording again. Once finished close the Playwright inspector window or stop the terminal command. +Use the `'clear'` button to clear the code and start recording again. Once finished, close the Playwright Inspector window or stop the terminal command. -To learn more about generating tests check out or detailed guide on [Codegen](./codegen.mdx). +To learn more about generating tests, check out our detailed guide on [Codegen](./codegen.mdx). ### Generating locators You can generate [locators](/locators.mdx) with the test generator. -* Press the `'Record'` button to stop the recording and the `'Pick Locator'` button will appear. -* Click on the `'Pick Locator'` button and then hover over elements in the browser window to see the locator highlighted underneath each element. -* To choose a locator click on the element you would like to locate and the code for that locator will appear in the locator playground next to the Pick Locator button. -* You can then edit the locator in the locator playground to fine tune it and see the matching element highlighted in the browser window. -* Use the copy button to copy the locator and paste it into your code. +* Press the `'Record'` button to stop recording and the `'Pick Locator'` button will appear +* Click the `'Pick Locator'` button and hover over elements in the browser window to see the locator highlighted underneath each element +* Click the element you want to locate and the code for that locator will appear in the locator playground next to the Pick Locator button +* Edit the locator in the locator playground to fine-tune it and see the matching element highlighted in the browser window +* Use the copy button to copy the locator and paste it into your code ###### -![picking a locator](https://github.com/microsoft/playwright/assets/13063165/2c8a12e2-4e98-4fdd-af92-1d73ae696d86) + ### Emulation -You can also generate tests using emulation so as to generate a test for a specific viewport, device, color scheme, as well as emulate the geolocation, language or timezone. The test generator can also generate a test while preserving authenticated state. Check out the [Test Generator](./codegen.mdx#emulation) guide to learn more. +You can generate tests using emulation for specific viewports, devices, color schemes, geolocation, language, or timezone. The test generator can also preserve authenticated state. Check out the [Test Generator](./codegen.mdx#emulation) guide to learn more. ## What's Next - [See a trace of your tests](./trace-viewer-intro.mdx) diff --git a/nodejs/versioned_docs/version-stable/codegen.mdx b/nodejs/versioned_docs/version-stable/codegen.mdx index f38a1d9f376..6a556a64feb 100644 --- a/nodejs/versioned_docs/version-stable/codegen.mdx +++ b/nodejs/versioned_docs/version-stable/codegen.mdx @@ -5,6 +5,7 @@ title: "Test generator" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; import LiteYouTube from '@site/src/components/LiteYouTube'; diff --git a/nodejs/versioned_docs/version-stable/debug.mdx b/nodejs/versioned_docs/version-stable/debug.mdx index 1ea5f659d0c..aaed5a8a36d 100644 --- a/nodejs/versioned_docs/version-stable/debug.mdx +++ b/nodejs/versioned_docs/version-stable/debug.mdx @@ -5,6 +5,7 @@ title: "Debugging Tests" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## VS Code debugger diff --git a/nodejs/versioned_docs/version-stable/dialogs.mdx b/nodejs/versioned_docs/version-stable/dialogs.mdx index a8584745ad5..941c27338d5 100644 --- a/nodejs/versioned_docs/version-stable/dialogs.mdx +++ b/nodejs/versioned_docs/version-stable/dialogs.mdx @@ -5,6 +5,7 @@ title: "Dialogs" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/docker.mdx b/nodejs/versioned_docs/version-stable/docker.mdx index fea16bea235..a55557908f8 100644 --- a/nodejs/versioned_docs/version-stable/docker.mdx +++ b/nodejs/versioned_docs/version-stable/docker.mdx @@ -5,6 +5,7 @@ title: "Docker" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -22,7 +23,7 @@ This Docker image is intended to be used for testing and development purposes on ### Pull the image ```bash -docker pull mcr.microsoft.com/playwright:v1.54.0-noble +docker pull mcr.microsoft.com/playwright:v1.54.2-noble ``` ### Run the image @@ -34,7 +35,7 @@ By default, the Docker image will use the `root` user to run the browsers. This On trusted websites, you can avoid creating a separate user and use root for it since you trust the code which will run on the browsers. ```bash -docker run -it --rm --ipc=host mcr.microsoft.com/playwright:v1.54.0-noble /bin/bash +docker run -it --rm --ipc=host mcr.microsoft.com/playwright:v1.54.2-noble /bin/bash ``` #### Crawling and scraping @@ -42,7 +43,7 @@ docker run -it --rm --ipc=host mcr.microsoft.com/playwright:v1.54.0-noble /bin/b On untrusted websites, it's recommended to use a separate user for launching the browsers in combination with the seccomp profile. Inside the container or if you are using the Docker image as a base image you have to use `adduser` for it. ```bash -docker run -it --rm --ipc=host --user pwuser --security-opt seccomp=seccomp_profile.json mcr.microsoft.com/playwright:v1.54.0-noble /bin/bash +docker run -it --rm --ipc=host --user pwuser --security-opt seccomp=seccomp_profile.json mcr.microsoft.com/playwright:v1.54.2-noble /bin/bash ``` [`seccomp_profile.json`](https://github.com/microsoft/playwright/blob/main/utils/docker/seccomp_profile.json) is needed to run Chromium with sandbox. This is a [default Docker seccomp profile](https://github.com/docker/engine/blob/d0d99b04cf6e00ed3fc27e81fc3d94e7eda70af3/profiles/seccomp/default.json) with extra user namespace cloning permissions: @@ -82,7 +83,7 @@ You can run Playwright Server in Docker while keeping your tests running on the Start the Playwright Server in Docker: ```bash -docker run -p 3000:3000 --rm --init -it --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.54.0-noble /bin/sh -c "npx -y playwright@1.54.0 run-server --port 3000 --host 0.0.0.0" +docker run -p 3000:3000 --rm --init -it --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.54.2-noble /bin/sh -c "npx -y playwright@1.54.2 run-server --port 3000 --host 0.0.0.0" ``` #### Connecting to the Server @@ -105,7 +106,7 @@ const browser = await playwright['chromium'].connect('ws://127.0.0.1:3000/'); If you need to access local servers from within the Docker container: ```bash -docker run --add-host=hostmachine:host-gateway -p 3000:3000 --rm --init -it --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.54.0-noble /bin/sh -c "npx -y playwright@1.54.0 run-server --port 3000 --host 0.0.0.0" +docker run --add-host=hostmachine:host-gateway -p 3000:3000 --rm --init -it --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.54.2-noble /bin/sh -c "npx -y playwright@1.54.2 run-server --port 3000 --host 0.0.0.0" ``` This makes `hostmachine` point to the host's localhost. Your tests should use `hostmachine` instead of `localhost` when accessing local servers. @@ -120,9 +121,9 @@ When running tests remotely, ensure the Playwright version in your tests matches See [all available image tags]. We currently publish images with the following tags: -- `:v1.54.0` - Playwright v1.54.0 release docker image based on Ubuntu 24.04 LTS (Noble Numbat). -- `:v1.54.0-noble` - Playwright v1.54.0 release docker image based on Ubuntu 24.04 LTS (Noble Numbat). -- `:v1.54.0-jammy` - Playwright v1.54.0 release docker image based on Ubuntu 22.04 LTS (Jammy Jellyfish). +- `:v1.54.2` - Playwright v1.54.2 release docker image based on Ubuntu 24.04 LTS (Noble Numbat). +- `:v1.54.2-noble` - Playwright v1.54.2 release docker image based on Ubuntu 24.04 LTS (Noble Numbat). +- `:v1.54.2-jammy` - Playwright v1.54.2 release docker image based on Ubuntu 22.04 LTS (Jammy Jellyfish). :::note @@ -146,7 +147,7 @@ To run Playwright inside Docker, you need to have Node.js, [Playwright browsers] ```Dockerfile FROM node:20-bookworm -RUN npx -y playwright@1.54.0 install --with-deps +RUN npx -y playwright@1.54.2 install --with-deps ``` diff --git a/nodejs/versioned_docs/version-stable/downloads.mdx b/nodejs/versioned_docs/version-stable/downloads.mdx index 38cdd3e6715..f7cc084704f 100644 --- a/nodejs/versioned_docs/version-stable/downloads.mdx +++ b/nodejs/versioned_docs/version-stable/downloads.mdx @@ -5,6 +5,7 @@ title: "Downloads" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/emulation.mdx b/nodejs/versioned_docs/version-stable/emulation.mdx index 881ac70de5b..dae8dd522ea 100644 --- a/nodejs/versioned_docs/version-stable/emulation.mdx +++ b/nodejs/versioned_docs/version-stable/emulation.mdx @@ -5,6 +5,7 @@ title: "Emulation" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/evaluating.mdx b/nodejs/versioned_docs/version-stable/evaluating.mdx index 267da3f6866..e63ae514dc8 100644 --- a/nodejs/versioned_docs/version-stable/evaluating.mdx +++ b/nodejs/versioned_docs/version-stable/evaluating.mdx @@ -5,6 +5,7 @@ title: "Evaluating JavaScript" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/events.mdx b/nodejs/versioned_docs/version-stable/events.mdx index f612750074b..fed61817564 100644 --- a/nodejs/versioned_docs/version-stable/events.mdx +++ b/nodejs/versioned_docs/version-stable/events.mdx @@ -5,6 +5,7 @@ title: "Events" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/extensibility.mdx b/nodejs/versioned_docs/version-stable/extensibility.mdx index a7623f411e9..8337fe51a7b 100644 --- a/nodejs/versioned_docs/version-stable/extensibility.mdx +++ b/nodejs/versioned_docs/version-stable/extensibility.mdx @@ -5,6 +5,7 @@ title: "Extensibility" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Custom selector engines diff --git a/nodejs/versioned_docs/version-stable/frames.mdx b/nodejs/versioned_docs/version-stable/frames.mdx index 84e5284a9fc..f8ed832f565 100644 --- a/nodejs/versioned_docs/version-stable/frames.mdx +++ b/nodejs/versioned_docs/version-stable/frames.mdx @@ -5,6 +5,7 @@ title: "Frames" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/getting-started-vscode.mdx b/nodejs/versioned_docs/version-stable/getting-started-vscode.mdx index 0ba718c14c4..67c114a9bff 100644 --- a/nodejs/versioned_docs/version-stable/getting-started-vscode.mdx +++ b/nodejs/versioned_docs/version-stable/getting-started-vscode.mdx @@ -5,218 +5,146 @@ title: "Getting started - VS Code" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; import LiteYouTube from '@site/src/components/LiteYouTube'; ## Introduction -Playwright Test was created specifically to accommodate the needs of end-to-end testing. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. Test on Windows, Linux, and macOS, locally or on CI, headless or headed with native mobile emulation of Google Chrome for Android and Mobile Safari. +The Playwright VS Code extension brings the power of Playwright Test directly into your editor, allowing you to run, debug, and generate tests with a seamless UI-driven experience. This guide will walk you through setting up the extension and using its core features to supercharge your end-to-end testing workflow. -Get started by installing Playwright and generating a test to see it in action. Alternatively you can also get started and run your tests using the [CLI](./intro.mdx). + - +## Prerequisites -## Installation +Before you begin, make sure you have the following installed: +- [Node.js](https://nodejs.org/) (LTS version recommended) +- [Visual Studio Code](https://code.visualstudio.com/) -Playwright has a VS Code extension which is available when testing with Node.js. Install [it from the VS Code marketplace](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright) or from the extensions tab in VS Code. +## Getting Started -![VS Code extension for Playwright](https://github.com/microsoft/playwright/assets/13063165/cab54568-3168-4b3f-bf3d-854976594903) +### Installation & Setup +1. **Install the Extension**: Open the Extensions view in VS Code (`Ctrl+Shift+X` or `Cmd+Shift+X`) and search for "Playwright". [Install the official extension from Microsoft](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright). -Once installed, open the command panel and type: + +1. **Install Playwright**: Once the extension is installed, open the Command Palette (`Ctrl+Shift+P` or `Cmd+Shift+P`) and run the **Test: Install Playwright** command. -```bash -Install Playwright -``` + -![install playwright](https://github.com/microsoft/playwright/assets/13063165/14e91050-24ab-4ff1-a37b-57d7c15e5c35) +3. **Select Browsers**: Choose the browsers you want for your tests (e.g., Chromium, Firefox, WebKit). You can also add a GitHub Actions workflow to run tests in CI. These settings can be changed later in your `playwright.config.ts` file. -Select **Test: Install Playwright** and Choose the browsers you would like to run your tests on. These can be later configured in the [playwright.config](./test-configuration.mdx) file. You can also choose if you would like to have a GitHub Actions setup to [run your tests on CI](./ci-intro.mdx). + -![choose browsers](https://github.com/microsoft/playwright/assets/13063165/c9e8a25a-e9e8-4419-aeb5-1b8ba58bd71d) +### Opening the Testing Sidebar -### Opening the testing sidebar +Click the **Testing icon** in the VS Code Activity Bar to open the Test Explorer. Here, you'll find your tests, as well as the Playwright sidebar for managing projects, tools, and settings. -The testing sidebar can be opened by clicking on the testing icon in the activity bar. This will give you access to the test explorer, which will show you all the tests in your project as well as the Playwright sidebar which includes projects, settings, tools and setup. + -![Testing Sidebar](https://github.com/microsoft/playwright/assets/13063165/d203fe83-6015-4e7a-b816-35d373906b24) +## Core Features -## Running tests +### Running Your Tests -You can run a single test by clicking the green triangle next to your test block to run your test. Playwright will run through each line of the test and when it finishes you will see a green tick next to your test block as well as the time it took to run the test. + +- **Run a Single Test**: Click the green "play" icon next to any test to run it. The play button will change to a green checkmark if the test passes or a red X if the test fails. You'll be able to see how long the test took to run displayed next to the test name. Additionally, the Test Results panel will automatically open at the bottom of VS Code, showing a summary of the test execution including how many tests ran, how many passed, failed, or were skipped, along with the total execution time. - + +- **Run All Tests**: You can run all tests at different levels. Click the play icon next to a specific test file to run all tests within that file, or click the play icon at the very top of the Test Explorer to run all tests across your entire project. -![run a single test](https://github.com/microsoft/playwright/assets/13063165/69dbccfc-4e9f-40e7-bcdf-7d5c5a11f988) + +- **Run on Multiple Browsers**: In the Playwright sidebar, check the boxes for the projects (browsers) you want to test against. Projects in Playwright represent different browser configurations - each project typically corresponds to a specific browser (like Chromium, Firefox, or WebKit) with its own settings such as viewport size, device emulation, or other browser-specific options. When you run a test, it will execute across all selected projects, allowing you to verify your application works consistently across different browsers and configurations. -### Run tests and show browsers + +- **Show Browser**: To watch your tests execute in a live browser window, enable the **Show Browser** option in the sidebar. Disable it to run in headless mode (where tests run in the background without opening a visible browser window). -You can also run your tests and show the browsers by selecting the option **Show Browsers** in the testing sidebar. Then when you click the green triangle to run your test the browser will open and you will visually see it run through your test. Leave this selected if you want browsers open for all your tests or uncheck it if you prefer your tests to run in headless mode with no browser open. + -![show browsers while running tests](https://github.com/microsoft/playwright/assets/13063165/9f231530-0c43-466a-b944-8cf5102f714a) - -Use the **Close all browsers** button to close all browsers. - -### View and run all tests - -View all tests in the testing sidebar and extend the tests by clicking on each test. Tests that have not been run will not have the green check next to them. Run all tests by clicking on the white triangle as you hover over the tests in the testing sidebar. - -![run all tests](https://github.com/microsoft/playwright/assets/13063165/348e18ff-f819-4caa-8f7e-f16c20724f56) - -### Running tests on multiple browsers - -The first section in the Playwright sidebar is the projects section. Here you can see all your projects as defined in your Playwright config file. The default config when installing Playwright gives you 3 projects, Chromium, Firefox and WebKit. The first project is selected by default. - -![Projects section in VS Code extension](https://github.com/microsoft/playwright/assets/13063165/58fedea6-a2b9-4942-b2c7-2f3d482210cf) - -To run tests on multiple projects, select each project by checking the checkboxes next to the project name. Then when you run your tests from the sidebar or by pressing the play button next to the test name, the tests will run on all the selected projects. - -![Selecting projects to run tests on](https://github.com/microsoft/playwright/assets/13063165/6dc86ef4-6097-481c-9cab-b6e053ec7ea6) - -You can also individually run a test on a specific project by clicking the grey play button next to the project name of the test. - -![Running a test on a specific project](https://github.com/microsoft/playwright/assets/13063165/d29a27ab-07b5-4ca6-b4d7-1ad6d44bf222) - -### Run tests with trace viewer - -For a better developer experience you can run your tests with the **Show Trace Viewer** option. - -![run tests with trace viewer](https://github.com/microsoft/playwright/assets/13063165/fab8efa6-d5ef-496d-876d-c99e94e6a6b3) - -This will open up a full trace of your test where you can step through each action of your tests, explore the timeline, source code and more. - -![trace viewer](https://github.com/microsoft/playwright/assets/13063165/ee31a4fe-c786-4d4b-887e-2dcecacfba2c) - -To learn more about the trace viewer see our [Trace Viewer guide](./trace-viewer.mdx). - -## Debugging tests - -With the VS Code extension you can debug your tests right in VS Code see error messages, create breakpoints and live debug your tests. +### Debugging Your Tests -### Error messages - -If your test fails VS Code will show you error messages right in the editor showing what was expected, what was received as well as a complete call log. - -![error messaging in vs code](https://github.com/microsoft/playwright/assets/13063165/3b8af12a-4805-4573-9d38-92055a0a7e75) - -### Live debugging - -You can debug your test live in VS Code. After running a test with the `Show Browser` option checked, click on any of the locators in VS Code and it will be highlighted in the Browser window. Playwright will highlight it if it exists and show you if there is more than one result - -![live debugging in vs code](https://github.com/microsoft/playwright/assets/13063165/7d236ebb-3d2d-4384-b73d-32a2b4e33b9e) - -You can also edit the locators in VS Code and Playwright will show you the changes live in the browser window. - -### Run in debug mode +The VS Code extension provides powerful debugging tools to help you identify and fix issues in your tests. You can set breakpoints, inspect variables, view detailed error messages, get AI-powered suggestions to resolve test failures, and use the comprehensive trace viewer to analyze test execution step-by-step. +- **Using Breakpoints**: Set a breakpoint by clicking in the gutter next to a line number. Right-click the test and select **Debug Test**. The test will pause at your breakpoint, allowing you to inspect variables and step through the code. + + +- **Live Debugging**: With **Show Browsers** enabled, click on a locator in your code. Playwright will highlight the corresponding element in the browser, making it easy to verify locators. + + +- **Viewing Error Messages**: If a test fails, the extension displays detailed error messages, including the expected vs. received values and a full call log, directly in the editor. -To set a breakpoint click next to the line number where you want the breakpoint to be until a red dot appears. Run the tests in debug mode by right clicking on the line next to the test you want to run. + +- **Fix with AI**: When a test fails, click the sparkle icon next to the error to get an AI-powered fix suggestion from Copilot. Copilot analyzes the error and suggests a code change to resolve the issue. -![setting debug mode](https://github.com/microsoft/playwright/assets/13063165/31640629-efac-4cc7-b8b0-80ae18a3af83) + +- **Debugging with Trace Viewer**: For comprehensive debugging, enable the **Show Trace Viewer** option in the Playwright sidebar. When your test finishes, a detailed trace will automatically open, providing you with a complete timeline of your test execution. The trace viewer is particularly useful for: + - **Step-by-step analysis**: Navigate through each action your test performed with precise timestamps + - **DOM inspection**: View DOM snapshots at any point during test execution to see exactly what the page looked like + - **Network monitoring**: Examine all network requests and responses that occurred during the test + - **Console logs**: Access all console messages and errors from the browser + - **Source mapping**: Jump directly to the source code that executed each action + - **Visual debugging**: See screenshots and understand what the user would have seen at each step + + The trace viewer is especially valuable when debugging flaky tests or understanding complex user interactions. -A browser window will open and the test will run and pause at where the breakpoint is set. You can step through the tests, pause the test and rerun the tests from the menu in VS Code. + -![running in debug mode](https://github.com/microsoft/playwright/assets/13063165/b96a9f50-0f4d-49f9-a3d8-f093980a5673) +To learn more, see our [Trace Viewer guide](./trace-viewer.mdx). -![choosing a profile for debugging](https://github.com/microsoft/playwright/assets/13063165/48c1b428-8dd2-4229-9eb5-24f7168db834) +### Generating Tests with CodeGen -To learn more about debugging, see [Debugging in Visual Studio Code](https://code.visualstudio.com/docs/editor/debugging). - -### Debug with trace viewer - -For a better developer experience you can debug your tests with the **Show Trace Viewer** option. - -![run tests with trace viewer](https://github.com/microsoft/playwright/assets/13063165/fab8efa6-d5ef-496d-876d-c99e94e6a6b3) - -This will open up a full trace of your test where you can step through each action and see what happened before and after the action. You can also inspect the DOM snapshot, see console logs, network requests, the source code and more. - -![trace viewer](https://github.com/microsoft/playwright/assets/13063165/ee31a4fe-c786-4d4b-887e-2dcecacfba2c) - -To learn more about the trace viewer see our [Trace Viewer guide](./trace-viewer.mdx). - -## Generating tests - -CodeGen will auto generate your tests for you as you perform actions in the browser and is a great way to quickly get started. The viewport for the browser window is set to a specific width and height. See the [configuration guide](./test-configuration.mdx) to change the viewport or emulate different environments. +CodeGen is Playwright's powerful test generation tool that automatically creates test code by recording your interactions with a web page. Instead of writing tests from scratch, you can simply navigate through your application while CodeGen captures your actions and converts them into reliable test code with proper locators and assertions. +- **Record a New Test**: Click **Record new** in the sidebar. A browser window will open. As you interact with the page, Playwright will automatically generate the test code. You can also generate assertions from the recording toolbar. -### Record a new test - -To record a test click on the **Record new** button from the Testing sidebar. This will create a `test-1.spec.ts` file as well as open up a browser window. In the browser go to the URL you wish to test and start clicking around. 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 see your generated test. - -![record a new test](https://github.com/microsoft/playwright/assets/13063165/0407f112-e1cd-41e7-a05d-ae64e24d27ed) - -### Record at cursor - -To record from a specific point in your test file click the **Record at cursor** button from the Testing sidebar. This generates actions into the existing test at the current cursor position. You can run the test, position the cursor at the end of the test and continue generating the test. - -![record at cursor](https://github.com/microsoft/playwright/assets/13063165/96933ea1-4c84-453a-acd7-22b4d3bde185) - -### Picking a locator - -Pick a [locator](./locators.mdx) and copy it into your test file by clicking the **Pick locator** button form the testing sidebar. Then in the browser click the element you require and it will now show up in the **Pick locator** box in VS Code. Press 'enter' on your keyboard to copy the locator into the clipboard and then paste anywhere in your code. Or press 'escape' if you want to cancel. - -![pick locators](https://github.com/microsoft/playwright/assets/13063165/9a1b2da9-9ac7-4def-a9e0-f94770364fc2) - -Playwright will look at your page and figure out the best locator, prioritizing [role, text and test id locators](./locators.mdx). If the generator finds multiple elements matching the locator, it will improve the locator to make it resilient and uniquely identify the target element, so you don't have to worry about failing tests due to locators. - -## Project Dependencies - -You can use [project dependencies](./test-projects.mdx) to run tests that depend on other tests. This is useful for **setup** tests such as logging in to a website. - -### Running setup tests - -To run your setup tests select the **setup** project, as defined in your configuration file, from the project section in the Playwright sidebar. This will give you access to the **setup** tests in the test explorer. - -![setup tests in vscode](https://github.com/microsoft/playwright/assets/13063165/7a9eccd5-a5b3-431f-9eff-9b2971501e07) - -When you run a test that depends on the **setup** tests, the **setup** test will run first. Each time you run the test, the **setup** test will run again. - -![running setup tests in vscode](https://github.com/microsoft/playwright/assets/13063165/a54b3868-3f9f-4e74-8d42-a93443f099fc) - -### Running setup tests only once + +- **Record at Cursor**: Place your cursor inside an existing test and click **Record at cursor** to add new actions at that specific point. -To run the **setup** test only once, deselect it from the projects section in the Playwright sidebar. The **setup** test is now removed from the test explorer. When you run a test that depends on the **setup** test, it will no longer run the **setup** test, making it much faster and therefore a much better developer experience. + +- **Pick a Locator**: Use the **Pick locator** tool to click on any element in the opened browser. Playwright will determine the best locator and copy it to your clipboard, ready to be pasted into your code. -![deselecting setup tests in vscode](https://github.com/microsoft/playwright/assets/13063165/ebc50e38-c98d-4538-82fe-ec08491f8487) + -## Global Setup +To learn more, see our [CodeGen guide](./codegen.mdx). -**Global setup** runs when you execute your first test. It runs only once and is useful for setting up a database or starting a server. You can manually run **global setup** by clicking the `Run global setup` option from the **Setup** section in the Playwright sidebar. **Global teardown** does not run by default; you need to manually initiate it by clicking the `Run global teardown` option. +## Advanced Features -Global setup will re-run when you debug tests as this ensures an isolated environment and dedicated setup for the test. +### Project Dependencies -![running global setup](https://github.com/microsoft/playwright/assets/13063165/bcf5fec7-2d7d-4cb9-a277-5f41e19b8d52) +Use [project dependencies](./test-projects.mdx) to define setup tests that run before other tests. For example, you can create a login test that runs first, then reuse that authenticated state across multiple tests without having to log in again for each test. In VS Code, you can see these setup tests in the Test Explorer and run them independently when needed. -## Multiple configurations + -If your project contains more than one playwright configuration file, you can switch between them by first clicking on the gear icon in the top right corner of the Playwright sidebar. This will show you all the configuration files in your project. Select the configuration files you want to use by checking the checkbox next to each one and clicking on the 'ok' button. +To learn more, see our [Project Dependencies guide](./test-projects.mdx). -![Selecting a configuration file](https://github.com/microsoft/playwright/assets/13063165/ff9ff838-d27a-403d-b939-94e6c295e1d7) +### Global Setup -You will now have access to all your tests in the test explorer. To run a test click on the grey triangle next to the file or project name. +For tasks that need to run only once before all tests (like seeding a database), use **Global Setup**. You can trigger the global setup and teardown manually from the Playwright sidebar. -![Switching between configuration files](https://github.com/microsoft/playwright/assets/13063165/70930de5-0a0c-45e0-a6ee-b51f727f0e35) + -To run all tests from all configurations click on the grey triangle at the top of the test explorer. +### Multiple Configurations -![Running all tests from all configurations](https://github.com/microsoft/playwright/assets/13063165/b3de4ce1-d311-4527-b2c7-b3e2f179a685) +If you have multiple `playwright.config.ts` files, you can switch between them using the gear icon in the Playwright sidebar. This allows you to easily work with different test suites or environments. -To choose a configuration file to work with simply toggle between them by clicking on the configuration file name in the Playwright sidebar. Now when you use the tools, such as Record a test, it will record a test for the selected configuration file. + -![Recording a test for a specific configuration file](https://github.com/microsoft/playwright/assets/13063165/a8ecbcd1-fab8-4012-bdaa-428951f233a2) +## Quick Reference -You can easily toggle back and forth between configurations by clicking on the configuration file name in the Playwright sidebar. +| Action | How to do it in VS Code | +| ----------------------- | ----------------------------------------------------------- | +| **Install Playwright** | Command Palette → `Test: Install Playwright` | +| **Run a Test** | Click the "play" icon next to the test | +| **Debug a Test** | Set a breakpoint, right-click the test → `Debug Test` | +| **Show Live Browser** | Enable `Show Browsers` in the Playwright sidebar | +| **Record a New Test** | Click `Record new` in the Playwright sidebar | +| **Pick a Locator** | Click `Pick locator` in the Playwright sidebar | +| **View Test Trace** | Enable `Show Trace Viewer` in the Playwright sidebar | -## What's next -- [Write tests using web first assertions, page fixtures and locators](./writing-tests.mdx) -- [Run your tests on CI](./ci-intro.mdx) -- [Learn more about the Trace Viewer](./trace-viewer.mdx) +## What's Next +- [Write tests using web-first assertions, page fixtures, and locators](./writing-tests.mdx) +- [Run your tests on CI](./ci-intro.mdx) +- [Learn more about the Trace Viewer](./trace-viewer.mdx) [Accessibility]: /api/class-accessibility.mdx "Accessibility" diff --git a/nodejs/versioned_docs/version-stable/handles.mdx b/nodejs/versioned_docs/version-stable/handles.mdx index 5faafa286bb..08abb06c6a7 100644 --- a/nodejs/versioned_docs/version-stable/handles.mdx +++ b/nodejs/versioned_docs/version-stable/handles.mdx @@ -5,6 +5,7 @@ title: "Handles" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/input.mdx b/nodejs/versioned_docs/version-stable/input.mdx index f25c6253472..0f4bf6ee750 100644 --- a/nodejs/versioned_docs/version-stable/input.mdx +++ b/nodejs/versioned_docs/version-stable/input.mdx @@ -5,6 +5,7 @@ title: "Actions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/intro.mdx b/nodejs/versioned_docs/version-stable/intro.mdx index de310012e32..838c79a776a 100644 --- a/nodejs/versioned_docs/version-stable/intro.mdx +++ b/nodejs/versioned_docs/version-stable/intro.mdx @@ -5,14 +5,15 @@ title: "Installation" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction -Playwright Test was created specifically to accommodate the needs of end-to-end testing. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. Test on Windows, Linux, and macOS, locally or on CI, headless or headed with native mobile emulation of Google Chrome for Android and Mobile Safari. +Playwright Test is an end-to-end test framework for modern web apps. It bundles test runner, assertions, isolation, parallelization and rich tooling. Playwright supports Chromium, WebKit and Firefox on Windows, Linux and macOS, locally or in CI, headless or headed, with native mobile emulation for Chrome (Android) and Mobile Safari. **You will learn** - [How to install Playwright](/intro.mdx#installing-playwright) -- [What's Installed](/intro.mdx#whats-installed) +- [What's installed](/intro.mdx#whats-installed) - [How to run the example test](/intro.mdx#running-the-example-test) - [How to open the HTML test report](/intro.mdx#html-test-reports) @@ -22,7 +23,7 @@ Get started by installing Playwright using one of the following methods. ### Using npm, yarn or pnpm -The command below either initializes a new project with Playwright, or adds Playwright setup to your current project. +The command below either initializes a new project or adds Playwright to an existing one. @@ -52,37 +53,39 @@ pnpm create playwright -Run the install command and select the following to get started: -- Choose between TypeScript or JavaScript (default is TypeScript) -- Name of your Tests folder (default is `tests`, or `e2e` if you already have a `tests` folder in your project) -- Add a GitHub Actions workflow to easily run tests on CI -- Install Playwright browsers (default is true) +When prompted, choose / confirm: +- TypeScript or JavaScript (default: TypeScript) +- Tests folder name (default: `tests`, or `e2e` if `tests` already exists) +- Add a GitHub Actions workflow (recommended for CI) +- Install Playwright browsers (default: yes) + +You can re-run the command later; it does not overwrite existing tests. ### Using the VS Code Extension -Alternatively you can also get started and run your tests using the [VS Code Extension](./getting-started-vscode.mdx). +You can also create and run tests with the [VS Code Extension](./getting-started-vscode.mdx). ## What's Installed -Playwright will download the browsers needed as well as create the following files. +Playwright downloads required browser binaries and creates the scaffold below. ```bash -playwright.config.ts +playwright.config.ts # Test configuration package.json -package-lock.json +package-lock.json # Or yarn.lock / pnpm-lock.yaml tests/ - example.spec.ts + example.spec.ts # Minimal example test tests-examples/ - demo-todo-app.spec.ts + demo-todo-app.spec.ts # Richer example tests ``` -The [playwright.config](./test-configuration.mdx) is where you can add configuration for Playwright including modifying which browsers you would like to run Playwright on. If you are running tests inside an already existing project then dependencies will be added directly to your `package.json`. +The [playwright.config](./test-configuration.mdx) centralizes configuration: target browsers, timeouts, retries, projects, reporters and more. In existing projects dependencies are added to your current `package.json`. -The `tests` folder contains a basic example test to help you get started with testing. For a more detailed example check out the `tests-examples` folder which contains tests written to test a todo app. +`tests/` contains a minimal starter test. `tests-examples/` provides richer samples (e.g. a todo app) to explore patterns. ## Running the Example Test -By default tests will be run on all 3 browsers, Chromium, Firefox and WebKit using several workers. This can be configured in the [playwright.config file](./test-configuration.mdx). Tests are run in headless mode meaning no browser will open up when running the tests. Results of the tests and test logs will be shown in the terminal. +By default tests run headless in parallel across Chromium, Firefox and WebKit (configurable in [playwright.config](./test-configuration.mdx)). Output and aggregated results display in the terminal. @@ -112,11 +115,19 @@ pnpm exec playwright test -![tests running in command line](https://github.com/microsoft/playwright/assets/13063165/981c1b2b-dc7e-4b85-b241-272b44da6628) See our doc on [Running Tests](./running-tests.mdx) to learn more about running tests in headed mode, running multiple tests, running specific tests etc. + + +Tips: +- See the browser window: add `--headed`. +- Run a single project/browser: `--project=chromium`. +- Run one file: `npx playwright test tests/example.spec.ts`. +- Open testing UI: `--ui`. + +See [Running Tests](./running-tests.mdx) for details on filtering, headed mode, sharding and retries. ## HTML Test Reports -After your test completes, an [HTML Reporter](./test-reporters.mdx#html-reporter) will be generated, which shows you a full report of your tests allowing you to filter the report by browsers, passed tests, failed tests, skipped tests and flaky tests. You can click on each test and explore the test's errors as well as each step of the test. By default, the HTML report is opened automatically if some of the tests failed. +After a test run, the [HTML Reporter](./test-reporters.mdx#html-reporter) provides a dashboard filterable by the browser, passed, failed, skipped, flaky and more. Click a test to inspect errors, attachments and steps. It auto-opens only when failures occur; open manually with the command below. @@ -146,11 +157,11 @@ pnpm exec playwright show-report -![HTML Report](https://github.com/microsoft/playwright/assets/13063165/38ec17a7-9e61-4002-b137-a93812765501) + ## Running the Example Test in UI Mode -Run your tests with [UI Mode](./test-ui-mode.mdx) for a better developer experience with time travel debugging, watch mode and more. +Run tests with [UI Mode](./test-ui-mode.mdx) for watch mode, live step view, time travel debugging and more. @@ -180,13 +191,13 @@ pnpm exec playwright test --ui -![UI Mode](https://github.com/microsoft/playwright/assets/13063165/c5b501cc-4f5d-485a-87cc-66044c651786) + -Check out or [detailed guide on UI Mode](./test-ui-mode.mdx) to learn more about its features. +See the [detailed guide on UI Mode](./test-ui-mode.mdx) for watch filters, step details and trace integration. ## Updating Playwright -To update Playwright to the latest version run the following command: +Update Playwright and download new browser binaries and their dependencies: @@ -194,7 +205,6 @@ To update Playwright to the latest version run the following command: ```bash npm install -D @playwright/test@latest -# Also download new browser binaries and their dependencies: npx playwright install --with-deps ``` @@ -204,7 +214,6 @@ npx playwright install --with-deps ```bash yarn add --dev @playwright/test@latest -# Also download new browser binaries and their dependencies: yarn playwright install --with-deps ``` @@ -214,7 +223,6 @@ yarn playwright install --with-deps ```bash pnpm install --save-dev @playwright/test@latest -# Also download new browser binaries and their dependencies: pnpm exec playwright install --with-deps ``` @@ -222,7 +230,7 @@ pnpm exec playwright install --with-deps -You can always check which version of Playwright you have by running the following command: +Check your installed version: @@ -253,16 +261,16 @@ pnpm exec playwright --version ## System requirements -- Latest version of Node.js 20, 22 or 24. +- Node.js: latest 20.x, 22.x or 24.x. - Windows 10+, Windows Server 2016+ or Windows Subsystem for Linux (WSL). -- macOS 14 Ventura, or later. -- Debian 12, Ubuntu 22.04, Ubuntu 24.04, on x86-64 and arm64 architecture. +- macOS 14 (Ventura) or later. +- Debian 12 / 13, Ubuntu 22.04 / 24.04 (x86-64 or arm64). ## What's next -- [Write tests using web first assertions, page fixtures and locators](./writing-tests.mdx) -- [Run single test, multiple tests, headed mode](./running-tests.mdx) +- [Write tests using web-first assertions, fixtures and locators](./writing-tests.mdx) +- [Run single or multiple tests; headed mode](./running-tests.mdx) - [Generate tests with Codegen](./codegen-intro.mdx) -- [See a trace of your tests](./trace-viewer-intro.mdx) +- [View a trace of your tests](./trace-viewer-intro.mdx) [Accessibility]: /api/class-accessibility.mdx "Accessibility" diff --git a/nodejs/versioned_docs/version-stable/languages.mdx b/nodejs/versioned_docs/version-stable/languages.mdx index 0d103aa17f0..5c4be229624 100644 --- a/nodejs/versioned_docs/version-stable/languages.mdx +++ b/nodejs/versioned_docs/version-stable/languages.mdx @@ -5,6 +5,7 @@ title: "Supported languages" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -30,7 +31,7 @@ You can choose any testing framework such as JUnit or TestNG based on your proje ## .NET -Playwright for .NET comes with MSTest, NUnit, and xUnit [base classes](https://playwright.dev/dotnet/docs/test-runners) for writing end-to-end tests. +Playwright for .NET comes with MSTest, NUnit, xUnit, and xUnit v3 [base classes](https://playwright.dev/dotnet/docs/test-runners) for writing end-to-end tests. * [Documentation](https://playwright.dev/dotnet/docs/intro) * [GitHub repo](https://github.com/microsoft/playwright-dotnet) diff --git a/nodejs/versioned_docs/version-stable/library.mdx b/nodejs/versioned_docs/version-stable/library.mdx index 4c3256bb83d..1a3ed3254a9 100644 --- a/nodejs/versioned_docs/version-stable/library.mdx +++ b/nodejs/versioned_docs/version-stable/library.mdx @@ -5,6 +5,7 @@ title: "Library" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/locators.mdx b/nodejs/versioned_docs/version-stable/locators.mdx index 70fe24fe089..f4cbaa6716f 100644 --- a/nodejs/versioned_docs/version-stable/locators.mdx +++ b/nodejs/versioned_docs/version-stable/locators.mdx @@ -5,6 +5,7 @@ title: "Locators" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/mock-browser.mdx b/nodejs/versioned_docs/version-stable/mock-browser.mdx index 1ada607fd19..e35fefa148e 100644 --- a/nodejs/versioned_docs/version-stable/mock-browser.mdx +++ b/nodejs/versioned_docs/version-stable/mock-browser.mdx @@ -5,6 +5,7 @@ title: "Mock browser APIs" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/mock.mdx b/nodejs/versioned_docs/version-stable/mock.mdx index 6f8dd069b49..bb6b534e71c 100644 --- a/nodejs/versioned_docs/version-stable/mock.mdx +++ b/nodejs/versioned_docs/version-stable/mock.mdx @@ -5,6 +5,7 @@ title: "Mock APIs" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -78,21 +79,8 @@ To record a HAR file we use [page.routeFromHAR()](/api/class-page.mdx#page-route 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. -```js -test('records or updates the HAR file', async ({ page }) => { - // Get the response from the HAR file - await page.routeFromHAR('./hars/fruit.har', { - url: '*/**/api/v1/fruits', - update: true, - }); - - // Go to the page - await page.goto('https://demo.playwright.dev/api-mocking'); - - // Assert that the fruit is visible - await expect(page.getByText('Strawberry')).toBeVisible(); -}); -``` +#### +Alternatively, you can also record HAR files by using the [recordHar](/api/class-browser.mdx#browser-new-context-option-record-har) option in [browser.newContext()](/api/class-browser.mdx#browser-new-context) when creating a browser context. This allows you to capture all network traffic for the entire context until the context is closed. ### Modifying a HAR file diff --git a/nodejs/versioned_docs/version-stable/navigations.mdx b/nodejs/versioned_docs/version-stable/navigations.mdx index ca32970e2fc..40dadf27e0c 100644 --- a/nodejs/versioned_docs/version-stable/navigations.mdx +++ b/nodejs/versioned_docs/version-stable/navigations.mdx @@ -5,6 +5,7 @@ title: "Navigations" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/network.mdx b/nodejs/versioned_docs/version-stable/network.mdx index 2e380557bc2..9dea85d7e2c 100644 --- a/nodejs/versioned_docs/version-stable/network.mdx +++ b/nodejs/versioned_docs/version-stable/network.mdx @@ -5,6 +5,7 @@ title: "Network" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/other-locators.mdx b/nodejs/versioned_docs/version-stable/other-locators.mdx index 995c542c206..ba45ea8b3df 100644 --- a/nodejs/versioned_docs/version-stable/other-locators.mdx +++ b/nodejs/versioned_docs/version-stable/other-locators.mdx @@ -5,6 +5,7 @@ title: "Other locators" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/pages.mdx b/nodejs/versioned_docs/version-stable/pages.mdx index 05f2cec005c..11e193b4982 100644 --- a/nodejs/versioned_docs/version-stable/pages.mdx +++ b/nodejs/versioned_docs/version-stable/pages.mdx @@ -5,6 +5,7 @@ title: "Pages" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Pages diff --git a/nodejs/versioned_docs/version-stable/pom.mdx b/nodejs/versioned_docs/version-stable/pom.mdx index cc5b08d5d6d..cace62eb028 100644 --- a/nodejs/versioned_docs/version-stable/pom.mdx +++ b/nodejs/versioned_docs/version-stable/pom.mdx @@ -5,6 +5,7 @@ title: "Page object models" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/protractor.mdx b/nodejs/versioned_docs/version-stable/protractor.mdx index 952d4000252..69e4e8eeb81 100644 --- a/nodejs/versioned_docs/version-stable/protractor.mdx +++ b/nodejs/versioned_docs/version-stable/protractor.mdx @@ -5,6 +5,7 @@ title: "Migrating from Protractor" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Migration Principles - No need for "webdriver-manager" / Selenium. diff --git a/nodejs/versioned_docs/version-stable/puppeteer.mdx b/nodejs/versioned_docs/version-stable/puppeteer.mdx index 8cc2fee8418..3049d28c196 100644 --- a/nodejs/versioned_docs/version-stable/puppeteer.mdx +++ b/nodejs/versioned_docs/version-stable/puppeteer.mdx @@ -5,6 +5,7 @@ title: "Migrating from Puppeteer" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Migration Principles diff --git a/nodejs/versioned_docs/version-stable/release-notes.mdx b/nodejs/versioned_docs/version-stable/release-notes.mdx index 63de29ef9e6..9d2d8fbee78 100644 --- a/nodejs/versioned_docs/version-stable/release-notes.mdx +++ b/nodejs/versioned_docs/version-stable/release-notes.mdx @@ -6,9 +6,33 @@ toc_max_heading_level: 2 import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; import LiteYouTube from '@site/src/components/LiteYouTube'; +## Version 1.55 + +### New APIs +- New Property [testStepInfo.titlePath](/api/class-teststepinfo.mdx#test-step-info-title-path) Returns the full title path starting from the test file, including test and step titles. + +### Codegen +- Automatic `toBeVisible()` assertions: Codegen can now generate automatic `toBeVisible()` assertions for common UI interactions. This feature can be enabled in the Codegen settings UI. + +### Breaking Changes +- ⚠️ Dropped support for Chromium extension manifest v2. + +### Miscellaneous +- Added support for Debian 13 "Trixie". + +### Browser Versions +- Chromium 140.0.7339.16 +- Mozilla Firefox 141.0 +- WebKit 26.0 + +This version was also tested against the following stable channels: +- Google Chrome 139 +- Microsoft Edge 139 + ## Version 1.54 ### Highlights @@ -111,7 +135,6 @@ This version was also tested against the following stable channels: ### Miscellaneous - New option [maxRedirects](/api/class-apirequest.mdx#api-request-new-context-option-max-redirects) in [apiRequest.newContext()](/api/class-apirequest.mdx#api-request-new-context) to control the maximum number of redirects. -- New option `ref` in [locator.ariaSnapshot()](/api/class-locator.mdx#locator-aria-snapshot) to generate reference for each element in the snapshot which can later be used to locate the element. - HTML reporter now supports *NOT filtering* via `!@my-tag` or `!my-file.spec.ts` or `!p:my-project`. ### Breaking Changes diff --git a/nodejs/versioned_docs/version-stable/running-tests.mdx b/nodejs/versioned_docs/version-stable/running-tests.mdx index 36c0f2cb417..2d6a434b3d7 100644 --- a/nodejs/versioned_docs/version-stable/running-tests.mdx +++ b/nodejs/versioned_docs/version-stable/running-tests.mdx @@ -5,10 +5,11 @@ title: "Running and debugging tests" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction -With Playwright you can run a single test, a set of tests or all tests. Tests can be run on one browser or multiple browsers by using the `--project` flag. Tests are run in parallel by default and are run in a headless manner, meaning no browser window will be opened while running the tests and results will be seen in the terminal. However, you can run tests in headed mode by using the `--headed` CLI argument, or you can run your tests in [UI mode](./test-ui-mode.mdx) by using the `--ui` flag. See a full trace of your tests complete with watch mode, time travel debugging and more. +With Playwright you can run a single test, a set of tests, or all tests. Tests can be run on one browser or multiple browsers using the `--project` flag. Tests run in parallel by default and in headless mode, meaning no browser window opens while running the tests and results appear in the terminal. You can run tests in headed mode using the `--headed` CLI argument, or run your tests in [UI mode](./test-ui-mode.mdx) using the `--ui` flag to see a full trace of your tests. **You will learn** - [How to run tests from the command line](/running-tests.mdx#command-line) @@ -19,13 +20,13 @@ With Playwright you can run a single test, a set of tests or all tests. Tests ca ### Command line -You can run your tests with the `playwright test` command. This will run your tests on all browsers as configured in the `playwright.config` file. Tests run in headless mode by default meaning no browser window will be opened while running the tests and results will be seen in the terminal. +You can run your tests with the `playwright test` command. This runs your tests on all browsers as configured in the `playwright.config` file, and results appear in the terminal. Tests run in headless mode by default, meaning no browser window opens while running the tests. ```bash npx playwright test ``` -![tests running in command line](https://github.com/microsoft/playwright/assets/13063165/981c1b2b-dc7e-4b85-b241-272b44da6628) + ### Run tests in UI mode @@ -35,13 +36,13 @@ We highly recommend running your tests with [UI Mode](./test-ui-mode.mdx) for a npx playwright test --ui ``` -![UI Mode](https://github.com/microsoft/playwright/assets/13063165/c5b501cc-4f5d-485a-87cc-66044c651786) + -Check out or [detailed guide on UI Mode](./test-ui-mode.mdx) to learn more about its features. +Check out our [detailed guide on UI Mode](./test-ui-mode.mdx) to learn more about its features. ### Run tests in headed mode -To run your tests in headed mode, use the `--headed` flag. This will give you the ability to visually see how Playwright interacts with the website. +To run your tests in headed mode, use the `--headed` flag. This gives you the ability to visually see how Playwright interacts with the website. ```bash npx playwright test --headed @@ -49,13 +50,13 @@ npx playwright test --headed ### Run tests on different browsers -To specify which browser you would like to run your tests on, use the `--project` flag followed by the name of the browser. +To specify which browser you would like to run your tests on, use the `--project` flag followed by the browser name. ```bash npx playwright test --project webkit ``` -To specify multiple browsers to run your tests on, use the `--project` flag multiple times followed by the name of each browser. +To specify multiple browsers to run your tests on, use the `--project` flag multiple times followed by each browser name. ```bash npx playwright test --project webkit --project firefox @@ -63,13 +64,13 @@ npx playwright test --project webkit --project firefox ### Run specific tests -To run a single test file, pass in the name of the test file that you want to run. +To run a single test file, pass in the test file name that you want to run. ```bash npx playwright test landing-page.spec.ts ``` -To run a set of test files from different directories, pass in the names of the directories that you want to run the tests in. +To run a set of test files from different directories, pass in the directory names that you want to run the tests in. ```bash npx playwright test tests/todo-page/ tests/landing-page/ @@ -97,27 +98,27 @@ npx playwright test --last-failed ### Run tests in VS Code -Tests can be run right from VS Code using the [VS Code extension](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright). Once installed you can simply click the green triangle next to the test you want to run or run all tests from the testing sidebar. Check out our [Getting Started with VS Code](./getting-started-vscode.mdx#running-tests) guide for more details. +Tests can be run right from VS Code using the [VS Code extension](https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright). Once installed you can simply click the green triangle next to the test you want to run or run all tests from the testing sidebar. Check out our [Getting Started with VS Code](./getting-started-vscode.mdx) guide for more details. -![Playwright VS Code extension](https://github.com/microsoft/playwright/assets/13063165/47726e70-683b-4bd5-94de-7d03dd45c30f) + ## Debugging tests -Since Playwright runs in Node.js, you can debug it with your debugger of choice e.g. using `console.log` or inside your IDE or directly in VS Code with the [VS Code Extension](./getting-started-vscode.mdx). Playwright comes with [UI Mode](./test-ui-mode.mdx), where you can easily walk through each step of the test, see logs, errors, network requests, inspect the DOM snapshot and more. You can also use the [Playwright Inspector](./debug.mdx#playwright-inspector), which allows you to step through Playwright API calls, see their debug logs and explore [locators](./locators.mdx). +Since Playwright runs in Node.js, you can debug it with your debugger of choice, e.g. using `console.log`, inside your IDE, or directly in VS Code with the [VS Code Extension](./getting-started-vscode.mdx). Playwright comes with [UI Mode](./test-ui-mode.mdx), where you can easily walk through each step of the test, see logs, errors, network requests, inspect the DOM snapshot, and more. You can also use the [Playwright Inspector](./debug.mdx#playwright-inspector), which allows you to step through Playwright API calls, see their debug logs, and explore [locators](./locators.mdx). ### Debug tests in UI mode -We highly recommend debugging your tests with [UI Mode](./test-ui-mode.mdx) for a better developer experience where you can easily walk through each step of the test and visually see what was happening before, during and after each step. UI mode also comes with many other features such as the locator picker, watch mode and more. +We highly recommend debugging your tests with [UI Mode](./test-ui-mode.mdx) for a better developer experience where you can easily walk through each step of the test and visually see what was happening before, during, and after each step. UI mode also comes with many other features such as the locator picker, watch mode, and more. ```bash npx playwright test --ui ``` -![showing errors in ui mode](https://github.com/microsoft/playwright/assets/13063165/ffca2fd1-5349-41fb-ade9-ace143bb2c58) + -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 in the locator playground 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. +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 in the locator playground and see it highlighting live in the browser window. Use the Copy Locator button to copy the locator to your clipboard and then paste it into your test. -![pick locator in ui mode](https://github.com/microsoft/playwright/assets/13063165/9e7eeb84-bd26-4010-8614-75e24b56c716) + Check out our [detailed guide on UI Mode](./test-ui-mode.mdx) to learn more about its features. @@ -129,11 +130,11 @@ To debug all tests, run the Playwright test command followed by the `--debug` fl npx playwright test --debug ``` -![Debugging Tests with the Playwright inspector](https://github.com/microsoft/playwright/assets/13063165/6b3b3caa-d258-4cb8-aa05-cd407f501626) + -This command will open up a Browser window as well as the Playwright Inspector. You can use the step over button at the top of the inspector to step through your test. Or, press the play button to run your test from start to finish. Once the test has finished, the browser window will close. +This command opens a browser window as well as the Playwright Inspector. You can use the step over button at the top of the inspector to step through your test. Or, press the play button to run your test from start to finish. Once the test finishes, the browser window closes. -To debug one test file, run the Playwright test command with the name of the test file that you want to debug followed by the `--debug` flag. +To debug one test file, run the Playwright test command with the test file name that you want to debug followed by the `--debug` flag. ```bash npx playwright test example.spec.ts --debug @@ -145,25 +146,25 @@ To debug a specific test from the line number where the `test(..` is defined, ad npx playwright test example.spec.ts:10 --debug ``` -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. +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 in the browser window. Use the Copy Locator button to copy the locator to your clipboard and then paste it into your test. -![Locator picker in the Playwright Inspector](https://github.com/microsoft/playwright/assets/13063165/013d5edb-583e-423a-bb53-9f57bab7f3e1) + -Check out our [debugging guide](./debug.mdx) to learn more about debugging with the [VS Code debugger](./debug.mdx#vs-code-debugger), UI Mode and the [Playwright Inspector](./debug.mdx#playwright-inspector) as well as debugging with [Browser Developer tools](./debug.mdx#browser-developer-tools). +Check out our [debugging guide](./debug.mdx) to learn more about debugging with the [VS Code debugger](./debug.mdx#vs-code-debugger), UI Mode, and the [Playwright Inspector](./debug.mdx#playwright-inspector) as well as debugging with [Browser Developer tools](./debug.mdx#browser-developer-tools). ## Test reports -The [HTML Reporter](./test-reporters.mdx#html-reporter) shows you a full report of your tests allowing you to filter the report by browsers, passed tests, failed tests, skipped tests and flaky tests. By default, the HTML report is opened automatically if some of the tests failed, otherwise you can open it with the following command. +The [HTML Reporter](./test-reporters.mdx#html-reporter) shows you a full report of your tests allowing you to filter the report by browsers, passed tests, failed tests, skipped tests, and flaky tests. By default, the HTML report opens automatically if some tests failed, otherwise you can open it with the following command. ```bash npx playwright show-report ``` -![HTML Report](https://github.com/microsoft/playwright/assets/13063165/c5f60e56-fb75-4a2d-a4b6-054b8c5d69c1) + -You can filter and search for tests as well as click on each test to see the tests errors and explore each step of the test. +You can filter and search for tests as well as click on each test to see the test errors and explore each step of the test. -![HTML Reporter detail view](https://github.com/microsoft/playwright/assets/13063165/f36ada14-4701-4534-a3be-ed22c2b16cf5) + ## What's next - [Generate tests with Codegen](./codegen-intro.mdx) diff --git a/nodejs/versioned_docs/version-stable/screenshots.mdx b/nodejs/versioned_docs/version-stable/screenshots.mdx index 716cadefb18..0b19d461946 100644 --- a/nodejs/versioned_docs/version-stable/screenshots.mdx +++ b/nodejs/versioned_docs/version-stable/screenshots.mdx @@ -5,6 +5,7 @@ title: "Screenshots" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/selenium-grid.mdx b/nodejs/versioned_docs/version-stable/selenium-grid.mdx index 39317c3ab21..90fe66f6688 100644 --- a/nodejs/versioned_docs/version-stable/selenium-grid.mdx +++ b/nodejs/versioned_docs/version-stable/selenium-grid.mdx @@ -5,6 +5,7 @@ title: "Selenium Grid (experimental)" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/service-workers-experimental-network-events.mdx b/nodejs/versioned_docs/version-stable/service-workers-experimental-network-events.mdx index ab540ed68a3..314980bda16 100644 --- a/nodejs/versioned_docs/version-stable/service-workers-experimental-network-events.mdx +++ b/nodejs/versioned_docs/version-stable/service-workers-experimental-network-events.mdx @@ -5,6 +5,7 @@ title: "(Experimental) Service Worker Network Events" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/test-annotations.mdx b/nodejs/versioned_docs/version-stable/test-annotations.mdx index 7f5f8ad2e23..0bc81e7a43a 100644 --- a/nodejs/versioned_docs/version-stable/test-annotations.mdx +++ b/nodejs/versioned_docs/version-stable/test-annotations.mdx @@ -5,6 +5,7 @@ title: "Annotations" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/test-assertions.mdx b/nodejs/versioned_docs/version-stable/test-assertions.mdx index efd4b1b3150..eae79cfef6e 100644 --- a/nodejs/versioned_docs/version-stable/test-assertions.mdx +++ b/nodejs/versioned_docs/version-stable/test-assertions.mdx @@ -5,6 +5,7 @@ title: "Assertions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/test-cli.mdx b/nodejs/versioned_docs/version-stable/test-cli.mdx index 8f8c10534cf..65a62b630f3 100644 --- a/nodejs/versioned_docs/version-stable/test-cli.mdx +++ b/nodejs/versioned_docs/version-stable/test-cli.mdx @@ -5,6 +5,7 @@ title: "Command line" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Playwright provides a powerful command line interface for running tests, generating code, debugging, and more. The most up to date list of commands and arguments available on the CLI can always be retrieved via `npx playwright --help`. @@ -89,7 +90,7 @@ npx playwright test --ui | `--fully-parallel` | Run all tests in parallel (default: false). | | `--global-timeout ` | Maximum time this test suite can run in milliseconds (default: unlimited). | | `-g ` or `--grep ` | Only run tests matching this regular expression (default: ".*"). | -| `-gv ` or `--grep-invert ` | Only run tests that do not match this regular expression. | +| `--grep-invert ` | Only run tests that do not match this regular expression. | | `--headed` | Run tests in headed browsers (default: headless). | | `--ignore-snapshots` | Ignore screenshot and snapshot expectations. | | `-j ` or `--workers ` | Number of concurrent workers or percentage of logical CPU cores, use 1 to run in a single worker (default: 50%). | diff --git a/nodejs/versioned_docs/version-stable/test-components.mdx b/nodejs/versioned_docs/version-stable/test-components.mdx index da6683274f1..b20992e9fec 100644 --- a/nodejs/versioned_docs/version-stable/test-components.mdx +++ b/nodejs/versioned_docs/version-stable/test-components.mdx @@ -5,6 +5,7 @@ title: "Components (experimental)" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; import LiteYouTube from '@site/src/components/LiteYouTube'; diff --git a/nodejs/versioned_docs/version-stable/test-configuration.mdx b/nodejs/versioned_docs/version-stable/test-configuration.mdx index 007e50a3346..6d7a5abbcf8 100644 --- a/nodejs/versioned_docs/version-stable/test-configuration.mdx +++ b/nodejs/versioned_docs/version-stable/test-configuration.mdx @@ -5,6 +5,7 @@ title: "Test configuration" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/test-fixtures.mdx b/nodejs/versioned_docs/version-stable/test-fixtures.mdx index 8072c89e237..84ed142247b 100644 --- a/nodejs/versioned_docs/version-stable/test-fixtures.mdx +++ b/nodejs/versioned_docs/version-stable/test-fixtures.mdx @@ -5,6 +5,7 @@ title: "Fixtures" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/test-global-setup-teardown.mdx b/nodejs/versioned_docs/version-stable/test-global-setup-teardown.mdx index 693b31933d8..b4314ef9b7e 100644 --- a/nodejs/versioned_docs/version-stable/test-global-setup-teardown.mdx +++ b/nodejs/versioned_docs/version-stable/test-global-setup-teardown.mdx @@ -5,6 +5,7 @@ title: "Global setup and teardown" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/test-parallel.mdx b/nodejs/versioned_docs/version-stable/test-parallel.mdx index c766c0bb3e3..602f1630e86 100644 --- a/nodejs/versioned_docs/version-stable/test-parallel.mdx +++ b/nodejs/versioned_docs/version-stable/test-parallel.mdx @@ -5,6 +5,7 @@ title: "Parallelism" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/test-parameterize.mdx b/nodejs/versioned_docs/version-stable/test-parameterize.mdx index 69eca6dcb0e..39f3af53b8c 100644 --- a/nodejs/versioned_docs/version-stable/test-parameterize.mdx +++ b/nodejs/versioned_docs/version-stable/test-parameterize.mdx @@ -5,6 +5,7 @@ title: "Parameterize tests" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/test-projects.mdx b/nodejs/versioned_docs/version-stable/test-projects.mdx index 1f1456ab125..0c18a730e13 100644 --- a/nodejs/versioned_docs/version-stable/test-projects.mdx +++ b/nodejs/versioned_docs/version-stable/test-projects.mdx @@ -5,6 +5,7 @@ title: "Projects" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/test-reporters.mdx b/nodejs/versioned_docs/version-stable/test-reporters.mdx index fbf782ca202..51d5174dfa0 100644 --- a/nodejs/versioned_docs/version-stable/test-reporters.mdx +++ b/nodejs/versioned_docs/version-stable/test-reporters.mdx @@ -5,6 +5,7 @@ title: "Reporters" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/test-retries.mdx b/nodejs/versioned_docs/version-stable/test-retries.mdx index 72f33d8b90a..c669ed024b3 100644 --- a/nodejs/versioned_docs/version-stable/test-retries.mdx +++ b/nodejs/versioned_docs/version-stable/test-retries.mdx @@ -5,6 +5,7 @@ title: "Retries" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/test-sharding.mdx b/nodejs/versioned_docs/version-stable/test-sharding.mdx index 80cf9156145..d20f8c0a79a 100644 --- a/nodejs/versioned_docs/version-stable/test-sharding.mdx +++ b/nodejs/versioned_docs/version-stable/test-sharding.mdx @@ -5,6 +5,7 @@ title: "Sharding" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/test-snapshots.mdx b/nodejs/versioned_docs/version-stable/test-snapshots.mdx index 1fbe962cc2c..e3c1304744e 100644 --- a/nodejs/versioned_docs/version-stable/test-snapshots.mdx +++ b/nodejs/versioned_docs/version-stable/test-snapshots.mdx @@ -5,6 +5,7 @@ title: "Visual comparisons" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/test-timeouts.mdx b/nodejs/versioned_docs/version-stable/test-timeouts.mdx index 8489d564ed3..8be9ee55a6c 100644 --- a/nodejs/versioned_docs/version-stable/test-timeouts.mdx +++ b/nodejs/versioned_docs/version-stable/test-timeouts.mdx @@ -5,6 +5,7 @@ title: "Timeouts" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Playwright Test has multiple configurable timeouts for various tasks. diff --git a/nodejs/versioned_docs/version-stable/test-typescript.mdx b/nodejs/versioned_docs/version-stable/test-typescript.mdx index 16aa54788e9..14b3ce1d8bd 100644 --- a/nodejs/versioned_docs/version-stable/test-typescript.mdx +++ b/nodejs/versioned_docs/version-stable/test-typescript.mdx @@ -5,6 +5,7 @@ title: "TypeScript" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/test-ui-mode.mdx b/nodejs/versioned_docs/version-stable/test-ui-mode.mdx index 1f08808162a..3b9ecf1efc9 100644 --- a/nodejs/versioned_docs/version-stable/test-ui-mode.mdx +++ b/nodejs/versioned_docs/version-stable/test-ui-mode.mdx @@ -5,6 +5,7 @@ title: "UI Mode" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; import LiteYouTube from '@site/src/components/LiteYouTube'; diff --git a/nodejs/versioned_docs/version-stable/test-use-options.mdx b/nodejs/versioned_docs/version-stable/test-use-options.mdx index a5b69e9f8d1..4840d67a296 100644 --- a/nodejs/versioned_docs/version-stable/test-use-options.mdx +++ b/nodejs/versioned_docs/version-stable/test-use-options.mdx @@ -5,6 +5,7 @@ title: "Test use options" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/test-webserver.mdx b/nodejs/versioned_docs/version-stable/test-webserver.mdx index db68d7d3c82..d267f90feae 100644 --- a/nodejs/versioned_docs/version-stable/test-webserver.mdx +++ b/nodejs/versioned_docs/version-stable/test-webserver.mdx @@ -5,6 +5,7 @@ title: "Web server" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/testing-library.mdx b/nodejs/versioned_docs/version-stable/testing-library.mdx index ce3104e4065..fc64e811ee8 100644 --- a/nodejs/versioned_docs/version-stable/testing-library.mdx +++ b/nodejs/versioned_docs/version-stable/testing-library.mdx @@ -5,6 +5,7 @@ title: "Migrating from Testing Library" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Migration principles diff --git a/nodejs/versioned_docs/version-stable/touch-events.mdx b/nodejs/versioned_docs/version-stable/touch-events.mdx index 512594c7863..3f6444539e4 100644 --- a/nodejs/versioned_docs/version-stable/touch-events.mdx +++ b/nodejs/versioned_docs/version-stable/touch-events.mdx @@ -5,6 +5,7 @@ title: "Touch events (legacy)" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/trace-viewer-intro.mdx b/nodejs/versioned_docs/version-stable/trace-viewer-intro.mdx index 427b8d9f738..49c52a18c91 100644 --- a/nodejs/versioned_docs/version-stable/trace-viewer-intro.mdx +++ b/nodejs/versioned_docs/version-stable/trace-viewer-intro.mdx @@ -5,12 +5,13 @@ title: "Trace viewer" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; import LiteYouTube from '@site/src/components/LiteYouTube'; ## Introduction -Playwright Trace Viewer is a GUI tool that lets you explore recorded Playwright traces of your tests meaning you can go back and forward through each action of your test and visually see what was happening during each action. +Playwright Trace Viewer is a GUI tool that lets you explore recorded Playwright traces of your tests, meaning you can go back and forward through each action of your test and visually see what was happening during each action. **You will learn** - [How to record a trace](/trace-viewer-intro.mdx#recording-a-trace) @@ -21,7 +22,7 @@ Playwright Trace Viewer is a GUI tool that lets you explore recorded Playwright ## Recording a Trace -By default the [playwright.config](./trace-viewer.mdx#tracing-on-ci) file will contain the configuration needed to create a `trace.zip` file for each test. Traces are setup to run `on-first-retry` meaning they will be run on the first retry of a failed test. Also `retries` are set to 2 when running on CI and 0 locally. This means the traces will be recorded on the first retry of a failed test but not on the first run and not on the second retry. +By default the [playwright.config](./trace-viewer.mdx#tracing-on-ci) file contains the configuration needed to create a `trace.zip` file for each test. Traces are setup to run `on-first-retry`, meaning they run on the first retry of a failed test. Also `retries` are set to 2 when running on CI and 0 locally. This means the traces are recorded on the first retry of a failed test but not on the first run and not on the second retry. ```js title="playwright.config.ts" import { defineConfig } from '@playwright/test'; @@ -36,7 +37,7 @@ export default defineConfig({ To learn more about available options to record a trace check out our detailed guide on [Trace Viewer](/trace-viewer.mdx). -Traces are normally run in a Continuous Integration(CI) environment, because locally you can use [UI Mode](/test-ui-mode.mdx) for developing and debugging tests. However, if you want to run traces locally without using [UI Mode](/test-ui-mode.mdx), you can force tracing to be on with `--trace on`. +Traces are normally run in a Continuous Integration (CI) environment, because locally you can use [UI Mode](/test-ui-mode.mdx) for developing and debugging tests. However, if you want to run traces locally without using [UI Mode](/test-ui-mode.mdx), you can force tracing to be on with `--trace on`. ```bash npx playwright test --trace on @@ -44,7 +45,7 @@ npx playwright test --trace on ## Opening the HTML report -The HTML report shows you a report of all your tests that have been run and on which browsers as well as how long they took. Tests can be filtered by passed tests, failed, flaky or skipped tests. You can also search for a particular test. Clicking on a test will open the detailed view where you can see more information on your tests such as the errors, the test steps and the trace. +The HTML report shows you a report of all your tests that have been run and on which browsers as well as how long they took. Tests can be filtered by passed tests, failed, flaky, or skipped tests. You can also search for a particular test. Clicking on a test opens the detailed view where you can see more information on your tests such as the errors, the test steps, and the trace. ```bash npx playwright show-report @@ -52,23 +53,23 @@ npx playwright show-report ## Opening the trace -In the HTML report click on the trace icon next to the test name file name to directly open the trace for the required test. +In the HTML report, click on the trace icon next to the test file name to directly open the trace for the required test. -![playwright html report](https://github.com/microsoft/playwright/assets/13063165/a3da1fb5-6619-4c03-98aa-adf65c376525) + -You can also click open the detailed view of the test and scroll down to the `'Traces'` tab and open the trace by clicking on the trace screenshot. +You can also click to open the detailed view of the test and scroll down to the `'Traces'` tab and open the trace by clicking on the trace screenshot. -![playwright html report detailed view](https://github.com/microsoft/playwright/assets/13063165/2b583d6f-5241-4ecf-83a8-650072d4a201) + -To learn more about reporters check out our detailed guide on reporters including the [HTML Reporter](/test-reporters.mdx#html-reporter). +To learn more about reporters, check out our detailed guide on reporters including the [HTML Reporter](/test-reporters.mdx#html-reporter). ## Viewing the trace -View traces of your test by clicking through each action or hovering using the timeline and see the state of the page before and after the action. Inspect the log, source and network, errors and console during each step of the test. The trace viewer creates a DOM snapshot so you can fully interact with it and open the browser DevTools to inspect the HTML, CSS, etc. +View traces of your test by clicking through each action or hovering using the timeline and see the state of the page before and after the action. Inspect the log, source and network, errors, and console during each step of the test. The trace viewer creates a DOM snapshot so you can fully interact with it and open the browser DevTools to inspect the HTML, CSS, etc. -![playwright trace viewer](https://github.com/microsoft/playwright/assets/13063165/10fe3585-8401-4051-b1c2-b2e92ac4c274) + -To learn more about traces check out our detailed guide on [Trace Viewer](/trace-viewer.mdx). +To learn more about traces, check out our detailed guide on [Trace Viewer](/trace-viewer.mdx). ## What's next - [Run tests on CI with GitHub Actions](/ci-intro.mdx) diff --git a/nodejs/versioned_docs/version-stable/trace-viewer.mdx b/nodejs/versioned_docs/version-stable/trace-viewer.mdx index ec1c1203ce3..a49c77d8f10 100644 --- a/nodejs/versioned_docs/version-stable/trace-viewer.mdx +++ b/nodejs/versioned_docs/version-stable/trace-viewer.mdx @@ -5,6 +5,7 @@ title: "Trace viewer" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; import LiteYouTube from '@site/src/components/LiteYouTube'; diff --git a/nodejs/versioned_docs/version-stable/videos.mdx b/nodejs/versioned_docs/version-stable/videos.mdx index 6c9aac0f9eb..97f36629f14 100644 --- a/nodejs/versioned_docs/version-stable/videos.mdx +++ b/nodejs/versioned_docs/version-stable/videos.mdx @@ -5,6 +5,7 @@ title: "Videos" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/webview2.mdx b/nodejs/versioned_docs/version-stable/webview2.mdx index 88f8b4d7f47..08057683c7a 100644 --- a/nodejs/versioned_docs/version-stable/webview2.mdx +++ b/nodejs/versioned_docs/version-stable/webview2.mdx @@ -5,6 +5,7 @@ title: "WebView2" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/nodejs/versioned_docs/version-stable/writing-tests.mdx b/nodejs/versioned_docs/version-stable/writing-tests.mdx index 0fd26a9e68b..3b960f614e8 100644 --- a/nodejs/versioned_docs/version-stable/writing-tests.mdx +++ b/nodejs/versioned_docs/version-stable/writing-tests.mdx @@ -5,18 +5,13 @@ title: "Writing tests" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction -Playwright tests are simple, they -- **perform actions**, and -- **assert the state** against expectations. +Playwright tests are simple: they **perform actions** and **assert the state** against expectations. -There is no need to wait for anything prior to performing an action: Playwright automatically waits for the wide range of [actionability](./actionability.mdx) checks to pass prior to performing each action. - -There is also no need to deal with the race conditions when performing the checks - Playwright assertions are designed in a way that they describe the expectations that need to be eventually met. - -That's it! These design choices allow Playwright users to forget about flaky timeouts and racy checks in their tests altogether. +Playwright automatically waits for [actionability](./actionability.mdx) checks to pass before performing each action. You don't need to add manual waits or deal with race conditions. Playwright assertions are designed to describe expectations that will eventually be met, eliminating flaky timeouts and racy checks. **You will learn** - [How to write the first test](/writing-tests.mdx#first-test) @@ -58,17 +53,19 @@ Add `// @ts-check` at the start of each test file when using JavaScript in VS Co ### Navigation -Most of the tests will start with navigating page to the URL. After that, test will be able to interact with the page elements. +Most tests start by navigating to a URL. After that, the test interacts with page elements. ```js await page.goto('https://playwright.dev/'); ``` -Playwright will wait for page to reach the load state prior to moving forward. Learn more about the [page.goto()](/api/class-page.mdx#page-goto) options. +Playwright waits for the page to reach the load state before continuing. Learn more about [page.goto()](/api/class-page.mdx#page-goto) options. ### Interactions -Performing actions starts with locating the elements. Playwright uses [Locators API](./locators.mdx) for that. Locators represent a way to find element(s) on the page at any moment, learn more about the [different types](./locators.mdx) of locators available. Playwright will wait for the element to be [actionable](./actionability.mdx) prior to performing the action, so there is no need to wait for it to become available. +Performing actions starts with locating elements. Playwright uses [Locators API](./locators.mdx) for that. Locators represent a way to find element(s) on the page at any moment. Learn more about the [different types](./locators.mdx) of locators available. + +Playwright waits for the element to be [actionable](./actionability.mdx) before performing the action, so you don't need to wait for it to become available. ```js // Create a locator. @@ -86,7 +83,7 @@ await page.getByRole('link', { name: 'Get started' }).click(); ### Basic actions -This is the list of the most popular Playwright actions. Note that there are many more, so make sure to check the [Locator API](./api/class-locator.mdx) section to learn more about them. +Here are the most popular Playwright actions. For the complete list, check the [Locator API](./api/class-locator.mdx) section. | Action | Description | | :- | :- | @@ -104,19 +101,13 @@ This is the list of the most popular Playwright actions. Note that there are man Playwright includes [test assertions](./test-assertions.mdx) in the form of `expect` function. To make an assertion, call `expect(value)` and choose a matcher that reflects the expectation. -There are many generic matchers like `toEqual`, `toContain`, `toBeTruthy` that can be used to assert any conditions. - -```js -expect(success).toBeTruthy(); -``` - -Playwright also includes async matchers that will wait until the expected condition is met. Using these matchers allows making the tests non-flaky and resilient. For example, this code will wait until the page gets the title containing "Playwright": +Playwright includes async matchers that wait until the expected condition is met. Using these matchers makes tests non-flaky and resilient. For example, this code waits until the page gets the title containing "Playwright": ```js await expect(page).toHaveTitle(/Playwright/); ``` -Here is the list of the most popular async assertions. Note that there are [many more](./test-assertions.mdx) to get familiar with: +Here are the most popular async assertions. For the complete list, see [assertions guide](./test-assertions.mdx): | Assertion | Description | | :- | :- | @@ -131,9 +122,15 @@ Here is the list of the most popular async assertions. Note that there are [many | [expect(page).toHaveTitle()](/api/class-pageassertions.mdx#page-assertions-to-have-title) | Page has title | | [expect(page).toHaveURL()](/api/class-pageassertions.mdx#page-assertions-to-have-url) | Page has URL | +Playwright also includes generic matchers like `toEqual`, `toContain`, `toBeTruthy` that can be used to assert any conditions. These assertions do not use the `await` keyword as they perform immediate synchronous checks on already available values. + +```js +expect(success).toBeTruthy(); +``` + ### Test Isolation -Playwright Test is based on the concept of [test fixtures](./test-fixtures.mdx) such as the [built in page fixture](./test-fixtures#built-in-fixtures), which is passed into your test. Pages are [isolated between tests due to the Browser Context](./browser-contexts), which is equivalent to a brand new browser profile, where every test gets a fresh environment, even when multiple tests run in a single Browser. +Playwright Test is based on the concept of [test fixtures](./test-fixtures.mdx) such as the [built in page fixture](./test-fixtures#built-in-fixtures), which is passed into your test. Pages are [isolated between tests due to the Browser Context](./browser-contexts), which is equivalent to a brand new browser profile. Every test gets a fresh environment, even when multiple tests run in a single browser. ```js title="tests/example.spec.ts" import { test } from '@playwright/test'; diff --git a/python/versioned_docs/version-stable/actionability.mdx b/python/versioned_docs/version-stable/actionability.mdx index fb99122e471..25e11bb11c3 100644 --- a/python/versioned_docs/version-stable/actionability.mdx +++ b/python/versioned_docs/version-stable/actionability.mdx @@ -5,6 +5,7 @@ title: "Auto-waiting" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/python/versioned_docs/version-stable/api-testing.mdx b/python/versioned_docs/version-stable/api-testing.mdx index 7e85be1d45b..d8d01a10e77 100644 --- a/python/versioned_docs/version-stable/api-testing.mdx +++ b/python/versioned_docs/version-stable/api-testing.mdx @@ -5,6 +5,7 @@ title: "API testing" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/python/versioned_docs/version-stable/api/class-accessibility.mdx b/python/versioned_docs/version-stable/api/class-accessibility.mdx index 99816e181ec..65d0b8bd920 100644 --- a/python/versioned_docs/version-stable/api/class-accessibility.mdx +++ b/python/versioned_docs/version-stable/api/class-accessibility.mdx @@ -5,6 +5,7 @@ title: "Accessibility" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; :::warning[Deprecated] diff --git a/python/versioned_docs/version-stable/api/class-apirequest.mdx b/python/versioned_docs/version-stable/api/class-apirequest.mdx index 388d3c7e0fe..1aca54a8756 100644 --- a/python/versioned_docs/version-stable/api/class-apirequest.mdx +++ b/python/versioned_docs/version-stable/api/class-apirequest.mdx @@ -5,6 +5,7 @@ title: "APIRequest" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Exposes API that can be used for the Web API testing. This class is used for creating [APIRequestContext] instance which in turn can be used for sending web requests. An instance of this class can be obtained via [playwright.request](/api/class-playwright.mdx#playwright-request). For more information see [APIRequestContext]. @@ -66,6 +67,8 @@ api_request.new_context(**kwargs) An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`, a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally, `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided with an exact match to the request origin that the certificate is valid for. + Client certificate authentication is only active when at least one client certificate is provided. If you want to reject all client certificates sent by the server, you need to provide a client certificate with an `origin` that does not match any of the domains you plan to visit. + :::note When using WebKit on macOS, accessing `localhost` will not pick up client certificates. You can make it work by replacing `localhost` with `local.playwright`. diff --git a/python/versioned_docs/version-stable/api/class-apirequestcontext.mdx b/python/versioned_docs/version-stable/api/class-apirequestcontext.mdx index ae545e9920b..7ddd1d11124 100644 --- a/python/versioned_docs/version-stable/api/class-apirequestcontext.mdx +++ b/python/versioned_docs/version-stable/api/class-apirequestcontext.mdx @@ -5,6 +5,7 @@ title: "APIRequestContext" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; This API is used for the Web API testing. You can use it to trigger API endpoints, configure micro-services, prepare environment or the service to your e2e test. diff --git a/python/versioned_docs/version-stable/api/class-apiresponse.mdx b/python/versioned_docs/version-stable/api/class-apiresponse.mdx index 55e1dc1f8e3..ed8442f0682 100644 --- a/python/versioned_docs/version-stable/api/class-apiresponse.mdx +++ b/python/versioned_docs/version-stable/api/class-apiresponse.mdx @@ -5,6 +5,7 @@ title: "APIResponse" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [APIResponse] class represents responses returned by [api_request_context.get()](/api/class-apirequestcontext.mdx#api-request-context-get) and similar methods. diff --git a/python/versioned_docs/version-stable/api/class-apiresponseassertions.mdx b/python/versioned_docs/version-stable/api/class-apiresponseassertions.mdx index ee3282a9682..03d8af7a0aa 100644 --- a/python/versioned_docs/version-stable/api/class-apiresponseassertions.mdx +++ b/python/versioned_docs/version-stable/api/class-apiresponseassertions.mdx @@ -5,6 +5,7 @@ title: "APIResponseAssertions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The [APIResponseAssertions] class provides assertion methods that can be used to make assertions about the [APIResponse] in the tests. diff --git a/python/versioned_docs/version-stable/api/class-browser.mdx b/python/versioned_docs/version-stable/api/class-browser.mdx index 156b00c9de0..ec14e0ad221 100644 --- a/python/versioned_docs/version-stable/api/class-browser.mdx +++ b/python/versioned_docs/version-stable/api/class-browser.mdx @@ -5,6 +5,7 @@ title: "Browser" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; A Browser is created via [browser_type.launch()](/api/class-browsertype.mdx#browser-type-launch). An example of using a [Browser] to create a [Page]: @@ -215,6 +216,8 @@ await browser.close() An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`, a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally, `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided with an exact match to the request origin that the certificate is valid for. + Client certificate authentication is only active when at least one client certificate is provided. If you want to reject all client certificates sent by the server, you need to provide a client certificate with an `origin` that does not match any of the domains you plan to visit. + :::note When using WebKit on macOS, accessing `localhost` will not pick up client certificates. You can make it work by replacing `localhost` with `local.playwright`. @@ -470,6 +473,8 @@ browser.new_page(**kwargs) An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`, a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally, `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided with an exact match to the request origin that the certificate is valid for. + Client certificate authentication is only active when at least one client certificate is provided. If you want to reject all client certificates sent by the server, you need to provide a client certificate with an `origin` that does not match any of the domains you plan to visit. + :::note When using WebKit on macOS, accessing `localhost` will not pick up client certificates. You can make it work by replacing `localhost` with `local.playwright`. diff --git a/python/versioned_docs/version-stable/api/class-browsercontext.mdx b/python/versioned_docs/version-stable/api/class-browsercontext.mdx index 6d3d5e37dcd..177ac6091a2 100644 --- a/python/versioned_docs/version-stable/api/class-browsercontext.mdx +++ b/python/versioned_docs/version-stable/api/class-browsercontext.mdx @@ -5,6 +5,7 @@ title: "BrowserContext" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; BrowserContexts provide a way to operate multiple independent browser sessions. diff --git a/python/versioned_docs/version-stable/api/class-browsertype.mdx b/python/versioned_docs/version-stable/api/class-browsertype.mdx index 73f3ede9c09..9279dae786b 100644 --- a/python/versioned_docs/version-stable/api/class-browsertype.mdx +++ b/python/versioned_docs/version-stable/api/class-browsertype.mdx @@ -5,6 +5,7 @@ title: "BrowserType" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; BrowserType provides methods to launch a specific browser instance or connect to an existing one. The following is a typical example of using Playwright to drive automation: @@ -332,6 +333,12 @@ browser_type.launch_persistent_context(user_data_dir, **kwargs) More details for [Chromium](https://chromium.googlesource.com/chromium/src/+/master/docs/user_data_dir.md#introduction) and [Firefox](https://wiki.mozilla.org/Firefox/CommandLineOptions#User_profile). Chromium's user data directory is the **parent** directory of the "Profile Path" seen at `chrome://version`. Note that browsers do not allow launching multiple instances with the same User Data Directory. + + :::warning + + Chromium/Chrome: Due to recent Chrome policy changes, automating the default Chrome user profile is not supported. Pointing `userDataDir` to Chrome's main "User Data" directory (the profile used for your regular browsing) may result in pages not loading or the browser exiting. Create and use a separate directory (for example, an empty folder) as your automation profile instead. See https://developer.chrome.com/blog/remote-debugging-port for details. + ::: + - `accept_downloads` [bool] *(optional)*# Whether to automatically download all the attachments. Defaults to `true` where all the downloads are accepted. @@ -394,6 +401,8 @@ browser_type.launch_persistent_context(user_data_dir, **kwargs) An array of client certificates to be used. Each certificate object must have either both `certPath` and `keyPath`, a single `pfxPath`, or their corresponding direct value equivalents (`cert` and `key`, or `pfx`). Optionally, `passphrase` property should be provided if the certificate is encrypted. The `origin` property should be provided with an exact match to the request origin that the certificate is valid for. + Client certificate authentication is only active when at least one client certificate is provided. If you want to reject all client certificates sent by the server, you need to provide a client certificate with an `origin` that does not match any of the domains you plan to visit. + :::note When using WebKit on macOS, accessing `localhost` will not pick up client certificates. You can make it work by replacing `localhost` with `local.playwright`. diff --git a/python/versioned_docs/version-stable/api/class-cdpsession.mdx b/python/versioned_docs/version-stable/api/class-cdpsession.mdx index c9a4ff6dae0..03ef6d2532b 100644 --- a/python/versioned_docs/version-stable/api/class-cdpsession.mdx +++ b/python/versioned_docs/version-stable/api/class-cdpsession.mdx @@ -5,6 +5,7 @@ title: "CDPSession" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The `CDPSession` instances are used to talk raw Chrome Devtools Protocol: diff --git a/python/versioned_docs/version-stable/api/class-clock.mdx b/python/versioned_docs/version-stable/api/class-clock.mdx index fb3dd0ece9a..cd5633f1243 100644 --- a/python/versioned_docs/version-stable/api/class-clock.mdx +++ b/python/versioned_docs/version-stable/api/class-clock.mdx @@ -5,6 +5,7 @@ title: "Clock" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Accurately simulating time-dependent behavior is essential for verifying the correctness of applications. Learn more about [clock emulation](../clock.mdx). diff --git a/python/versioned_docs/version-stable/api/class-consolemessage.mdx b/python/versioned_docs/version-stable/api/class-consolemessage.mdx index c59988a3847..7582d15d1f4 100644 --- a/python/versioned_docs/version-stable/api/class-consolemessage.mdx +++ b/python/versioned_docs/version-stable/api/class-consolemessage.mdx @@ -5,6 +5,7 @@ title: "ConsoleMessage" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [ConsoleMessage] objects are dispatched by page via the [page.on("console")](/api/class-page.mdx#page-event-console) event. For each console message logged in the page there will be corresponding event in the Playwright context. diff --git a/python/versioned_docs/version-stable/api/class-dialog.mdx b/python/versioned_docs/version-stable/api/class-dialog.mdx index 42f2736e568..e90458e3167 100644 --- a/python/versioned_docs/version-stable/api/class-dialog.mdx +++ b/python/versioned_docs/version-stable/api/class-dialog.mdx @@ -5,6 +5,7 @@ title: "Dialog" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [Dialog] objects are dispatched by page via the [page.on("dialog")](/api/class-page.mdx#page-event-dialog) event. diff --git a/python/versioned_docs/version-stable/api/class-download.mdx b/python/versioned_docs/version-stable/api/class-download.mdx index 8c5089e052c..5d954176d1a 100644 --- a/python/versioned_docs/version-stable/api/class-download.mdx +++ b/python/versioned_docs/version-stable/api/class-download.mdx @@ -5,6 +5,7 @@ title: "Download" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [Download] objects are dispatched by page via the [page.on("download")](/api/class-page.mdx#page-event-download) event. diff --git a/python/versioned_docs/version-stable/api/class-elementhandle.mdx b/python/versioned_docs/version-stable/api/class-elementhandle.mdx index 140ffd377a2..b268ba1da91 100644 --- a/python/versioned_docs/version-stable/api/class-elementhandle.mdx +++ b/python/versioned_docs/version-stable/api/class-elementhandle.mdx @@ -5,6 +5,7 @@ title: "ElementHandle" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; * extends: [JSHandle] diff --git a/python/versioned_docs/version-stable/api/class-error.mdx b/python/versioned_docs/version-stable/api/class-error.mdx index 7afaa2c2102..fe5887318ab 100644 --- a/python/versioned_docs/version-stable/api/class-error.mdx +++ b/python/versioned_docs/version-stable/api/class-error.mdx @@ -5,6 +5,7 @@ title: "Error" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; * extends: [Exception] diff --git a/python/versioned_docs/version-stable/api/class-filechooser.mdx b/python/versioned_docs/version-stable/api/class-filechooser.mdx index 686484d1323..0f802243a24 100644 --- a/python/versioned_docs/version-stable/api/class-filechooser.mdx +++ b/python/versioned_docs/version-stable/api/class-filechooser.mdx @@ -5,6 +5,7 @@ title: "FileChooser" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [FileChooser] objects are dispatched by the page in the [page.on("filechooser")](/api/class-page.mdx#page-event-file-chooser) event. diff --git a/python/versioned_docs/version-stable/api/class-frame.mdx b/python/versioned_docs/version-stable/api/class-frame.mdx index efffa94f093..b2553eddbff 100644 --- a/python/versioned_docs/version-stable/api/class-frame.mdx +++ b/python/versioned_docs/version-stable/api/class-frame.mdx @@ -5,6 +5,7 @@ title: "Frame" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; At every point of time, page exposes its current frame tree via the [page.main_frame](/api/class-page.mdx#page-main-frame) and [frame.child_frames](/api/class-frame.mdx#frame-child-frames) methods. diff --git a/python/versioned_docs/version-stable/api/class-framelocator.mdx b/python/versioned_docs/version-stable/api/class-framelocator.mdx index 6c8a9e9b184..0f8466fe30d 100644 --- a/python/versioned_docs/version-stable/api/class-framelocator.mdx +++ b/python/versioned_docs/version-stable/api/class-framelocator.mdx @@ -5,6 +5,7 @@ title: "FrameLocator" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; FrameLocator represents a view to the `iframe` on the page. It captures the logic sufficient to retrieve the `iframe` and locate elements in that iframe. FrameLocator can be created with either [locator.content_frame](/api/class-locator.mdx#locator-content-frame), [page.frame_locator()](/api/class-page.mdx#page-frame-locator) or [locator.frame_locator()](/api/class-locator.mdx#locator-frame-locator) method. diff --git a/python/versioned_docs/version-stable/api/class-jshandle.mdx b/python/versioned_docs/version-stable/api/class-jshandle.mdx index fb7c05dd4b0..16d2048fe4b 100644 --- a/python/versioned_docs/version-stable/api/class-jshandle.mdx +++ b/python/versioned_docs/version-stable/api/class-jshandle.mdx @@ -5,6 +5,7 @@ title: "JSHandle" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; JSHandle represents an in-page JavaScript object. JSHandles can be created with the [page.evaluate_handle()](/api/class-page.mdx#page-evaluate-handle) method. diff --git a/python/versioned_docs/version-stable/api/class-keyboard.mdx b/python/versioned_docs/version-stable/api/class-keyboard.mdx index 081287e132d..75a3f8d9166 100644 --- a/python/versioned_docs/version-stable/api/class-keyboard.mdx +++ b/python/versioned_docs/version-stable/api/class-keyboard.mdx @@ -5,6 +5,7 @@ title: "Keyboard" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Keyboard provides an api for managing a virtual keyboard. The high level api is [keyboard.type()](/api/class-keyboard.mdx#keyboard-type), which takes raw characters and generates proper `keydown`, `keypress`/`input`, and `keyup` events on your page. diff --git a/python/versioned_docs/version-stable/api/class-locator.mdx b/python/versioned_docs/version-stable/api/class-locator.mdx index 65f0f774aea..bb2976d3c48 100644 --- a/python/versioned_docs/version-stable/api/class-locator.mdx +++ b/python/versioned_docs/version-stable/api/class-locator.mdx @@ -5,6 +5,7 @@ title: "Locator" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Locators are the central piece of Playwright's auto-waiting and retry-ability. In a nutshell, locators represent a way to find element(s) on the page at any moment. A locator can be created with the [page.locator()](/api/class-page.mdx#page-locator) method. diff --git a/python/versioned_docs/version-stable/api/class-locatorassertions.mdx b/python/versioned_docs/version-stable/api/class-locatorassertions.mdx index 038085b15ca..f918e2147c0 100644 --- a/python/versioned_docs/version-stable/api/class-locatorassertions.mdx +++ b/python/versioned_docs/version-stable/api/class-locatorassertions.mdx @@ -5,6 +5,7 @@ title: "LocatorAssertions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The [LocatorAssertions] class provides assertion methods that can be used to make assertions about the [Locator] state in the tests. diff --git a/python/versioned_docs/version-stable/api/class-mouse.mdx b/python/versioned_docs/version-stable/api/class-mouse.mdx index 48a001261bd..56fe66fd9ff 100644 --- a/python/versioned_docs/version-stable/api/class-mouse.mdx +++ b/python/versioned_docs/version-stable/api/class-mouse.mdx @@ -5,6 +5,7 @@ title: "Mouse" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The Mouse class operates in main-frame CSS pixels relative to the top-left corner of the viewport. diff --git a/python/versioned_docs/version-stable/api/class-page.mdx b/python/versioned_docs/version-stable/api/class-page.mdx index 1b44d8dcb6e..9cbc99f7407 100644 --- a/python/versioned_docs/version-stable/api/class-page.mdx +++ b/python/versioned_docs/version-stable/api/class-page.mdx @@ -5,6 +5,7 @@ title: "Page" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Page provides methods to interact with a single tab in a [Browser], or an [extension background page](https://developer.chrome.com/extensions/background_pages) in Chromium. One [Browser] instance might have multiple [Page] instances. @@ -202,7 +203,7 @@ page.get_by_role("button", name="Start here").click() ```py # Setup the handler. -def handler(): +async def handler(): await page.get_by_role("button", name="No thanks").click() await page.add_locator_handler(page.get_by_text("Sign up to the newsletter"), handler) @@ -242,7 +243,7 @@ page.get_by_role("button", name="Start here").click() ```py # Setup the handler. -def handler(): +async def handler(): await page.get_by_role("button", name="Remind me later").click() await page.add_locator_handler(page.get_by_text("Confirm your security details"), handler) @@ -282,7 +283,7 @@ page.get_by_role("button", name="Start here").click() ```py # Setup the handler. -def handler(): +async def handler(): await page.evaluate("window.removeObstructionsForTestIfNeeded()") await page.add_locator_handler(page.locator("body"), handler, no_wait_after=True) @@ -316,7 +317,7 @@ page.add_locator_handler(page.get_by_label("Close"), handler, times=1) ```py -def handler(locator): +async def handler(locator): await locator.click() await page.add_locator_handler(page.get_by_label("Close"), handler, times=1) ``` @@ -2201,7 +2202,7 @@ page.opener() Added in: v1.9page.pause -Pauses script execution. Playwright will stop executing the script and wait for the user to either press 'Resume' button in the page overlay or to call `playwright.resume()` in the DevTools console. +Pauses script execution. Playwright will stop executing the script and wait for the user to either press the 'Resume' button in the page overlay or to call `playwright.resume()` in the DevTools console. User can inspect selectors or perform manual steps while paused. Resume will continue running the original script from the place it was paused. diff --git a/python/versioned_docs/version-stable/api/class-pageassertions.mdx b/python/versioned_docs/version-stable/api/class-pageassertions.mdx index c4ccdb63773..94f14471ed4 100644 --- a/python/versioned_docs/version-stable/api/class-pageassertions.mdx +++ b/python/versioned_docs/version-stable/api/class-pageassertions.mdx @@ -5,6 +5,7 @@ title: "PageAssertions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The [PageAssertions] class provides assertion methods that can be used to make assertions about the [Page] state in the tests. diff --git a/python/versioned_docs/version-stable/api/class-playwright.mdx b/python/versioned_docs/version-stable/api/class-playwright.mdx index 34e089eedde..de7f24ef3f4 100644 --- a/python/versioned_docs/version-stable/api/class-playwright.mdx +++ b/python/versioned_docs/version-stable/api/class-playwright.mdx @@ -5,6 +5,7 @@ title: "Playwright" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Playwright module provides a method to launch a browser instance. The following is a typical example of using Playwright to drive automation: diff --git a/python/versioned_docs/version-stable/api/class-request.mdx b/python/versioned_docs/version-stable/api/class-request.mdx index 98610ce4a86..1c85734a622 100644 --- a/python/versioned_docs/version-stable/api/class-request.mdx +++ b/python/versioned_docs/version-stable/api/class-request.mdx @@ -5,6 +5,7 @@ title: "Request" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Whenever the page sends a request for a network resource the following sequence of events are emitted by [Page]: diff --git a/python/versioned_docs/version-stable/api/class-response.mdx b/python/versioned_docs/version-stable/api/class-response.mdx index 415c87769a6..2aaa41f43e2 100644 --- a/python/versioned_docs/version-stable/api/class-response.mdx +++ b/python/versioned_docs/version-stable/api/class-response.mdx @@ -5,6 +5,7 @@ title: "Response" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [Response] class represents responses which are received by page. diff --git a/python/versioned_docs/version-stable/api/class-route.mdx b/python/versioned_docs/version-stable/api/class-route.mdx index eb4f23c7b3d..9de5bcee50b 100644 --- a/python/versioned_docs/version-stable/api/class-route.mdx +++ b/python/versioned_docs/version-stable/api/class-route.mdx @@ -5,6 +5,7 @@ title: "Route" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Whenever a network route is set up with [page.route()](/api/class-page.mdx#page-route) or [browser_context.route()](/api/class-browsercontext.mdx#browser-context-route), the `Route` object allows to handle the route. diff --git a/python/versioned_docs/version-stable/api/class-selectors.mdx b/python/versioned_docs/version-stable/api/class-selectors.mdx index fd640114f3c..18af6b334de 100644 --- a/python/versioned_docs/version-stable/api/class-selectors.mdx +++ b/python/versioned_docs/version-stable/api/class-selectors.mdx @@ -5,6 +5,7 @@ title: "Selectors" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Selectors can be used to install custom selector engines. See [extensibility](../extensibility.mdx) for more information. diff --git a/python/versioned_docs/version-stable/api/class-timeouterror.mdx b/python/versioned_docs/version-stable/api/class-timeouterror.mdx index 813d2b1fb7f..857c1fdf088 100644 --- a/python/versioned_docs/version-stable/api/class-timeouterror.mdx +++ b/python/versioned_docs/version-stable/api/class-timeouterror.mdx @@ -5,6 +5,7 @@ title: "TimeoutError" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; * extends: [Error] diff --git a/python/versioned_docs/version-stable/api/class-touchscreen.mdx b/python/versioned_docs/version-stable/api/class-touchscreen.mdx index 91aa8b53b0e..1c413ca227d 100644 --- a/python/versioned_docs/version-stable/api/class-touchscreen.mdx +++ b/python/versioned_docs/version-stable/api/class-touchscreen.mdx @@ -5,6 +5,7 @@ title: "Touchscreen" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The Touchscreen class operates in main-frame CSS pixels relative to the top-left corner of the viewport. Methods on the touchscreen can only be used in browser contexts that have been initialized with `hasTouch` set to true. diff --git a/python/versioned_docs/version-stable/api/class-tracing.mdx b/python/versioned_docs/version-stable/api/class-tracing.mdx index e81235ccc09..a07e89c645a 100644 --- a/python/versioned_docs/version-stable/api/class-tracing.mdx +++ b/python/versioned_docs/version-stable/api/class-tracing.mdx @@ -5,6 +5,7 @@ title: "Tracing" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; API for collecting and saving Playwright traces. Playwright traces can be opened in [Trace Viewer](../trace-viewer.mdx) after Playwright script runs. diff --git a/python/versioned_docs/version-stable/api/class-video.mdx b/python/versioned_docs/version-stable/api/class-video.mdx index 616fbab6943..29e36dbcf35 100644 --- a/python/versioned_docs/version-stable/api/class-video.mdx +++ b/python/versioned_docs/version-stable/api/class-video.mdx @@ -5,6 +5,7 @@ title: "Video" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; When browser context is created with the `recordVideo` option, each page has a video object associated with it. diff --git a/python/versioned_docs/version-stable/api/class-weberror.mdx b/python/versioned_docs/version-stable/api/class-weberror.mdx index d5e3a5ba047..12df8589282 100644 --- a/python/versioned_docs/version-stable/api/class-weberror.mdx +++ b/python/versioned_docs/version-stable/api/class-weberror.mdx @@ -5,6 +5,7 @@ title: "WebError" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; [WebError] class represents an unhandled exception thrown in the page. It is dispatched via the [browser_context.on("weberror")](/api/class-browsercontext.mdx#browser-context-event-web-error) event. diff --git a/python/versioned_docs/version-stable/api/class-websocket.mdx b/python/versioned_docs/version-stable/api/class-websocket.mdx index 7a7feca871e..8af12b5b3a9 100644 --- a/python/versioned_docs/version-stable/api/class-websocket.mdx +++ b/python/versioned_docs/version-stable/api/class-websocket.mdx @@ -5,6 +5,7 @@ title: "WebSocket" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The [WebSocket] class represents WebSocket connections within a page. It provides the ability to inspect and manipulate the data being transmitted and received. diff --git a/python/versioned_docs/version-stable/api/class-websocketroute.mdx b/python/versioned_docs/version-stable/api/class-websocketroute.mdx index 4bbf1e75a35..a19c343ff50 100644 --- a/python/versioned_docs/version-stable/api/class-websocketroute.mdx +++ b/python/versioned_docs/version-stable/api/class-websocketroute.mdx @@ -5,6 +5,7 @@ title: "WebSocketRoute" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; Whenever a [`WebSocket`](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket) route is set up with [page.route_web_socket()](/api/class-page.mdx#page-route-web-socket) or [browser_context.route_web_socket()](/api/class-browsercontext.mdx#browser-context-route-web-socket), the `WebSocketRoute` object allows to handle the WebSocket, like an actual server would do. diff --git a/python/versioned_docs/version-stable/api/class-worker.mdx b/python/versioned_docs/version-stable/api/class-worker.mdx index e628e7adecb..e8669406024 100644 --- a/python/versioned_docs/version-stable/api/class-worker.mdx +++ b/python/versioned_docs/version-stable/api/class-worker.mdx @@ -5,6 +5,7 @@ title: "Worker" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; The Worker class represents a [WebWorker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API). `worker` event is emitted on the page object to signal a worker creation. `close` event is emitted on the worker object when the worker is gone. diff --git a/python/versioned_docs/version-stable/aria-snapshots.mdx b/python/versioned_docs/version-stable/aria-snapshots.mdx index a4243ddf0dd..8878f8a0163 100644 --- a/python/versioned_docs/version-stable/aria-snapshots.mdx +++ b/python/versioned_docs/version-stable/aria-snapshots.mdx @@ -5,6 +5,7 @@ title: "Snapshot testing" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; import LiteYouTube from '@site/src/components/LiteYouTube'; diff --git a/python/versioned_docs/version-stable/auth.mdx b/python/versioned_docs/version-stable/auth.mdx index 8e07a25a9ba..25ef3b6938c 100644 --- a/python/versioned_docs/version-stable/auth.mdx +++ b/python/versioned_docs/version-stable/auth.mdx @@ -5,6 +5,7 @@ title: "Authentication" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/python/versioned_docs/version-stable/browser-contexts.mdx b/python/versioned_docs/version-stable/browser-contexts.mdx index acca34dd20b..5089593fc15 100644 --- a/python/versioned_docs/version-stable/browser-contexts.mdx +++ b/python/versioned_docs/version-stable/browser-contexts.mdx @@ -5,6 +5,7 @@ title: "Isolation" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/python/versioned_docs/version-stable/browsers.mdx b/python/versioned_docs/version-stable/browsers.mdx index d04254032f6..3c9256471e4 100644 --- a/python/versioned_docs/version-stable/browsers.mdx +++ b/python/versioned_docs/version-stable/browsers.mdx @@ -5,6 +5,7 @@ title: "Browsers" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -402,6 +403,45 @@ playwright install +## Using a pre-installed Node.js + + + + +```bash +pip install playwright +PLAYWRIGHT_NODEJS_PATH="/usr/local/bin/node" playwright install +``` + + + + +```powershell +$Env:PLAYWRIGHT_NODEJS_PATH="C:\Program Files\nodejs\node.exe" +pip install playwright +playwright install +``` + + + + +```batch +set PLAYWRIGHT_NODEJS_PATH=C:\Program Files\nodejs\node.exe +pip install playwright +playwright install +``` + + + + ## Managing browser binaries Playwright downloads Chromium, WebKit and Firefox browsers into the OS-specific cache folders: diff --git a/python/versioned_docs/version-stable/chrome-extensions.mdx b/python/versioned_docs/version-stable/chrome-extensions.mdx index 6ce0d59914a..c38650b3e11 100644 --- a/python/versioned_docs/version-stable/chrome-extensions.mdx +++ b/python/versioned_docs/version-stable/chrome-extensions.mdx @@ -5,12 +5,15 @@ title: "Chrome extensions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction :::note -Extensions only work in Chrome / Chromium launched with a persistent context. Use custom browser args at your own risk, as some of them may break Playwright functionality. +Extensions only work in Chromium when launched with a persistent context. Use custom browser args at your own risk, as some of them may break Playwright functionality. + +Google Chrome and Microsoft Edge [removed the command-line flags needed to side-load extensions](https://groups.google.com/a/chromium.org/g/chromium-extensions/c/FxMU1TvxWWg/m/daZVTYNlBQAJ), so use Chromium that comes bundled with Playwright. ::: The snippet below retrieves the [service worker](https://developer.chrome.com/docs/extensions/develop/concepts/service-workers) of a [Manifest v3](https://developer.chrome.com/docs/extensions/develop/migrate) extension whose source is located in `./my-extension`. diff --git a/python/versioned_docs/version-stable/ci-intro.mdx b/python/versioned_docs/version-stable/ci-intro.mdx index 568d68045e9..5c2d47ea008 100644 --- a/python/versioned_docs/version-stable/ci-intro.mdx +++ b/python/versioned_docs/version-stable/ci-intro.mdx @@ -5,10 +5,11 @@ title: "Setting up CI" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction -Playwright tests can be run on any CI provider. In this section we will cover running tests on GitHub using GitHub actions. If you would like to see how to configure other CI providers check out our detailed doc on Continuous Integration. +Playwright tests can be run on any CI provider. In this section we cover running tests on GitHub using GitHub Actions. If you would like to see how to configure other CI providers, check out our detailed doc on Continuous Integration. #### You will learn - [How to set up GitHub Actions](/ci-intro.mdx#setting-up-github-actions) @@ -17,7 +18,7 @@ Playwright tests can be run on any CI provider. In this section we will cover ru ## Setting up GitHub Actions -To add a [GitHub Actions](https://docs.github.com/en/actions) file first create `.github/workflows` folder and inside it add a `playwright.yml` file containing the example code below so that your tests will run on each push and pull request for the main/master branch. +To add a [GitHub Actions](https://docs.github.com/en/actions) file, first create `.github/workflows` folder and inside it add a `playwright.yml` file containing the example code below so that your tests run on each push and pull request for the main/master branch. ```yml title=".github/workflows/playwright.yml" name: Playwright Tests @@ -62,21 +63,21 @@ Looking at the list of steps in `jobs.test.steps`, you can see that the workflow ## Create a Repo and Push to GitHub -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. +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. ###### Create a Repo and Push to GitHub ## Opening the Workflows -Click on the **Actions** tab to see the workflows. Here you will see if your tests have passed or failed. +Click on the **Actions** tab to see the workflows. Here you see if your tests have passed or failed. ###### ![opening the workflow](https://user-images.githubusercontent.com/13063165/183423783-58bf2008-514e-4f96-9c12-c9a55703960c.png) ## Viewing Test Logs -Clicking on the workflow run will show you the all the actions that GitHub performed and clicking on **Run Playwright tests** will show the error messages, what was expected and what was received as well as the call log. +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 Test Logs](https://user-images.githubusercontent.com/13063165/183423783-58bf2008-514e-4f96-9c12-c9a55703960c.png) @@ -85,11 +86,11 @@ Clicking on the workflow run will show you the all the actions that GitHub perfo [trace.playwright.dev](https://trace.playwright.dev) is a statically hosted variant of the Trace Viewer. You can upload trace files using drag and drop. -![playwright trace viewer](https://github.com/microsoft/playwright/assets/13063165/6d5885dc-d511-4c20-b728-040a7ef6cea4) + ## Properly handling Secrets -Artifacts like trace files or console logs contain information about your test execution. They can contain sensitive data like user credentials for a test user, access tokens to a staging backend, testing source code or sometimes even your application source code. Treat these files just as careful as you treat that sensitive data. If you upload reports and traces as part of your CI workflow, make sure that you only upload them to trusted artifact stores, or that you encrypt the files before upload. The same is true for sharing artifacts with team members: Use a trusted file share or encrypt the files before sharing. +Artifacts like trace files or console logs contain information about your test execution. They can contain sensitive data like user credentials for a test user, access tokens to a staging backend, testing source code, or sometimes even your application source code. Treat these files just as carefully as you treat that sensitive data. If you upload reports and traces as part of your CI workflow, make sure that you only upload them to trusted artifact stores, or that you encrypt the files before upload. The same is true for sharing artifacts with team members: Use a trusted file share or encrypt the files before sharing. ## What's Next - [Learn how to use Locators](./locators.mdx) diff --git a/python/versioned_docs/version-stable/ci.mdx b/python/versioned_docs/version-stable/ci.mdx index 24437ea3a4f..33ff25c48fb 100644 --- a/python/versioned_docs/version-stable/ci.mdx +++ b/python/versioned_docs/version-stable/ci.mdx @@ -5,6 +5,7 @@ title: "Continuous Integration" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -83,7 +84,7 @@ jobs: name: 'Playwright Tests' runs-on: ubuntu-latest container: - image: mcr.microsoft.com/playwright/python:v1.53.0-noble + image: mcr.microsoft.com/playwright/python:v1.54.0-noble options: --user 1001 steps: - uses: actions/checkout@v4 @@ -173,7 +174,7 @@ trigger: pool: vmImage: ubuntu-latest -container: mcr.microsoft.com/playwright/python:v1.53.0-noble +container: mcr.microsoft.com/playwright/python:v1.54.0-noble steps: - task: UsePythonVersion@0 @@ -197,7 +198,7 @@ Running Playwright on CircleCI is very similar to running on GitHub Actions. In executors: pw-noble-development: docker: - - image: mcr.microsoft.com/playwright/python:v1.53.0-noble + - image: mcr.microsoft.com/playwright/python:v1.54.0-noble ``` Note: When using the docker agent definition, you are specifying the resource class of where playwright runs to the 'medium' tier [here](https://circleci.com/docs/configuration-reference?#docker-execution-environment). The default behavior of Playwright is to set the number of workers to the detected core count (2 in the case of the medium tier). Overriding the number of workers to greater than this number will cause unnecessary timeouts and failures. @@ -208,7 +209,7 @@ Jenkins supports Docker agents for pipelines. Use the [Playwright Docker image]( ```groovy pipeline { - agent { docker { image 'mcr.microsoft.com/playwright/python:v1.53.0-noble' } } + agent { docker { image 'mcr.microsoft.com/playwright/python:v1.54.0-noble' } } stages { stage('e2e-tests') { steps { @@ -225,7 +226,7 @@ pipeline { Bitbucket Pipelines can use public [Docker images as build environments](https://confluence.atlassian.com/bitbucket/use-docker-images-as-build-environments-792298897.html). To run Playwright tests on Bitbucket, use our public Docker image ([see Dockerfile](./docker.mdx)). ```yml -image: mcr.microsoft.com/playwright/python:v1.53.0-noble +image: mcr.microsoft.com/playwright/python:v1.54.0-noble ``` ### GitLab CI @@ -238,7 +239,7 @@ stages: tests: stage: test - image: mcr.microsoft.com/playwright/python:v1.53.0-noble + image: mcr.microsoft.com/playwright/python:v1.54.0-noble script: ... ``` diff --git a/python/versioned_docs/version-stable/clock.mdx b/python/versioned_docs/version-stable/clock.mdx index 987d7f07e59..66d99e87181 100644 --- a/python/versioned_docs/version-stable/clock.mdx +++ b/python/versioned_docs/version-stable/clock.mdx @@ -5,6 +5,7 @@ title: "Clock" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; import LiteYouTube from '@site/src/components/LiteYouTube'; diff --git a/python/versioned_docs/version-stable/codegen-intro.mdx b/python/versioned_docs/version-stable/codegen-intro.mdx index c01974226c2..b06b8f81a30 100644 --- a/python/versioned_docs/version-stable/codegen-intro.mdx +++ b/python/versioned_docs/version-stable/codegen-intro.mdx @@ -5,10 +5,11 @@ title: "Generating tests" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction -Playwright comes with the ability to generate tests out of the box and is a great way to quickly get started with testing. It will open two windows, a browser window where you interact with the website you wish to test and the Playwright Inspector window where you can record your tests, copy the tests, clear your tests as well as change the language of your tests. +Playwright can generate tests automatically, providing a quick way to get started with testing. Codegen opens a browser window for interaction and the Playwright Inspector for recording, copying, and managing your generated tests. **You will learn** - [How to record a test](/codegen.mdx#recording-a-test) @@ -16,7 +17,7 @@ Playwright comes with the ability to generate tests out of the box and is a grea ## Running Codegen -Use the `codegen` command to run the test generator followed by the URL of the website you want to generate tests for. The URL is optional and you can always run the command without it and then add the URL directly into the browser window instead. +Use the `codegen` command to run the test generator followed by the URL of the website you want to generate tests for. The URL is optional and can be added directly in the browser window if omitted. ```bash playwright codegen demo.playwright.dev/todomvc @@ -24,40 +25,40 @@ playwright codegen demo.playwright.dev/todomvc ### Recording a test -Run `codegen` and perform actions in the browser. Playwright will generate the code for the user interactions. `Codegen` will look at the rendered page and figure out the recommended locator, prioritizing role, text and test id locators. If the generator identifies multiple elements matching the locator, it will improve the locator to make it resilient and uniquely identify the target element, therefore eliminating and reducing test(s) failing and flaking due to locators. +Run `codegen` and perform actions in the browser. Playwright generates code for your interactions automatically. Codegen analyzes the rendered page and recommends the best locator, prioritizing role, text, and test id locators. When multiple elements match a locator, the generator improves it to uniquely identify the target element, reducing test failures and flakiness. With the test generator you can record: -* Actions like click or fill by simply interacting with the page -* Assertions by clicking on one of the icons in the toolbar and then clicking on an element on the page to assert against. You can choose: +* Actions like click or fill by interacting with the page +* Assertions by clicking a toolbar icon, then clicking a page element to assert against. You can choose: * `'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 ###### -![recording a test](https://github.com/microsoft/playwright/assets/13063165/9751b609-6e4c-486b-a961-f86f177b1d58) + ###### -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. +When you finish interacting with the page, press the `'record'` button to stop recording and use the `'copy'` button to copy the generated code to your editor. -Use the `'clear'` button to clear the code to start recording again. Once finished close the Playwright inspector window or stop the terminal command. +Use the `'clear'` button to clear the code and start recording again. Once finished, close the Playwright Inspector window or stop the terminal command. -To learn more about generating tests check out or detailed guide on [Codegen](./codegen.mdx). +To learn more about generating tests, check out our detailed guide on [Codegen](./codegen.mdx). ### Generating locators You can generate [locators](/locators.mdx) with the test generator. -* Press the `'Record'` button to stop the recording and the `'Pick Locator'` button will appear. -* Click on the `'Pick Locator'` button and then hover over elements in the browser window to see the locator highlighted underneath each element. -* To choose a locator click on the element you would like to locate and the code for that locator will appear in the locator playground next to the Pick Locator button. -* You can then edit the locator in the locator playground to fine tune it and see the matching element highlighted in the browser window. -* Use the copy button to copy the locator and paste it into your code. +* Press the `'Record'` button to stop recording and the `'Pick Locator'` button will appear +* Click the `'Pick Locator'` button and hover over elements in the browser window to see the locator highlighted underneath each element +* Click the element you want to locate and the code for that locator will appear in the locator playground next to the Pick Locator button +* Edit the locator in the locator playground to fine-tune it and see the matching element highlighted in the browser window +* Use the copy button to copy the locator and paste it into your code ###### -![picking a locator](https://github.com/microsoft/playwright/assets/13063165/95d11f48-96a4-46b9-9c2a-63c3aa4fdce7) + ### Emulation -You can also generate tests using emulation so as to generate a test for a specific viewport, device, color scheme, as well as emulate the geolocation, language or timezone. The test generator can also generate a test while preserving authenticated state. Check out the [Test Generator](./codegen.mdx#emulation) guide to learn more. +You can generate tests using emulation for specific viewports, devices, color schemes, geolocation, language, or timezone. The test generator can also preserve authenticated state. Check out the [Test Generator](./codegen.mdx#emulation) guide to learn more. ## What's Next - [See a trace of your tests](./trace-viewer-intro.mdx) diff --git a/python/versioned_docs/version-stable/codegen.mdx b/python/versioned_docs/version-stable/codegen.mdx index 991da16486e..3f037f761c2 100644 --- a/python/versioned_docs/version-stable/codegen.mdx +++ b/python/versioned_docs/version-stable/codegen.mdx @@ -5,6 +5,7 @@ title: "Test generator" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; import LiteYouTube from '@site/src/components/LiteYouTube'; diff --git a/python/versioned_docs/version-stable/debug.mdx b/python/versioned_docs/version-stable/debug.mdx index 54a4cd5f75a..bc9bbbd987e 100644 --- a/python/versioned_docs/version-stable/debug.mdx +++ b/python/versioned_docs/version-stable/debug.mdx @@ -5,6 +5,7 @@ title: "Debugging Tests" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Playwright Inspector diff --git a/python/versioned_docs/version-stable/dialogs.mdx b/python/versioned_docs/version-stable/dialogs.mdx index 32baf022d05..50ea679eaa2 100644 --- a/python/versioned_docs/version-stable/dialogs.mdx +++ b/python/versioned_docs/version-stable/dialogs.mdx @@ -5,6 +5,7 @@ title: "Dialogs" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/python/versioned_docs/version-stable/docker.mdx b/python/versioned_docs/version-stable/docker.mdx index 6cf99dea661..b2b430b4a04 100644 --- a/python/versioned_docs/version-stable/docker.mdx +++ b/python/versioned_docs/version-stable/docker.mdx @@ -5,6 +5,7 @@ title: "Docker" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -22,7 +23,7 @@ This Docker image is intended to be used for testing and development purposes on ### Pull the image ```bash -docker pull mcr.microsoft.com/playwright/python:v1.53.0-noble +docker pull mcr.microsoft.com/playwright/python:v1.54.0-noble ``` ### Run the image @@ -34,7 +35,7 @@ By default, the Docker image will use the `root` user to run the browsers. This On trusted websites, you can avoid creating a separate user and use root for it since you trust the code which will run on the browsers. ```bash -docker run -it --rm --ipc=host mcr.microsoft.com/playwright/python:v1.53.0-noble /bin/bash +docker run -it --rm --ipc=host mcr.microsoft.com/playwright/python:v1.54.0-noble /bin/bash ``` #### Crawling and scraping @@ -42,7 +43,7 @@ docker run -it --rm --ipc=host mcr.microsoft.com/playwright/python:v1.53.0-noble On untrusted websites, it's recommended to use a separate user for launching the browsers in combination with the seccomp profile. Inside the container or if you are using the Docker image as a base image you have to use `adduser` for it. ```bash -docker run -it --rm --ipc=host --user pwuser --security-opt seccomp=seccomp_profile.json mcr.microsoft.com/playwright/python:v1.53.0-noble /bin/bash +docker run -it --rm --ipc=host --user pwuser --security-opt seccomp=seccomp_profile.json mcr.microsoft.com/playwright/python:v1.54.0-noble /bin/bash ``` [`seccomp_profile.json`](https://github.com/microsoft/playwright/blob/main/utils/docker/seccomp_profile.json) is needed to run Chromium with sandbox. This is a [default Docker seccomp profile](https://github.com/docker/engine/blob/d0d99b04cf6e00ed3fc27e81fc3d94e7eda70af3/profiles/seccomp/default.json) with extra user namespace cloning permissions: @@ -82,7 +83,7 @@ You can run Playwright Server in Docker while keeping your tests running on the Start the Playwright Server in Docker: ```bash -docker run -p 3000:3000 --rm --init -it --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.53.0-noble /bin/sh -c "npx -y playwright@1.53.0 run-server --port 3000 --host 0.0.0.0" +docker run -p 3000:3000 --rm --init -it --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.54.0-noble /bin/sh -c "npx -y playwright@1.54.0 run-server --port 3000 --host 0.0.0.0" ``` #### Connecting to the Server @@ -122,7 +123,7 @@ async with async_playwright() as p: If you need to access local servers from within the Docker container: ```bash -docker run --add-host=hostmachine:host-gateway -p 3000:3000 --rm --init -it --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.53.0-noble /bin/sh -c "npx -y playwright@1.53.0 run-server --port 3000 --host 0.0.0.0" +docker run --add-host=hostmachine:host-gateway -p 3000:3000 --rm --init -it --workdir /home/pwuser --user pwuser mcr.microsoft.com/playwright:v1.54.0-noble /bin/sh -c "npx -y playwright@1.54.0 run-server --port 3000 --host 0.0.0.0" ``` This makes `hostmachine` point to the host's localhost. Your tests should use `hostmachine` instead of `localhost` when accessing local servers. @@ -137,9 +138,9 @@ When running tests remotely, ensure the Playwright version in your tests matches See [all available image tags]. We currently publish images with the following tags: -- `:v1.53.0` - Playwright v1.53.0 release docker image based on Ubuntu 24.04 LTS (Noble Numbat). -- `:v1.53.0-noble` - Playwright v1.53.0 release docker image based on Ubuntu 24.04 LTS (Noble Numbat). -- `:v1.53.0-jammy` - Playwright v1.53.0 release docker image based on Ubuntu 22.04 LTS (Jammy Jellyfish). +- `:v1.54.0` - Playwright v1.54.0 release docker image based on Ubuntu 24.04 LTS (Noble Numbat). +- `:v1.54.0-noble` - Playwright v1.54.0 release docker image based on Ubuntu 24.04 LTS (Noble Numbat). +- `:v1.54.0-jammy` - Playwright v1.54.0 release docker image based on Ubuntu 22.04 LTS (Jammy Jellyfish). :::note @@ -163,7 +164,7 @@ To run Playwright inside Docker, you need to have Python, [Playwright browsers]( ```Dockerfile FROM python:3.12-bookworm -RUN pip install playwright==@1.53.0 && \ +RUN pip install playwright==@1.54.0 && \ playwright install --with-deps ``` diff --git a/python/versioned_docs/version-stable/downloads.mdx b/python/versioned_docs/version-stable/downloads.mdx index 6c37ed79047..e88652a7151 100644 --- a/python/versioned_docs/version-stable/downloads.mdx +++ b/python/versioned_docs/version-stable/downloads.mdx @@ -5,6 +5,7 @@ title: "Downloads" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/python/versioned_docs/version-stable/emulation.mdx b/python/versioned_docs/version-stable/emulation.mdx index 6be2000b0f6..0ae2b0bb9a3 100644 --- a/python/versioned_docs/version-stable/emulation.mdx +++ b/python/versioned_docs/version-stable/emulation.mdx @@ -5,6 +5,7 @@ title: "Emulation" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -135,7 +136,7 @@ Whether the meta viewport tag is taken into account and touch events are enabled ```py context = browser.new_context( - isMobile=false + is_mobile=False ) ``` @@ -144,7 +145,7 @@ context = browser.new_context( ```py context = await browser.new_context( - isMobile=false + is_mobile=False ) ``` diff --git a/python/versioned_docs/version-stable/evaluating.mdx b/python/versioned_docs/version-stable/evaluating.mdx index 15db7a8fc3b..6adeeca259e 100644 --- a/python/versioned_docs/version-stable/evaluating.mdx +++ b/python/versioned_docs/version-stable/evaluating.mdx @@ -5,6 +5,7 @@ title: "Evaluating JavaScript" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/python/versioned_docs/version-stable/events.mdx b/python/versioned_docs/version-stable/events.mdx index 4b28448bdc9..c311ff40c9a 100644 --- a/python/versioned_docs/version-stable/events.mdx +++ b/python/versioned_docs/version-stable/events.mdx @@ -5,6 +5,7 @@ title: "Events" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/python/versioned_docs/version-stable/extensibility.mdx b/python/versioned_docs/version-stable/extensibility.mdx index 5cf8ddd901f..6ccaa5ec357 100644 --- a/python/versioned_docs/version-stable/extensibility.mdx +++ b/python/versioned_docs/version-stable/extensibility.mdx @@ -5,6 +5,7 @@ title: "Extensibility" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Custom selector engines diff --git a/python/versioned_docs/version-stable/frames.mdx b/python/versioned_docs/version-stable/frames.mdx index 7b8edd275e8..5b69af2fbf9 100644 --- a/python/versioned_docs/version-stable/frames.mdx +++ b/python/versioned_docs/version-stable/frames.mdx @@ -5,6 +5,7 @@ title: "Frames" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/python/versioned_docs/version-stable/handles.mdx b/python/versioned_docs/version-stable/handles.mdx index 225213bfe06..f7d456f46de 100644 --- a/python/versioned_docs/version-stable/handles.mdx +++ b/python/versioned_docs/version-stable/handles.mdx @@ -5,6 +5,7 @@ title: "Handles" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/python/versioned_docs/version-stable/input.mdx b/python/versioned_docs/version-stable/input.mdx index c057eddb31d..bc89cfbd838 100644 --- a/python/versioned_docs/version-stable/input.mdx +++ b/python/versioned_docs/version-stable/input.mdx @@ -5,6 +5,7 @@ title: "Actions" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/python/versioned_docs/version-stable/intro.mdx b/python/versioned_docs/version-stable/intro.mdx index b0422d42dbd..a988ee2c5f3 100644 --- a/python/versioned_docs/version-stable/intro.mdx +++ b/python/versioned_docs/version-stable/intro.mdx @@ -5,6 +5,7 @@ title: "Installation" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -100,7 +101,7 @@ pip install pytest-playwright playwright -U - Python 3.8 or higher. - Windows 10+, Windows Server 2016+ or Windows Subsystem for Linux (WSL). - macOS 14 Ventura, or later. -- Debian 12, Ubuntu 22.04, Ubuntu 24.04, on x86-64 and arm64 architecture. +- Debian 12, Debian 13, Ubuntu 22.04, Ubuntu 24.04, on x86-64 and arm64 architecture. ## What's next - [Write tests using web first assertions, page fixtures and locators](./writing-tests.mdx) diff --git a/python/versioned_docs/version-stable/languages.mdx b/python/versioned_docs/version-stable/languages.mdx index 880e457cb39..921a8a0ed48 100644 --- a/python/versioned_docs/version-stable/languages.mdx +++ b/python/versioned_docs/version-stable/languages.mdx @@ -5,6 +5,7 @@ title: "Supported languages" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -30,7 +31,7 @@ You can choose any testing framework such as JUnit or TestNG based on your proje ## .NET -Playwright for .NET comes with MSTest, NUnit, and xUnit [base classes](https://playwright.dev/dotnet/docs/test-runners) for writing end-to-end tests. +Playwright for .NET comes with MSTest, NUnit, xUnit, and xUnit v3 [base classes](https://playwright.dev/dotnet/docs/test-runners) for writing end-to-end tests. * [Documentation](https://playwright.dev/dotnet/docs/intro) * [GitHub repo](https://github.com/microsoft/playwright-dotnet) diff --git a/python/versioned_docs/version-stable/library.mdx b/python/versioned_docs/version-stable/library.mdx index 6cd17df8fd7..c6af81b8610 100644 --- a/python/versioned_docs/version-stable/library.mdx +++ b/python/versioned_docs/version-stable/library.mdx @@ -5,6 +5,7 @@ title: "Getting started - Library" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Installation diff --git a/python/versioned_docs/version-stable/locators.mdx b/python/versioned_docs/version-stable/locators.mdx index c4d8263f35e..0326b44caaf 100644 --- a/python/versioned_docs/version-stable/locators.mdx +++ b/python/versioned_docs/version-stable/locators.mdx @@ -5,6 +5,7 @@ title: "Locators" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction diff --git a/python/versioned_docs/version-stable/mock.mdx b/python/versioned_docs/version-stable/mock.mdx index 45abcc537a2..8a08803b7cb 100644 --- a/python/versioned_docs/version-stable/mock.mdx +++ b/python/versioned_docs/version-stable/mock.mdx @@ -5,6 +5,7 @@ title: "Mock APIs" import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import HTMLCard from '@site/src/components/HTMLCard'; +import ProgressiveImage from '@theme/ProgressiveImage'; ## Introduction @@ -147,6 +148,9 @@ To record a HAR file we use [page.route_from_har()](/api/class-page.mdx#page-rou 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. +#### +Alternatively, you can also record HAR files by using the [record_har_path](/api/class-browser.mdx#browser-new-context-option-record-har-path) option in [browser.new_context()](/api/class-browser.mdx#browser-new-context) when creating a browser context. This allows you to capture all network traffic for the entire context until the context is closed. +