# Playwright

> **Note:**
> Playwright support in IntelliJ IDEA is provided by the [Test Automation](https://plugins.jetbrains.com/plugin/20175-test-automation) plugin, and most of the features described in this section rely on it. However, basic functionality like running and debugging Playwright tests works without the plugin.

![](https://resources.jetbrains.com.cn/help/img/idea/2026.2/javascript-impl.icons.playwright.svg) [Playwright](https://playwright.dev/) is an open-source test automation framework. It provides a high-level API for automating web browsers such as Chrome, Firefox, and Safari.

## Create a new Playwright project

Playwright for JS/TS:

Procedure:

1. In the main menu, go to `File | New | Project`.

Alternatively, if you're on the Welcome screen, click New Project.

2. From the list on the left, select Playwright.

![Creating a new Playwright project](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ij_playwright_new_project.png)

3. Name the new project and change its location if necessary.

4. Specify the Node.js runtime.

5. Specify the command to install Playwright.

6. Click Create.

Playwright for JVM:

Procedure:

1. In the main menu, go to `File | New | Project`.

Alternatively, if you're on the Welcome screen, click New Project.

2. From the list on the left, select Playwright for JVM.

![Creating a new Playwright for JVM project](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ij_create_playwright_jvm_project.png)

3. Name the new project and change its location if necessary.

4. (Optional) Enable the Create Git repository  option to place the new project under version control. If you do not want to do it now, you can do it later at any time.

5. Select the Language that you want to use.

6. Select the build system that you want to use in your project: [Maven](maven-support.html) or [Gradle](gradle.html).

7. Select the test framework that you want to use for test cases management: [JUnit](junit.html) or [TestNG](testng.html).

8. (Optional) Modify the Group and Artifact parameters.

9. From the JDK  list, select the [JDK](sdk.html#jdk) that you want to use in your project.

* If the JDK is installed on your computer, but not defined in the IDE, select ![](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.nodes.jdk.png) Add JDK from Disk… and specify the path to the JDK home directory.

* If you don't have the necessary JDK on your computer, select ![](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.general.download.svg) Download JDK .

10. (Optional) Enable the Add sample code  parameter.

11. Click Next.

12. Click Create.

Playwright for Python:

> **Note:**
> The Playwright for Python project can be created only if the [Python plugin](https://plugins.jetbrains.com/plugin/631-python) is [installed and enabled](managing-plugins.html).

Procedure:

1. In the main menu, go to `File | New | Project`.

Alternatively, if you're on the Welcome screen, click New Project.

2. From the list on the left, select Playwright for Python.

![Creating a new Playwright for Python project](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ij_playwright_python_virtualenv.png)

3. Name the new project and change its location if necessary.

4. (Optional) Enable the Create Git repository option to place the new project under version control. If you do not want to do it now, you can do it later at any time.

5. Select whether you want to create a new or use an existing Environment and configure the corresponding settings.

New:

Virtualenv:

![Configure a new Virtualenv environment](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ij_playwright_python_virtualenv.png)

* Select the base interpreter from the list, or click ![Choose the base interpreter](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.inline.browse.svg) and find the Python executable in your file system.

* Specify the location of the new virtual environment in the Location field, or click ![Virtual environment location](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.inline.browse.svg) and browse for the location in your file system. The directory for the new virtual environment should be empty.

* Select the Inherit packages from base interpreter checkbox if you want all packages installed in the global Python on your machine to be added to the virtual environment you're going to create. This checkbox corresponds to the `--system-site-packages` option of the [virtualenv](http://www.virtualenv.org/en/latest/index.html) tool.

* Select the Make available to all projects checkbox if you want to reuse this environment when creating Python interpreters in IntelliJ IDEA.

For more information, refer to the [PyCharm documentation](https://www.jetbrains.com.cn/en-us/help/pycharm/creating-virtual-environment.html).

Conda:

![Configure a new Conda environment](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ij_playwright_python_conda.png)

* Specify the location of the new conda environment in the Location field, or click ![Browse...](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.inline.browse.svg) and browse for the location in your file system. The directory for the new conda environment should be empty.

* Select the Python version from the list.

* IntelliJ IDEA will detect a conda installation. If IntelliJ IDEA did not detect the installation automatically, specify the location of the conda executable, or click ![Conda executable location](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.inline.browse.svg) to browse for it.

* Select the Make available to all projects checkbox if you want to reuse this environment when creating Python interpreters in IntelliJ IDEA.

For more information, refer to the [PyCharm documentation](https://www.jetbrains.com.cn/en-us/help/pycharm/conda-support-creating-conda-virtual-environment.html).

Pipenv:

![Configure a new Pipenv environment](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ij_playwright_python_pipenv.png)

* Select the base interpreter from the list, or click ![Browse...](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.inline.browse.svg) and find the Python executable in your file system.

* If you have added the base binary directory to your `PATH` environmental variable, you do not need to set any additional options: the path to the pipenv executable will be autodetected. If IntelliJ IDEA does not detect the pipenv executable, click Install pipenv via pip to allow IntelliJ IDEA to install it for you automatically. Alternatively, follow the [pipenv installation procedure](null) to discover the executable path and then specify it in the dialog.

For more information, refer to the [PyCharm documentation](https://www.jetbrains.com.cn/en-us/help/pycharm/pipenv.html).

Poetry:

![Configure a new Poetry environment](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ij_playwright_python_poetry.png)

* Select the base interpreter from the list or click ![Browse...](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.inline.browse.svg) and find the Python executable in your file system.

For more information, refer to the [PyCharm documentation](https://www.jetbrains.com.cn/en-us/help/pycharm/poetry.html).

Existing:

![Configure an existing environment](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ij_playwright_python_existing_env.png)

* Select the interpreter from the list. If there are no available interpreters, click Add Interpreter and configure one according to your needs.

6. Click Create.

A new project is created according to the options that you have selected.

## Initialize the Playwright project

> **Note:**
> Initialization is required only for the [Playwright for
> JS/TS](#playwright-for-js-ts) projects.

Once the project is created, you need to initialize it. During this procedure, you will select the desired language, install Playwright browsers, and specify other settings.

![Project initialization](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_playwright_project_initialization.png)

To start the project initialization:

Procedure:

1. In the Run tool window `Alt+4` (Windows), `⌘ 4` (macOS), `⌘ 4` (IntelliJ IDEA Classic (macOS)), `⌘ 4` (macOS System Shortcuts), `Alt+4` (XWin), `Alt+4` (GNOME), `Alt+4` (KDE), `Alt+4` (Emacs), `Alt+4` (Sublime Text), `⌘ 4` (Sublime Text (macOS)), `Alt+4` (NetBeans), `Alt+4` (Visual Studio), `⌘ 4` (Visual Studio (macOS)), `Alt+4` (Eclipse), `⌘ 4` (Eclipse (macOS)), press the up/down arrow buttons on your keyboard to select the language that you want to use in the project.

2. Type the name of the folder where you want to put your end-to-end tests.

3. Specify if you want to add a [GitHub Actions workflow](https://docs.github.com/en/actions/using-workflows).

4. Specify if you want to install Playwright browsers.

When you specify all the parameters, the initialization starts. The system will notify you once the process is completed:

![Project successfully initialized](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_playwright_init_success.png)

## Role-based locators support

In Playwright, you can locate an element by its [role](https://playwright.dev/docs/locators#locate-by-role). This helps to pinpoint a specific element on the page, be it a button, checkbox, heading, link, or other elements.

IntelliJ IDEA can generate such locators and add them to your code, so you can use them in your tests.

![Role-based locators](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_locator_types.png)

## Add elements to code

Procedure:

1. Open the file where you want to add an element.

2. Click ![the Web Inspector button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua-plugin.icons.webInspector%4020x20.svg) on the right-hand sidebar to open the Web Inspector toolbar window.

3. Specify the URL of the page in the address bar.

![Address bar controls](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_address_bar_controls.png)

4. Click ![The Select Element in Page button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua-plugin.icons.browser.expui.selectWeb.svg) and select the element that you want to add in the Web Inspector.

![Select element in page](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_select_element_in_page.png)

5. Once the element is selected, click ![Add Element to Code](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app.expui.general.add.svg) to add the element to the code.

![The Add Element to Code button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_add_element_to_code.png)

To add a specific type of the selector (ID, Name, Tag with classes, and so on), click ![Add Element to Code By](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.general.chevronDownLarge.svg) and select the required option.

![Add elements to code by](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_locator_types.png)

> **Tip:**
> Here, you can also add the element to code by its role.

If you want to switch specifically between CSS and XPath locators, click ![](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua-plugin.icons.locators.expui.css.svg) and select the required locator type.

![Select locator type](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_locator_type_switcher.png)

As a result, a piece of code is generated and added to the code editor.

## Run tests

Procedure:

* To run your tests, click the ![the Run button](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.gutter.run.svg) gutter icon next to the test class or test method, then select the Run option from the list.

![Run tests](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ps_run_tests_playwright.png)

Alternatively, place the caret at the test class to run all tests in that class, or at the test method, and press `Ctrl+Shift+F10` (Windows), `⌃ ⇧ R` (macOS), `⌃ ⇧ F10` (IntelliJ IDEA Classic (macOS)), `⌃ ⇧ R` (macOS System Shortcuts), `Ctrl+Shift+F10` (XWin), `Ctrl+Shift+F10` (GNOME), `Ctrl+Shift+F10` (KDE), `Ctrl+Shift+F10` (Emacs), `Ctrl+Shift+F10` (Sublime Text), `Ctrl+Shift+F10` (Sublime Text (macOS)), `Alt+Shift+F6` (NetBeans), `Ctrl+Alt+F5` (Visual Studio), `⌃ ⌥ F5` (Visual Studio (macOS)), `Ctrl+Shift+F10` (Eclipse), `⌃ ⇧ R` (Eclipse (macOS)).

You can run tests in a more customizable way using the run/debug configurations. For more information, refer to [Run tests](performing-tests.html).

### Run tests in headed mode

Running tests in headed mode allows you to get a visual representation of how Playwright interacts with the website.

To run tests in headed mode:

Playwright for JS/TS:

Procedure:

1. Click the current configuration in the run/debug configuration switcher, then click ![](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.actions.more.svg) and select the Edit option.

![Editing Run/Debug configurations](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_edit_configurations.png)

2. In the Playwright options field, specify the `--headed` command:

![Configuring run/debug configuration to run tests in headed mode](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_pw_for_js_ts_headed_mode.png)

3. Apply changes and run your tests.

Playwright for JVM:

Procedure:

1. Open the file that contains the tests that you want to run in headed mode.

2. Add the following option to your code:

```
launch(new BrowserType.LaunchOptions().setHeadless(false))
```

![Modifying code to run tests in headed mode](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_pw_for_jvm_run_tests_in_headed_mode.png)

3. Run your tests.

Playwright for Python:

Procedure:

1. Click the current configuration in the run/debug configuration switcher, then click ![](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.actions.more.svg) and select the Edit option.

![Editing Run/Debug configurations](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_edit_configurations_pw_for_python.png)

2. In the Additional arguments field, specify the `--headed` command:

![Configuring run/debug configuration to run tests in headed mode](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_pw_for_python_headed_mode.png)

3. Apply changes and run your tests.

As a result, a browser is opened to reproduce the steps from the tests.

## Review test results

When the tests finish running, the results are displayed on the Test Runner tab of the Run tool window. On this tab, you can rerun tests, export and import test results, see how much time it took to run each test, and perform other actions.

![Test results shown on the Test Runner tab of the Run tool window](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_playwright_review_tests.png)

For more information, refer to [Explore test results](viewing-and-exploring-test-results.html).

## Debug tests

In general, the debugging procedure includes the following steps:

1.  Set breakpoints for the lines of code where the execution must be suspended.

2.  Run your code in debug mode.

3.  Use the Debug tool window to analyze the code and locate potential issues.

4.  Fix the issues.

To reproduce these steps in the IDE, do the following:

Procedure:

1. In the gutter, hover over the executable line of code where you want to suspend the execution and click ![](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.breakpoints.breakpoint.svg).

![Set a breakpoint](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_playwright_set_breakpoints.png)

2. Click ![](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.expui.run.run.svg) in the gutter and select Debug. This starts the debugger session and runs your code.

![Start the debug session](https://resources.jetbrains.com.cn/help/img/idea/2026.2/ps_debug_playwright_tests.png)

3. Once the program hits the breakpoint, the execution becomes suspended, and you can review the results of the debugger session on the Debug tool window.

![Debug tool window overview](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_debug_overview.png)

For more information on debugging, refer to [Debug code](debugging-code.html).

## Generate Playwright report

[Playwright reporters](https://playwright.dev/docs/test-reporters) provide detailed information about failed tests, allowing you to perform a more thorough analysis of what happened during the test execution.

By default, an `html` report is generated, but you can switch to an alternative format using run/debug configurations. To do this:

Procedure:

> **Note:**
> You can change the reporter only for the [Playwright for
> JS/TS](#playwright-for-js-ts) projects.

1. Click the current configuration in the run/debug configuration switcher, then click ![](https://resources.jetbrains.com.cn/help/img/idea/2026.2/app-client.actions.more.svg) and select the Edit option.

![Editing Run/Debug configurations](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_edit_configurations.png)

2. In the Playwright options field, specify the desired [reporter](https://playwright.dev/docs/test-reporters#built-in-reporters). For example:

```GENERIC
--reporter=line
```

3. Apply changes and run your tests.

As a result, a detailed report is generated.

![Generated Playwright report](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_pw_report.png)

## Modify a run/debug configuration

If you want to modify the startup properties for your tests, edit the run/debug configuration:

Procedure:

1. Click the current configuration in the run/debug configuration switcher and select the Edit Configurations… option.

![Select the run/debug configuration](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_playwright_edit_run_debug_config.png)

2. In the Run/Debug Configurations dialog, select the configuration that you want to edit.

3. Configure the required startup properties.

> **Note:**
> Depending on the project setup, the run/debug configuration parameters can vary.

Playwright for JS/TS:

![Configure startup properties](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_playwright_run_debug_config.png)

Playwright for JVM:

![Configure startup properties](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_playwright_run_debug_config_jvm.png)

Playwright for Python:

![Configure startup properties](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_playwright_run_debug_config_python.png)

4. Apply changes and click OK.

For more information on run/debug configurations, refer to [Run/debug configurations](run-debug-configuration.html).

## Customize the locator template

If you want to customize how selected elements are added to your code, you can modify the template:

Procedure:

1. Click the framework name on the Status bar. The UI Automation Framework menu opens.

![Customize template](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_customize_playwright_template.png)

2. Select the Customize Template option.

3. In the File and Code Templates dialog, select the required framework from the list.

![The File and Code Templates dialog](https://resources.jetbrains.com.cn/help/img/idea/2026.2/aqua_playwright_locator_template.png)

4. Rewrite the code generation algorithms for the web element locator.

> **Tip:**
> [Apache Velocity](https://velocity.apache.org/) template language is used.

5. Click OK to save changes.

As a result, the locators will be added to the code according to the updated code generation algorithms.

## See also

### External Links

[Playwright](https://playwright.dev/) [Playwright reporters](https://playwright.dev/docs/test-reporters) [List of reporters](https://playwright.dev/docs/test-reporters#built-in-reporters)