docs: sync all tab choices (package-manager, java-jvm choice, ct) (#35182)

2025-03-13 10:45:02 +01:00 · 2025-03-13 10:45:02 +01:00 · e976acc8ea
parent deaa714ab4
commit e976acc8ea
4 changed files with 33 additions and 9 deletions
--- a/docs/src/best-practices-js.md
+++ b/docs/src/best-practices-js.md
@ -113,6 +113,7 @@ Playwright has a [test generator](./codegen.md) that can generate tests and pick
 To pick a locator run the `codegen` command followed by the URL that you would like to pick a locator from.

 <Tabs
+  groupId="js-package-manager"
  defaultValue="npm"
  values={[
    {label: 'npm', value: 'npm'},
@ -201,6 +202,7 @@ You can live debug your test by clicking or editing the locators in your test in
 You can also debug your tests with the Playwright inspector by running your tests with the `--debug` flag.

 <Tabs
+  groupId="js-package-manager"
  defaultValue="npm"
  values={[
    {label: 'npm', value: 'npm'},
@ -243,6 +245,7 @@ You can then step through your test, view actionability logs and edit the locato
 To debug a specific test add the name of the test file and the line number of the test followed by the `--debug` flag.

 <Tabs
+  groupId="js-package-manager"
  defaultValue="npm"
  values={[
    {label: 'npm', value: 'npm'},
@ -284,6 +287,7 @@ For CI failures, use the Playwright [trace viewer](./trace-viewer.md) instead of
 Traces are configured in the Playwright config file and are set to run on CI on the first retry of a failed test. We don't recommend setting this to `on` so that traces are run on every test as it's very performance heavy. However you can run a trace locally when developing with the `--trace` flag.

 <Tabs
+  groupId="js-package-manager"
  defaultValue="npm"
  values={[
    {label: 'npm', value: 'npm'},
@ -320,6 +324,7 @@ pnpm exec playwright test --trace on
 Once you run this command your traces will be recorded for each test and can be viewed directly from the HTML report.

 <Tabs
+  groupId="js-package-manager"
  defaultValue="npm"
  values={[
    {label: 'npm', value: 'npm'},
@ -398,6 +403,7 @@ export default defineConfig({
 By keeping your Playwright version up to date you will be able to test your app on the latest browser versions and catch failures before the latest browser version is released to the public.

 <Tabs
+  groupId="js-package-manager"
  defaultValue="npm"
  values={[
    {label: 'npm', value: 'npm'},
@ -436,6 +442,7 @@ Check the [release notes](./release-notes.md) to see what the latest version is
 You can see what version of Playwright you have by running the following command.

 <Tabs
+  groupId="js-package-manager"
  defaultValue="npm"
  values={[
    {label: 'npm', value: 'npm'},
@ -510,6 +517,7 @@ test('runs in parallel 2', async ({ page }) => { /* ... */ });
 Playwright can [shard](./test-parallel.md#shard-tests-between-multiple-machines) a test suite, so that it can be executed on multiple machines.

 <Tabs
+  groupId="js-package-manager"
  defaultValue="npm"
  values={[
    {label: 'npm', value: 'npm'},
--- a/docs/src/intro-js.md
+++ b/docs/src/intro-js.md
@ -20,6 +20,7 @@ Playwright Test was created specifically to accommodate the needs of end-to-end
 Get started by installing Playwright using npm, yarn or pnpm. Alternatively you can also get started and run your tests using the [VS Code Extension](./getting-started-vscode.md).

 <Tabs
+  groupId="js-package-manager"
  defaultValue="npm"
  values={[
    {label: 'npm', value: 'npm'},
@ -83,6 +84,7 @@ The `tests` folder contains a basic example test to help you get started with te
 By default tests will be run on all 3 browsers, Chromium, Firefox and WebKit using 3 workers. This can be configured in the [playwright.config file](./test-configuration.md). 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.

 <Tabs
+  groupId="js-package-manager"
  defaultValue="npm"
  values={[
    {label: 'npm', value: 'npm'},
@ -116,7 +118,7 @@ pnpm exec playwright test

 </Tabs>

-![tests running in command line](https://github.com/microsoft/playwright/assets/13063165/981c1b2b-dc7e-4b85-b241-272b44da6628) 
+![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.md) to learn more about running tests in headed mode, running multiple tests, running specific tests etc.

 ## HTML Test Reports
@ -124,6 +126,7 @@ See our doc on [Running Tests](./running-tests.md) to learn more about running t
 After your test completes, an [HTML Reporter](./test-reporters.md#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.

 <Tabs
+  groupId="js-package-manager"
  defaultValue="npm"
  values={[
    {label: 'npm', value: 'npm'},
@ -164,6 +167,7 @@ pnpm exec playwright show-report
 Run your tests with [UI Mode](./test-ui-mode.md) for a better developer experience with time travel debugging, watch mode and more.

 <Tabs
+  groupId="js-package-manager"
  defaultValue="npm"
  values={[
    {label: 'npm', value: 'npm'},
@ -207,6 +211,7 @@ Check out or [detailed guide on UI Mode](./test-ui-mode.md) to learn more about
 To update Playwright to the latest version run the following command:

 <Tabs
+  groupId="js-package-manager"
  defaultValue="npm"
  values={[
    {label: 'npm', value: 'npm'},
@ -250,6 +255,7 @@ pnpm exec playwright install --with-deps
 You can always check which version of Playwright you have by running the following command:

 <Tabs
+  groupId="js-package-manager"
  defaultValue="npm"
  values={[
    {label: 'npm', value: 'npm'},
--- a/docs/src/test-components-js.md
+++ b/docs/src/test-components-js.md
@ -45,6 +45,7 @@ Adding Playwright Test to an existing project is easy. Below are the steps to en
 ### Step 1: Install Playwright Test for components for your respective framework

 <Tabs
+  groupId="js-package-manager"
  defaultValue="npm"
  values={[
    {label: 'npm', value: 'npm'},
@ -103,6 +104,7 @@ component is mounted using this script. It can be either a `.js`, `.ts`, `.jsx`
 ### Step 2. Create a test file `src/App.spec.{ts,tsx}`

 <Tabs
+  groupId="js-framework"
  defaultValue="react"
  values={[
    {label: 'React', value: 'react'},
@ -291,6 +293,7 @@ Playwright is using [Vite](https://vitejs.dev/) to create the components bundle
 Provide props to a component when mounted.

 <Tabs
+  groupId="js-framework"
  defaultValue="react"
  values={[
    {label: 'React', value: 'react'},
@ -349,6 +352,7 @@ test('props', async ({ mount }) => {
 Provide callbacks/events to a component when mounted.

 <Tabs
+  groupId="js-framework"
  defaultValue="react"
  values={[
    {label: 'React', value: 'react'},
@ -407,6 +411,7 @@ test('event', async ({ mount }) => {
 Provide children/slots to a component when mounted.

 <Tabs
+  groupId="js-framework"
  defaultValue="react"
  values={[
    {label: 'React', value: 'react'},
@ -465,10 +470,11 @@ test('children', async ({ mount }) => {
 You can use `beforeMount` and `afterMount` hooks to configure your app. This lets you set up things like your app router, fake server etc. giving you the flexibility you need. You can also pass custom configuration from the `mount` call from a test, which is accessible from the `hooksConfig` fixture. This includes any config that needs to be run before or after mounting the component. An example of configuring a router is provided below:

 <Tabs
+  groupId="js-framework"
  defaultValue="react"
  values={[
    {label: 'React', value: 'react'},
-    {label: 'Vue3', value: 'vue3'},
+    {label: 'Vue', value: 'vue'},
  ]
 }>
  <TabItem value="react">
@ -540,6 +546,7 @@ You can use `beforeMount` and `afterMount` hooks to configure your app. This let
 Unmount the mounted component from the DOM. This is useful for testing the component's behavior upon unmounting. Use cases include testing an "Are you sure you want to leave?" modal or ensuring proper cleanup of event handlers to prevent memory leaks.

 <Tabs
+  groupId="js-framework"
  defaultValue="react"
  values={[
    {label: 'React', value: 'react'},
@ -601,6 +608,7 @@ test('unmount', async ({ mount }) => {
 Update props, slots/children, and/or events/callbacks of a mounted component. These component inputs can change at any time and are typically provided by the parent component, but sometimes it is necessary to ensure that your components behave appropriately to new inputs.

 <Tabs
+  groupId="js-framework"
  defaultValue="react"
  values={[
    {label: 'React', value: 'react'},
@ -720,6 +728,7 @@ test('…', async ({ mount, page, context }) => {
 `@playwright/experimental-ct-{react,svelte,vue}` wrap `@playwright/test` to provide an additional built-in component-testing specific fixture called `mount`:

 <Tabs
+  groupId="js-framework"
  defaultValue="react"
  values={[
    {label: 'React', value: 'react'},
--- a/docs/src/test-runners-java.md
+++ b/docs/src/test-runners-java.md
@ -194,15 +194,16 @@ junit.jupiter.execution.parallel.config.dynamic.factor=0.5
 You can use a Gradle build configuration script, written in Groovy or Kotlin.

 <Tabs
-  defaultValue="gradle"
+  groupId="jvm-language"
+  defaultValue="groovy"
  values={[
-    {label: 'build.gradle', value: 'gradle'},
-    {label: 'build.gradle.kts', value: 'gradle-kotlin'}
+    {label: 'Groovy', value: 'groovy'},
+    {label: 'Kotlin', value: 'kotlin'}
  ]
 }>
-<TabItem value="gradle">
+<TabItem value="groovy">

-```groovy
+```groovy title="build.gradle"
 plugins {
  application
  id 'java'
@ -232,9 +233,9 @@ test {
 ```

 </TabItem>
-<TabItem value="gradle-kotlin">
+<TabItem value="kotlin">

-```groovy
+```groovy title="build.gradle.kts"
 plugins {
  application
  id("java")