docs: debug docs rework for simpler debug intro (#15836)
Co-authored-by: Max Schmitt <max@schmitt.mx>
This commit is contained in:
Debbie O'Brien
GitHub
parent
09461f8a76
commit
54f7141877
156
docs/src/debug-selectors.md
Normal file
156
docs/src/debug-selectors.md
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
---
|
||||
id: debug-selectors
|
||||
title: "Debugging Selectors"
|
||||
---
|
||||
|
||||
Playwright will throw a timeout exception like `locator.click: Timeout 30000ms exceeded` when an element does not exist on the page. There are multiple ways of debugging selectors:
|
||||
|
||||
- [Playwright Inspector](#using-playwright-inspector) to step over each Playwright API call to inspect the page.
|
||||
- [Browser DevTools](#using-devtools) to inspect selectors with the DevTools element panel.
|
||||
- [Trace Viewer](./trace-viewer.md) to see what the page looked like during the test run.
|
||||
- [Verbose API logs](#verbose-api-logs) shows [actionability checks](./actionability.md) when locating the element.
|
||||
|
||||
## Using Playwright Inspector
|
||||
|
||||
Open the [Playwright Inspector](./debug.md) and click the `Explore` button to hover over elements in the screen and click them to
|
||||
automatically generate selectors for those elements. To verify where selector points, paste it into the inspector input field:
|
||||
|
||||
<img width="602" alt="Selectors toolbar" src="https://user-images.githubusercontent.com/883973/108614696-ad5eaa00-73b1-11eb-81f5-9eebe62543a2.png"></img>
|
||||
|
||||
## Using DevTools
|
||||
|
||||
You can also use the following API inside the Developer Tools Console of any browser.
|
||||
|
||||
When running in Debug Mode with `PWDEBUG=console`, a `playwright` object is available in Developer tools console.
|
||||
|
||||
1. Run with `PWDEBUG=console`
|
||||
1. Setup a breakpoint to pause the execution
|
||||
1. Open the console panel in browser developer tools
|
||||
|
||||
<img src="https://user-images.githubusercontent.com/284612/92536317-37dd9380-f1ee-11ea-875d-daf1b206dd56.png"></img>
|
||||
|
||||
### playwright.$(selector)
|
||||
|
||||
Query Playwright selector, using the actual Playwright query engine, for example:
|
||||
|
||||
```txt
|
||||
> playwright.$('.auth-form >> text=Log in');
|
||||
|
||||
<button>Log in</button>
|
||||
```
|
||||
|
||||
### playwright.$$(selector)
|
||||
|
||||
Same as `playwright.$`, but returns all matching elements.
|
||||
|
||||
```txt
|
||||
> playwright.$$('li >> text=John')
|
||||
|
||||
> [<li>, <li>, <li>, <li>]
|
||||
```
|
||||
|
||||
### playwright.inspect(selector)
|
||||
|
||||
Reveal element in the Elements panel (if DevTools of the respective browser supports it).
|
||||
|
||||
```txt
|
||||
> playwright.inspect('text=Log in')
|
||||
```
|
||||
|
||||
### playwright.locator(selector)
|
||||
|
||||
Query Playwright element using the actual Playwright query engine, for example:
|
||||
|
||||
```txt
|
||||
> playwright.locator('.auth-form', { hasText: 'Log in' });
|
||||
|
||||
> Locator ()
|
||||
> - element: button
|
||||
> - elements: [button]
|
||||
```
|
||||
|
||||
### playwright.highlight(selector)
|
||||
|
||||
Highlight the first occurrence of the locator:
|
||||
|
||||
```txt
|
||||
> playwright.hightlight('.auth-form');
|
||||
```
|
||||
|
||||
### playwright.clear()
|
||||
|
||||
```txt
|
||||
> playwright.clear()
|
||||
```
|
||||
|
||||
Clear existing highlights.
|
||||
|
||||
### playwright.selector(element)
|
||||
|
||||
Generates selector for the given element.
|
||||
|
||||
```txt
|
||||
> playwright.selector($0)
|
||||
|
||||
"div[id="glow-ingress-block"] >> text=/.*Hello.*/"
|
||||
```
|
||||
|
||||
## Verbose API logs
|
||||
|
||||
Playwright supports verbose logging with the `DEBUG` environment variable.
|
||||
|
||||
```bash tab=bash-bash lang=js
|
||||
DEBUG=pw:api npm run test
|
||||
```
|
||||
|
||||
```batch tab=bash-batch lang=js
|
||||
set DEBUG=pw:api
|
||||
npm run test
|
||||
```
|
||||
|
||||
```powershell tab=bash-powershell lang=js
|
||||
$env:DEBUG="pw:api"
|
||||
npm run test
|
||||
```
|
||||
|
||||
```bash tab=bash-bash lang=java
|
||||
DEBUG=pw:api mvn test
|
||||
```
|
||||
|
||||
```batch tab=bash-batch lang=java
|
||||
set DEBUG=pw:api
|
||||
mvn test
|
||||
```
|
||||
|
||||
```powershell tab=bash-powershell lang=java
|
||||
$env:DEBUG="pw:api"
|
||||
mvn test
|
||||
```
|
||||
|
||||
```bash tab=bash-bash lang=python
|
||||
DEBUG=pw:api pytest -s
|
||||
```
|
||||
|
||||
```batch tab=bash-batch lang=python
|
||||
set DEBUG=pw:api
|
||||
pytest -s
|
||||
```
|
||||
|
||||
```powershell tab=bash-powershell lang=python
|
||||
$env:DEBUG="pw:api"
|
||||
pytest -s
|
||||
```
|
||||
|
||||
```bash tab=bash-bash lang=csharp
|
||||
DEBUG=pw:api dotnet run
|
||||
```
|
||||
|
||||
```batch tab=bash-batch lang=csharp
|
||||
set DEBUG=pw:api
|
||||
dotnet run
|
||||
```
|
||||
|
||||
```powershell tab=bash-powershell lang=csharp
|
||||
$env:DEBUG="pw:api"
|
||||
dotnet run
|
||||
```
|
||||
|
|
@ -3,8 +3,7 @@ id: debug
|
|||
title: "Debugging Tests"
|
||||
---
|
||||
|
||||
The Playwright inspector is a great tool to help with debugging. It opens up a browser window highlighting the selectors as you step through each line of the test. You can also use the explore button to find other available [selectors](./selectors.md) which you can then copy into your test file and rerun your tests to see if it passes.
|
||||
|
||||
The Playwright inspector is a great tool to help with debugging. It opens up a browser window highlighting the selectors as you step through each line of the test. You can also use the explore button to find other available [selectors](./selectors.md) which you can then copy into your test file and rerun your tests to see if it passes. For debugging selectors, see [here](./debug-selectors.md).
|
||||
|
||||
## Playwright Inspector
|
||||
|
||||
|
|
@ -14,96 +13,99 @@ Playwright Inspector is a GUI tool that helps authoring and debugging Playwright
|
|||
|
||||
There are several ways of opening Playwright Inspector:
|
||||
|
||||
### Using --debug
|
||||
### --debug
|
||||
* langs: js
|
||||
|
||||
- Debugging all Tests
|
||||
* Debugging all Tests
|
||||
|
||||
```bash
|
||||
npx playwright test --debug
|
||||
```
|
||||
- Debugging one test
|
||||
|
||||
* Debugging one test
|
||||
|
||||
```bash
|
||||
npx playwright test example --debug
|
||||
```
|
||||
|
||||
### Using PWDEBUG
|
||||
### PWDEBUG
|
||||
|
||||
Set the `PWDEBUG` environment variable to run your scripts in debug mode. This
|
||||
configures Playwright for debugging and opens the inspector.
|
||||
|
||||
```bash tab=bash-bash lang=js
|
||||
PWDEBUG=1 npm run test
|
||||
```
|
||||
```bash tab=bash-bash lang=js
|
||||
PWDEBUG=1 npm run test
|
||||
```
|
||||
|
||||
```batch tab=bash-batch lang=js
|
||||
set PWDEBUG=1
|
||||
npm run test
|
||||
```
|
||||
```batch tab=bash-batch lang=js
|
||||
set PWDEBUG=1
|
||||
npm run test
|
||||
```
|
||||
|
||||
```powershell tab=bash-powershell lang=js
|
||||
$env:PWDEBUG=1
|
||||
npm run test
|
||||
```
|
||||
```powershell tab=bash-powershell lang=js
|
||||
$env:PWDEBUG=1
|
||||
npm run test
|
||||
```
|
||||
|
||||
```bash tab=bash-bash lang=java
|
||||
# Source directories in the list are separated by : on macos and linux and by ; on win.
|
||||
PWDEBUG=1 PLAYWRIGHT_JAVA_SRC=<java source dirs> mvn test
|
||||
```
|
||||
```bash tab=bash-bash lang=java
|
||||
# Source directories in the list are separated by : on macos and linux and by ; on win.
|
||||
PWDEBUG=1 PLAYWRIGHT_JAVA_SRC=<java source dirs> mvn test
|
||||
```
|
||||
|
||||
```batch tab=bash-batch lang=java
|
||||
# Source directories in the list are separated by : on macos and linux and by ; on win.
|
||||
set PLAYWRIGHT_JAVA_SRC=<java source dirs>
|
||||
set PWDEBUG=1
|
||||
mvn test
|
||||
```
|
||||
```batch tab=bash-batch lang=java
|
||||
# Source directories in the list are separated by : on macos and linux and by ; on win.
|
||||
set PLAYWRIGHT_JAVA_SRC=<java source dirs>
|
||||
set PWDEBUG=1
|
||||
mvn test
|
||||
```
|
||||
|
||||
```powershell tab=bash-powershell lang=java
|
||||
# Source directories in the list are separated by : on macos and linux and by ; on win.
|
||||
$env:PLAYWRIGHT_JAVA_SRC="<java source dirs>"
|
||||
$env:PWDEBUG=1
|
||||
mvn test
|
||||
```
|
||||
```powershell tab=bash-powershell lang=java
|
||||
# Source directories in the list are separated by : on macos and linux and by ; on win.
|
||||
$env:PLAYWRIGHT_JAVA_SRC="<java source dirs>"
|
||||
$env:PWDEBUG=1
|
||||
mvn test
|
||||
```
|
||||
|
||||
```bash tab=bash-bash lang=python
|
||||
PWDEBUG=1 pytest -s
|
||||
```
|
||||
```bash tab=bash-bash lang=python
|
||||
PWDEBUG=1 pytest -s
|
||||
```
|
||||
|
||||
```batch tab=bash-batch lang=python
|
||||
set PWDEBUG=1
|
||||
pytest -s
|
||||
```
|
||||
```batch tab=bash-batch lang=python
|
||||
set PWDEBUG=1
|
||||
pytest -s
|
||||
```
|
||||
|
||||
```powershell tab=bash-powershell lang=python
|
||||
$env:PWDEBUG=1
|
||||
pytest -s
|
||||
```
|
||||
```powershell tab=bash-powershell lang=python
|
||||
$env:PWDEBUG=1
|
||||
pytest -s
|
||||
```
|
||||
|
||||
```bash tab=bash-bash lang=csharp
|
||||
PWDEBUG=1 dotnet test
|
||||
```
|
||||
```bash tab=bash-bash lang=csharp
|
||||
PWDEBUG=1 dotnet test
|
||||
```
|
||||
|
||||
```batch tab=bash-batch lang=csharp
|
||||
set PWDEBUG=1
|
||||
dotnet test
|
||||
```
|
||||
```batch tab=bash-batch lang=csharp
|
||||
set PWDEBUG=1
|
||||
dotnet test
|
||||
```
|
||||
|
||||
```powershell tab=bash-powershell lang=csharp
|
||||
$env:PWDEBUG=1
|
||||
dotnet test
|
||||
```
|
||||
```powershell tab=bash-powershell lang=csharp
|
||||
$env:PWDEBUG=1
|
||||
dotnet test
|
||||
```
|
||||
|
||||
Additional useful defaults are configured when `PWDEBUG=1` is set:
|
||||
- Browsers launch in the headed mode
|
||||
- Default timeout is set to 0 (= no timeout)
|
||||
Additional useful defaults are configured when `PWDEBUG=1` is set:
|
||||
|
||||
- Browsers launch in the headed mode
|
||||
- Default timeout is set to 0 (= no timeout)
|
||||
|
||||
Using `PWDEBUG=console` will configure the browser for debugging in Developer tools console:
|
||||
* **Runs headed**: Browsers always launch in headed mode
|
||||
* **Disables timeout**: Sets default timeout to 0 (= no timeout)
|
||||
* **Console helper**: Configures a `playwright` object in the browser to generate and highlight
|
||||
[Playwright selectors](./selectors.md). This can be used to verify text or
|
||||
composite selectors.
|
||||
|
||||
- **Runs headed**: Browsers always launch in headed mode
|
||||
- **Disables timeout**: Sets default timeout to 0 (= no timeout)
|
||||
- **Console helper**: Configures a `playwright` object in the browser to generate and highlight
|
||||
[Playwright selectors](./selectors.md). This can be used to verify text or
|
||||
composite selectors.
|
||||
|
||||
```bash tab=bash-bash lang=js
|
||||
PWDEBUG=console npm run test
|
||||
|
|
@ -147,86 +149,71 @@ $env:PWDEBUG="console"
|
|||
pytest -s
|
||||
```
|
||||
|
||||
#### Selectors in Developer Tools Console
|
||||
|
||||
When running in Debug Mode with `PWDEBUG=console`, a `playwright` object is available in Developer tools console.
|
||||
|
||||
1. Run with `PWDEBUG=console`
|
||||
1. Setup a breakpoint to pause the execution
|
||||
1. Open the console panel in browser developer tools
|
||||
1. Use the `playwright` API
|
||||
* `playwright.$(selector)`: Highlight the first occurrence of the selector. This reflects
|
||||
how `page.$` would see the page.
|
||||
* `playwright.$$(selector)`: Highlight all occurrences of the selector. This reflects
|
||||
how `page.$$` would see the page.
|
||||
* `playwright.inspect(selector)`: Inspect the selector in the Elements panel.
|
||||
* `playwright.locator(selector)`: Highlight the first occurrence of the locator.
|
||||
* `playwright.clear()`: Clear existing highlights.
|
||||
* `playwright.selector(element)`: Generate a selector that points to the element.
|
||||
|
||||
<a href="https://user-images.githubusercontent.com/284612/86857345-299abc00-c073-11ea-9e31-02923a9f0d4b.png"><img src="https://user-images.githubusercontent.com/284612/86857345-299abc00-c073-11ea-9e31-02923a9f0d4b.png" width="500" alt="Highlight selectors"></img></a>
|
||||
|
||||
|
||||
### Using page.pause
|
||||
### page.pause
|
||||
|
||||
Call [`method: Page.pause`] method from your script when running in headed browser.
|
||||
|
||||
```js
|
||||
// Pause on the following line.
|
||||
await page.pause();
|
||||
```
|
||||
```js
|
||||
// Pause on the following line.
|
||||
await page.pause();
|
||||
```
|
||||
|
||||
```java
|
||||
// Pause on the following line.
|
||||
page.pause();
|
||||
```
|
||||
```java
|
||||
// Pause on the following line.
|
||||
page.pause();
|
||||
```
|
||||
|
||||
```python async
|
||||
# Pause on the following line.
|
||||
await page.pause()
|
||||
```
|
||||
```python async
|
||||
# Pause on the following line.
|
||||
await page.pause()
|
||||
```
|
||||
|
||||
```python sync
|
||||
# Pause on the following line.
|
||||
page.pause()
|
||||
```
|
||||
```python sync
|
||||
# Pause on the following line.
|
||||
page.pause()
|
||||
```
|
||||
|
||||
```csharp
|
||||
// Pause on the following line.
|
||||
await page.PauseAsync();
|
||||
```
|
||||
```csharp
|
||||
// Pause on the following line.
|
||||
await page.PauseAsync();
|
||||
```
|
||||
|
||||
Use `open` or `codegen` commands in the Playwright [CLI](./cli.md):
|
||||
|
||||
- Use `open` or `codegen` commands in the Playwright [CLI](./cli.md):
|
||||
```bash js
|
||||
npx playwright codegen wikipedia.org
|
||||
```
|
||||
```bash js
|
||||
npx playwright codegen wikipedia.org
|
||||
```
|
||||
|
||||
```bash java
|
||||
mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen wikipedia.org"
|
||||
```
|
||||
```bash java
|
||||
mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen wikipedia.org"
|
||||
```
|
||||
|
||||
```bash python
|
||||
playwright codegen wikipedia.org
|
||||
```
|
||||
```bash python
|
||||
playwright codegen wikipedia.org
|
||||
```
|
||||
|
||||
```bash csharp
|
||||
pwsh bin\Debug\netX\playwright.ps1 codegen wikipedia.org
|
||||
```
|
||||
```bash csharp
|
||||
pwsh bin\Debug\netX\playwright.ps1 codegen wikipedia.org
|
||||
```
|
||||
|
||||
## Stepping through the Playwright script
|
||||
### Stepping through the Playwright script
|
||||
|
||||
When `PWDEBUG=1` is set, Playwright Inspector window will be opened and the script will be
|
||||
paused on the first Playwright statement:
|
||||
The Inspector opens up a browser window highlighting the selectors as you step through each line of the test. Use the explore button to find other available [selectors](./selectors.md) which you can then copy into your test file and rerun your tests to see if they pass.
|
||||
|
||||
<img width="557" alt="Paused on line" src="https://user-images.githubusercontent.com/883973/108614337-71761580-73ae-11eb-9f61-3d29c52c9520.png"></img>
|
||||
|
||||
Use the toolbar to play the test or step over each action using the "Step over" action (keyboard shortcut: `F10`) or resume script without further pauses (`F8`):
|
||||
|
||||
<center><img width="98" alt="Stepping toolbar" src="https://user-images.githubusercontent.com/883973/108614389-f9f4b600-73ae-11eb-8df2-8d9ce9da5d5c.png"></img></center>
|
||||
|
||||
Now we know what action is about to be performed and we can look into the details on that
|
||||
action. For example, when stopped on an input action such as `click`, the exact point Playwright is about to click is highlighted with the large red dot on the inspected page:
|
||||
|
||||
<img width="344" alt="Red dot on inspected page" src="https://user-images.githubusercontent.com/883973/108614363-b69a4780-73ae-11eb-8f5e-51f9c91ec9b4.png"></img>
|
||||
|
||||
By the time Playwright has paused on that click action, it has already performed actionability checks that can be found in the log:
|
||||
### Actionability Logs
|
||||
|
||||
By the time Playwright has paused on that click action, it has already performed [actionability checks](./actionability.md) that can be found in the log:
|
||||
|
||||
<img width="712" alt="Action log" src="https://user-images.githubusercontent.com/883973/108614564-72a84200-73b0-11eb-9de2-828b28d78b36.png"></img>
|
||||
|
||||
|
|
@ -234,26 +221,26 @@ If actionability can't be reached, it'll show action as pending:
|
|||
|
||||
<img width="712" alt="Pending action" src="https://user-images.githubusercontent.com/883973/108614840-e6e3e500-73b2-11eb-998f-0cf31b2aa9a2.png"></img>
|
||||
|
||||
You can step over each action using the "Step over" action (keyboard shortcut: `F10`) or resume script without further pauses (`F8`):
|
||||
|
||||
<center><img width="98" alt="Stepping toolbar" src="https://user-images.githubusercontent.com/883973/108614389-f9f4b600-73ae-11eb-8df2-8d9ce9da5d5c.png"></img></center>
|
||||
### Exploring selectors
|
||||
|
||||
Use the Explore button to hover over an element on the page and explore it's selector by clicking on it. You can then copy this selector into your tests and rerun your tests to see if they now pass with this selector. You can also debug selectors, checkout our [debugging selectors](./debug-selectors.md) guide for more details.
|
||||
|
||||
## Browser Developer Tools
|
||||
|
||||
You can use browser developer tools in Chromium, Firefox and WebKit while running
|
||||
a Playwright script in headed mode. Developer tools help to:
|
||||
|
||||
* Inspect the DOM tree and **find element selectors**
|
||||
* **See console logs** during execution (or learn how to [read logs via API](./api/class-page.md#page-event-console))
|
||||
* Check **network activity** and other developer tools features
|
||||
- Inspect the DOM tree and **find element selectors**
|
||||
- **See console logs** during execution (or learn how to [read logs via API](./api/class-page.md#page-event-console))
|
||||
- Check **network activity** and other developer tools features
|
||||
|
||||
<a href="https://user-images.githubusercontent.com/284612/77234134-5f21a500-6b69-11ea-92ec-1c146e1333ec.png"><img src="https://user-images.githubusercontent.com/284612/77234134-5f21a500-6b69-11ea-92ec-1c146e1333ec.png" width="500" alt="Chromium Developer Tools"></img></a>
|
||||
|
||||
Using a [`method: Page.pause`] method is an easy way to pause the Playwright script execution
|
||||
and inspect the page in Developer tools. It will also open [Playwright Inspector](./inspector.md) to help with debugging.
|
||||
and inspect the page in Developer tools. It will also open Playwright Inspector to help with debugging.
|
||||
|
||||
**For Chromium**: you can also open developer tools through a launch option.
|
||||
|
||||
```js
|
||||
await chromium.launch({ devtools: true });
|
||||
```
|
||||
|
|
@ -279,82 +266,10 @@ await using var browser = await playwright.Chromium.LaunchAsync(new()
|
|||
|
||||
:::note
|
||||
**For WebKit**: launching WebKit Inspector during the execution will
|
||||
prevent the Playwright script from executing any further.
|
||||
prevent the Playwright script from executing any further.
|
||||
:::
|
||||
|
||||
## Debugging Selectors
|
||||
|
||||
- Click the Explore button to hover over elements in the screen and click them to
|
||||
automatically generate selectors for those elements.
|
||||
- To verify where selector points, paste it into the inspector input field:
|
||||
|
||||
<img width="602" alt="Selectors toolbar" src="https://user-images.githubusercontent.com/883973/108614696-ad5eaa00-73b1-11eb-81f5-9eebe62543a2.png"></img>
|
||||
|
||||
You can also use the following API inside the Developer Tools Console of any browser.
|
||||
|
||||
<img src="https://user-images.githubusercontent.com/284612/92536317-37dd9380-f1ee-11ea-875d-daf1b206dd56.png"></img>
|
||||
|
||||
#### playwright.$(selector)
|
||||
|
||||
Query Playwright selector, using the actual Playwright query engine, for example:
|
||||
|
||||
```js
|
||||
> playwright.$('.auth-form >> text=Log in');
|
||||
|
||||
<button>Log in</button>
|
||||
```
|
||||
|
||||
#### playwright.$$(selector)
|
||||
|
||||
Same as `playwright.$`, but returns all matching elements.
|
||||
|
||||
```js
|
||||
> playwright.$$('li >> text=John')
|
||||
|
||||
> [<li>, <li>, <li>, <li>]
|
||||
```
|
||||
|
||||
#### playwright.inspect(selector)
|
||||
|
||||
Reveal element in the Elements panel (if DevTools of the respective browser supports it).
|
||||
|
||||
```js
|
||||
> playwright.inspect('text=Log in')
|
||||
```
|
||||
|
||||
#### playwright.locator(selector)
|
||||
|
||||
Query Playwright element using the actual Playwright query engine, for example:
|
||||
|
||||
```js
|
||||
> playwright.locator('.auth-form', { hasText: 'Log in' });
|
||||
|
||||
> Locator ()
|
||||
> - element: button
|
||||
> - elements: [button]
|
||||
```
|
||||
|
||||
#### playwright.selector(element)
|
||||
|
||||
Generates selector for the given element.
|
||||
|
||||
```js
|
||||
> playwright.selector($0)
|
||||
|
||||
"div[id="glow-ingress-block"] >> text=/.*Hello.*/"
|
||||
```
|
||||
|
||||
<!-- ## Recording scripts
|
||||
|
||||
At any moment, clicking Record action enables [codegen mode](./codegen.md).
|
||||
Every action on the target page is turned into the generated script:
|
||||
|
||||
<img width="712" alt="Recorded script" src="https://user-images.githubusercontent.com/883973/108614897-85704600-73b3-11eb-8bcd-f2e129786c49.png"></img>
|
||||
|
||||
You can copy entire generated script or clear it using toolbar actions. -->
|
||||
|
||||
|
||||
## Run Tests in headed mode
|
||||
## Headed mode
|
||||
|
||||
Playwright runs browsers in headless mode by default. To change this behavior,
|
||||
use `headless: false` as a launch option. You can also use the [`option: slowMo`] option
|
||||
|
|
@ -372,12 +287,10 @@ chromium.launch(new BrowserType.LaunchOptions() // or firefox, webkit
|
|||
|
||||
```python async
|
||||
await chromium.launch(headless=False, slow_mo=100) # or firefox, webkit
|
||||
|
||||
```
|
||||
|
||||
```python sync
|
||||
chromium.launch(headless=False, slow_mo=100) # or firefox, webkit
|
||||
|
||||
```
|
||||
|
||||
```csharp
|
||||
|
|
@ -389,67 +302,4 @@ await using var browser = await playwright.Chromium.LaunchAsync(new()
|
|||
});
|
||||
```
|
||||
|
||||
## Verbose API logs
|
||||
|
||||
Playwright supports verbose logging with the `DEBUG` environment variable.
|
||||
|
||||
```bash tab=bash-bash lang=js
|
||||
DEBUG=pw:api npm run test
|
||||
```
|
||||
|
||||
```batch tab=bash-batch lang=js
|
||||
set DEBUG=pw:api
|
||||
npm run test
|
||||
```
|
||||
|
||||
```powershell tab=bash-powershell lang=js
|
||||
$env:DEBUG="pw:api"
|
||||
npm run test
|
||||
```
|
||||
|
||||
```bash tab=bash-bash lang=java
|
||||
DEBUG=pw:api mvn test
|
||||
```
|
||||
|
||||
```batch tab=bash-batch lang=java
|
||||
set DEBUG=pw:api
|
||||
mvn test
|
||||
```
|
||||
|
||||
```powershell tab=bash-powershell lang=java
|
||||
$env:DEBUG="pw:api"
|
||||
mvn test
|
||||
```
|
||||
|
||||
```bash tab=bash-bash lang=python
|
||||
DEBUG=pw:api pytest -s
|
||||
```
|
||||
|
||||
```batch tab=bash-batch lang=python
|
||||
set DEBUG=pw:api
|
||||
pytest -s
|
||||
```
|
||||
|
||||
```powershell tab=bash-powershell lang=python
|
||||
$env:DEBUG="pw:api"
|
||||
pytest -s
|
||||
```
|
||||
|
||||
```bash tab=bash-bash lang=csharp
|
||||
DEBUG=pw:api dotnet run
|
||||
```
|
||||
|
||||
```batch tab=bash-batch lang=csharp
|
||||
set DEBUG=pw:api
|
||||
dotnet run
|
||||
```
|
||||
|
||||
```powershell tab=bash-powershell lang=csharp
|
||||
$env:DEBUG="pw:api"
|
||||
dotnet run
|
||||
```
|
||||
|
||||
## What's Next
|
||||
|
||||
- [Generate tests with Codegen](./codegen.md)
|
||||
- [See a trace of your tests](./trace-viewer.md)
|
||||
|
|
@ -1,236 +0,0 @@
|
|||
---
|
||||
id: inspector
|
||||
title: "Inspector"
|
||||
---
|
||||
|
||||
Playwright Inspector is a GUI tool that helps authoring and debugging Playwright scripts.
|
||||
|
||||
<img width="712" alt="Playwright Inspector" src="https://user-images.githubusercontent.com/883973/108614092-8c478a80-73ac-11eb-9597-67dfce110e00.png"></img>
|
||||
|
||||
<!-- TOC -->
|
||||
|
||||
## Open Playwright Inspector
|
||||
|
||||
There are several ways of opening Playwright Inspector:
|
||||
|
||||
- Set the `PWDEBUG` environment variable to run your scripts in debug mode. This
|
||||
configures Playwright for debugging and opens the inspector.
|
||||
|
||||
```bash tab=bash-bash lang=js
|
||||
PWDEBUG=1 npm run test
|
||||
```
|
||||
|
||||
```batch tab=bash-batch lang=js
|
||||
set PWDEBUG=1
|
||||
npm run test
|
||||
```
|
||||
|
||||
```powershell tab=bash-powershell lang=js
|
||||
$env:PWDEBUG=1
|
||||
npm run test
|
||||
```
|
||||
|
||||
```bash tab=bash-bash lang=java
|
||||
# Source directories in the list are separated by : on macos and linux and by ; on win.
|
||||
PWDEBUG=1 PLAYWRIGHT_JAVA_SRC=<java source dirs> mvn test
|
||||
```
|
||||
|
||||
```batch tab=bash-batch lang=java
|
||||
# Source directories in the list are separated by : on macos and linux and by ; on win.
|
||||
set PLAYWRIGHT_JAVA_SRC=<java source dirs>
|
||||
set PWDEBUG=1
|
||||
mvn test
|
||||
```
|
||||
|
||||
```powershell tab=bash-powershell lang=java
|
||||
# Source directories in the list are separated by : on macos and linux and by ; on win.
|
||||
$env:PLAYWRIGHT_JAVA_SRC="<java source dirs>"
|
||||
$env:PWDEBUG=1
|
||||
mvn test
|
||||
```
|
||||
|
||||
```bash tab=bash-bash lang=python
|
||||
PWDEBUG=1 pytest -s
|
||||
```
|
||||
|
||||
```batch tab=bash-batch lang=python
|
||||
set PWDEBUG=1
|
||||
pytest -s
|
||||
```
|
||||
|
||||
```powershell tab=bash-powershell lang=python
|
||||
$env:PWDEBUG=1
|
||||
pytest -s
|
||||
```
|
||||
|
||||
```bash tab=bash-bash lang=csharp
|
||||
PWDEBUG=1 dotnet test
|
||||
```
|
||||
|
||||
```batch tab=bash-batch lang=csharp
|
||||
set PWDEBUG=1
|
||||
dotnet test
|
||||
```
|
||||
|
||||
```powershell tab=bash-powershell lang=csharp
|
||||
$env:PWDEBUG=1
|
||||
dotnet test
|
||||
```
|
||||
|
||||
Additional useful defaults are configured when `PWDEBUG=1` is set:
|
||||
- Browsers launch in the headed mode
|
||||
- Default timeout is set to 0 (= no timeout)
|
||||
|
||||
- Call [`method: Page.pause`] method from your script when running in headed browser.
|
||||
|
||||
```js
|
||||
// Pause on the following line.
|
||||
await page.pause();
|
||||
```
|
||||
|
||||
```java
|
||||
// Pause on the following line.
|
||||
page.pause();
|
||||
```
|
||||
|
||||
```python async
|
||||
# Pause on the following line.
|
||||
await page.pause()
|
||||
```
|
||||
|
||||
```python sync
|
||||
# Pause on the following line.
|
||||
page.pause()
|
||||
```
|
||||
|
||||
```csharp
|
||||
// Pause on the following line.
|
||||
await page.PauseAsync();
|
||||
```
|
||||
|
||||
|
||||
- Use `open` or `codegen` commands in the Playwright [CLI](./cli.md):
|
||||
```bash js
|
||||
npx playwright codegen wikipedia.org
|
||||
```
|
||||
|
||||
```bash java
|
||||
mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen wikipedia.org"
|
||||
```
|
||||
|
||||
```bash python
|
||||
playwright codegen wikipedia.org
|
||||
```
|
||||
|
||||
```bash csharp
|
||||
pwsh bin\Debug\netX\playwright.ps1 codegen wikipedia.org
|
||||
```
|
||||
|
||||
## Stepping through the Playwright script
|
||||
|
||||
When `PWDEBUG=1` is set, Playwright Inspector window will be opened and the script will be
|
||||
paused on the first Playwright statement:
|
||||
|
||||
<img width="557" alt="Paused on line" src="https://user-images.githubusercontent.com/883973/108614337-71761580-73ae-11eb-9f61-3d29c52c9520.png"></img>
|
||||
|
||||
Now we know what action is about to be performed and we can look into the details on that
|
||||
action. For example, when stopped on an input action such as `click`, the exact point Playwright is about to click is highlighted with the large red dot on the inspected page:
|
||||
|
||||
<img width="344" alt="Red dot on inspected page" src="https://user-images.githubusercontent.com/883973/108614363-b69a4780-73ae-11eb-8f5e-51f9c91ec9b4.png"></img>
|
||||
|
||||
By the time Playwright has paused on that click action, it has already performed actionability checks that can be found in the log:
|
||||
|
||||
<img width="712" alt="Action log" src="https://user-images.githubusercontent.com/883973/108614564-72a84200-73b0-11eb-9de2-828b28d78b36.png"></img>
|
||||
|
||||
If actionability can't be reached, it'll show action as pending:
|
||||
|
||||
<img width="712" alt="Pending action" src="https://user-images.githubusercontent.com/883973/108614840-e6e3e500-73b2-11eb-998f-0cf31b2aa9a2.png"></img>
|
||||
|
||||
You can step over each action using the "Step over" action (keyboard shortcut: `F10`) or resume script without further pauses (`F8`):
|
||||
|
||||
<center><img width="98" alt="Stepping toolbar" src="https://user-images.githubusercontent.com/883973/108614389-f9f4b600-73ae-11eb-8df2-8d9ce9da5d5c.png"></img></center>
|
||||
|
||||
## Using Browser Developer Tools
|
||||
|
||||
You can use browser developer tools in Chromium, Firefox and WebKit while running
|
||||
a Playwright script, with or without Playwright inspector. Developer tools help to:
|
||||
|
||||
* Inspect the DOM tree
|
||||
* **See console logs** during execution (or learn how to [read logs via API](./api/class-page.md#page-event-console))
|
||||
* Check **network activity** and other developer tools features
|
||||
|
||||
:::note
|
||||
**For WebKit**: launching WebKit Inspector during the execution will
|
||||
prevent the Playwright script from executing any further.
|
||||
:::
|
||||
|
||||
## Debugging Selectors
|
||||
|
||||
- Click the Explore button to hover over elements in the screen and click them to
|
||||
automatically generate selectors for those elements.
|
||||
- To verify where selector points, paste it into the inspector input field:
|
||||
|
||||
<img width="602" alt="Selectors toolbar" src="https://user-images.githubusercontent.com/883973/108614696-ad5eaa00-73b1-11eb-81f5-9eebe62543a2.png"></img>
|
||||
|
||||
You can also use the following API inside the Developer Tools Console of any browser.
|
||||
|
||||
<img src="https://user-images.githubusercontent.com/284612/92536317-37dd9380-f1ee-11ea-875d-daf1b206dd56.png"></img>
|
||||
|
||||
#### playwright.$(selector)
|
||||
|
||||
Query Playwright selector, using the actual Playwright query engine, for example:
|
||||
|
||||
```js
|
||||
> playwright.$('.auth-form >> text=Log in');
|
||||
|
||||
<button>Log in</button>
|
||||
```
|
||||
|
||||
#### playwright.$$(selector)
|
||||
|
||||
Same as `playwright.$`, but returns all matching elements.
|
||||
|
||||
```js
|
||||
> playwright.$$('li >> text=John')
|
||||
|
||||
> [<li>, <li>, <li>, <li>]
|
||||
```
|
||||
|
||||
#### playwright.inspect(selector)
|
||||
|
||||
Reveal element in the Elements panel (if DevTools of the respective browser supports it).
|
||||
|
||||
```js
|
||||
> playwright.inspect('text=Log in')
|
||||
```
|
||||
|
||||
#### playwright.locator(selector)
|
||||
|
||||
Query Playwright element using the actual Playwright query engine, for example:
|
||||
|
||||
```js
|
||||
> playwright.locator('.auth-form', { hasText: 'Log in' });
|
||||
|
||||
> Locator ()
|
||||
> - element: button
|
||||
> - elements: [button]
|
||||
```
|
||||
|
||||
#### playwright.selector(element)
|
||||
|
||||
Generates selector for the given element.
|
||||
|
||||
```js
|
||||
> playwright.selector($0)
|
||||
|
||||
"div[id="glow-ingress-block"] >> text=/.*Hello.*/"
|
||||
```
|
||||
|
||||
## Recording scripts
|
||||
|
||||
At any moment, clicking Record action enables [codegen mode](./codegen.md).
|
||||
Every action on the target page is turned into the generated script:
|
||||
|
||||
<img width="712" alt="Recorded script" src="https://user-images.githubusercontent.com/883973/108614897-85704600-73b3-11eb-8bcd-f2e129786c49.png"></img>
|
||||
|
||||
You can copy entire generated script or clear it using toolbar actions.
|
||||
|
|
@ -189,7 +189,6 @@ See our doc on [Test Runners](./test-runners.md) to learn more about running tes
|
|||
- [Write tests using web first assertions, page fixtures and locators](./writing-tests.md)
|
||||
- [Run single tests, multiple tests, headed mode](./running-tests.md)
|
||||
- [Learn more about the NUnit and MSTest base classes](./test-runners.md)
|
||||
- [Debug tests with the Playwright Debugger](./debug.md)
|
||||
- [Generate tests with Codegen](./codegen.md)
|
||||
- [See a trace of your tests](./trace-viewer.md)
|
||||
- [Using Playwright as library](./library.md)
|
||||
|
|
|
|||
|
|
@ -83,6 +83,5 @@ npx playwright show-report
|
|||
|
||||
- [Write tests using web first assertions, page fixtures and locators](./writing-tests.md)
|
||||
- [Run single tests, multiple tests, headed mode](./running-tests.md)
|
||||
- [Debug tests with the Playwright Debugger](./debug.md)
|
||||
- [Generate tests with Codegen](./codegen.md)
|
||||
- [See a trace of your tests](./trace-viewer.md)
|
||||
|
|
@ -65,6 +65,5 @@ See our doc on [Running Tests](./running-tests.md) to learn more about running t
|
|||
|
||||
- [Write tests using web first assertions, page fixtures and locators](./writing-tests.md)
|
||||
- [Run single tests, multiple tests, headed mode](./running-tests.md)
|
||||
- [Debug tests with the Playwright Debugger](./debug.md)
|
||||
- [Generate tests with Codegen](./codegen.md)
|
||||
- [See a trace of your tests](./trace-viewer.md)
|
||||
|
|
|
|||
|
|
@ -152,7 +152,7 @@ Once you're on Playwright Test, you get a lot!
|
|||
- Built-in test artifact collection: [video recording](./test-configuration#record-video), [screenshots](./test-configuration#automatic-screenshots) and [playwright traces](./test-configuration#record-test-trace)
|
||||
|
||||
Also you get all these ✨ awesome tools ✨ that come bundled with Playwright Test:
|
||||
- [Playwright Inspector](./inspector)
|
||||
- [Playwright Inspector](./debug.md)
|
||||
- [Playwright Test Code generation](./auth#code-generation)
|
||||
- [Playwright Tracing](./trace-viewer) for post-mortem debugging
|
||||
|
||||
|
|
|
|||
|
|
@ -630,13 +630,13 @@ This version of Playwright was also tested against the following stable channels
|
|||
|
||||
## Version 1.9
|
||||
|
||||
- [Playwright Inspector](./inspector.md) is a **new GUI tool** to author and debug your tests.
|
||||
- [Playwright Inspector](./debug.md) is a **new GUI tool** to author and debug your tests.
|
||||
- **Line-by-line debugging** of your Playwright scripts, with play, pause and step-through.
|
||||
- Author new scripts by **recording user actions**.
|
||||
- **Generate element selectors** for your script by hovering over elements.
|
||||
- Set the `PWDEBUG=1` environment variable to launch the Inspector
|
||||
|
||||
- **Pause script execution** with [`method: Page.pause`] in headed mode. Pausing the page launches [Playwright Inspector](./inspector.md) for debugging.
|
||||
- **Pause script execution** with [`method: Page.pause`] in headed mode. Pausing the page launches [Playwright Inspector](./debug.md) for debugging.
|
||||
|
||||
- **New has-text pseudo-class** for CSS selectors. `:has-text("example")` matches any element containing `"example"` somewhere inside, possibly in a child or a descendant element. See [more examples](./selectors.md#text-selector).
|
||||
|
||||
|
|
|
|||
|
|
@ -1239,13 +1239,13 @@ This version of Playwright was also tested against the following stable channels
|
|||
|
||||
## Version 1.9
|
||||
|
||||
- [Playwright Inspector](./inspector.md) is a **new GUI tool** to author and debug your tests.
|
||||
- [Playwright Inspector](./debug.md) is a **new GUI tool** to author and debug your tests.
|
||||
- **Line-by-line debugging** of your Playwright scripts, with play, pause and step-through.
|
||||
- Author new scripts by **recording user actions**.
|
||||
- **Generate element selectors** for your script by hovering over elements.
|
||||
- Set the `PWDEBUG=1` environment variable to launch the Inspector
|
||||
|
||||
- **Pause script execution** with [`method: Page.pause`] in headed mode. Pausing the page launches [Playwright Inspector](./inspector.md) for debugging.
|
||||
- **Pause script execution** with [`method: Page.pause`] in headed mode. Pausing the page launches [Playwright Inspector](./debug.md) for debugging.
|
||||
|
||||
- **New has-text pseudo-class** for CSS selectors. `:has-text("example")` matches any element containing `"example"` somewhere inside, possibly in a child or a descendant element. See [more examples](./selectors.md#text-selector).
|
||||
|
||||
|
|
|
|||
|
|
@ -704,13 +704,13 @@ This version of Playwright was also tested against the following stable channels
|
|||
|
||||
## Version 1.9
|
||||
|
||||
- [Playwright Inspector](./inspector.md) is a **new GUI tool** to author and debug your tests.
|
||||
- [Playwright Inspector](./debug.md) is a **new GUI tool** to author and debug your tests.
|
||||
- **Line-by-line debugging** of your Playwright scripts, with play, pause and step-through.
|
||||
- Author new scripts by **recording user actions**.
|
||||
- **Generate element selectors** for your script by hovering over elements.
|
||||
- Set the `PWDEBUG=1` environment variable to launch the Inspector
|
||||
|
||||
- **Pause script execution** with [`method: Page.pause`] in headed mode. Pausing the page launches [Playwright Inspector](./inspector.md) for debugging.
|
||||
- **Pause script execution** with [`method: Page.pause`] in headed mode. Pausing the page launches [Playwright Inspector](./debug.md) for debugging.
|
||||
|
||||
- **New has-text pseudo-class** for CSS selectors. `:has-text("example")` matches any element containing `"example"` somewhere inside, possibly in a child or a descendant element. See [more examples](./selectors.md#text-selector).
|
||||
|
||||
|
|
|
|||
|
|
@ -67,8 +67,30 @@ You can run a single test, a set of tests or all tests. Tests can be run on diff
|
|||
|
||||
For more information see [selective unit tests](https://docs.microsoft.com/en-us/dotnet/core/testing/selective-unit-tests?pivots=mstest) in the Microsoft docs.
|
||||
|
||||
## Debugging Tests
|
||||
|
||||
Since Playwright runs in .NET, you can debug it with your debugger of choice in e.g. Visual Studio Code or Visual Studio. Playwright comes with the Playwright Inspector which allows you to step through Playwright API calls, see their debug logs and explore [selectors](./selectors.md).
|
||||
|
||||
```bash tab=bash-bash lang=csharp
|
||||
PWDEBUG=1 dotnet test
|
||||
```
|
||||
|
||||
```batch tab=bash-batch lang=csharp
|
||||
set PWDEBUG=1
|
||||
dotnet test
|
||||
```
|
||||
|
||||
```powershell tab=bash-powershell lang=csharp
|
||||
$env:PWDEBUG=1
|
||||
dotnet test
|
||||
```
|
||||
|
||||
<img width="712" alt="Playwright Inspector" src="https://user-images.githubusercontent.com/883973/108614092-8c478a80-73ac-11eb-9597-67dfce110e00.png"></img>
|
||||
|
||||
Check out our [debugging guide](./debug.md) to learn more about the [Playwright Inspector](./debug.md#playwright-inspector) as well as debugging with [Browser Developer tools](./debug.md#browser-developer-tools).
|
||||
|
||||
|
||||
## What's Next
|
||||
|
||||
- [Debug tests with the Playwright Debugger](./debug.md)
|
||||
- [Generate tests with Codegen](./codegen.md)
|
||||
- [See a trace of your tests](./trace-viewer.md)
|
||||
|
|
|
|||
|
|
@ -3,7 +3,13 @@ id: running-tests
|
|||
title: "Running Tests"
|
||||
---
|
||||
|
||||
You can run a single test, a set of tests or all tests. Tests can be run on one browser or multiple browsers. By default tests 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. If you prefer you can run your tests in headed mode by using the `--headed` flag.
|
||||
You can run a single test, a set of tests or all tests. Tests can be run on one browser or multiple browsers. By default tests 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.
|
||||
|
||||
:::note
|
||||
For a better debugging experience check out the [VS Code Extension](./getting-started-vscode.md) for Playwright where you can run tests, add breakpoints and debug your tests right from the VS Code editor.
|
||||
:::
|
||||
|
||||
## Command Line
|
||||
|
||||
- Running all tests
|
||||
|
||||
|
|
@ -14,7 +20,7 @@ You can run a single test, a set of tests or all tests. Tests can be run on one
|
|||
- Running a single test file
|
||||
|
||||
```bash
|
||||
npx playwright test test-1
|
||||
npx playwright test landing-page.spec.ts
|
||||
```
|
||||
|
||||
- Run a set of test files
|
||||
|
|
@ -23,10 +29,10 @@ You can run a single test, a set of tests or all tests. Tests can be run on one
|
|||
npx playwright test tests/todo-page/ tests/landing-page/
|
||||
```
|
||||
|
||||
- Run files that have `my-spec` or `my-spec-2` in the file name
|
||||
- Run files that have `landing` or `login` in the file name
|
||||
|
||||
```bash
|
||||
npx playwright test my-spec my-spec-2
|
||||
npx playwright test landing login
|
||||
```
|
||||
|
||||
- Run the test with the title
|
||||
|
|
@ -38,15 +44,44 @@ You can run a single test, a set of tests or all tests. Tests can be run on one
|
|||
- Running tests in headed mode
|
||||
|
||||
```bash
|
||||
npx playwright test test-1 --headed
|
||||
npx playwright test landing-page.spec.ts --headed
|
||||
```
|
||||
|
||||
- Running Tests on specific browsers
|
||||
|
||||
```bash
|
||||
npx playwright test test-1.spec.ts --project=chromium
|
||||
npx playwright test landing-page.ts --project=chromium
|
||||
```
|
||||
|
||||
## 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.md). Playwright comes with the [Playwright Inspector](./debug.md#playwright-inspector) which allows you to step through Playwright API calls, see their debug logs and explore [selectors](./selectors.md).
|
||||
|
||||
|
||||
- Debugging all tests:
|
||||
|
||||
```bash
|
||||
npx playwright test --debug
|
||||
```
|
||||
|
||||
- Debugging one test file:
|
||||
|
||||
```bash
|
||||
npx playwright test example.spec.ts --debug
|
||||
```
|
||||
|
||||
- Debugging a test from the line number where the `test(..` is defined:
|
||||
|
||||
```bash
|
||||
npx playwright test example.spec.ts:42 --debug
|
||||
```
|
||||
|
||||
|
||||
<img width="712" alt="Playwright Inspector" src="https://user-images.githubusercontent.com/883973/108614092-8c478a80-73ac-11eb-9597-67dfce110e00.png"></img>
|
||||
|
||||
Check out our [debugging guide](./debug.md) to learn more about the [Playwright Inspector](./debug.md#playwright-inspector) as well as debugging with [Browser Developer tools](./debug.md#browser-developer-tools).
|
||||
|
||||
|
||||
## Test Reports
|
||||
|
||||
The [HTML Reporter](./html-reporter.md) 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 tests errors as well as each step of the test. By default, the HTML report is opened automatically if some of the tests failed.
|
||||
|
|
@ -57,9 +92,7 @@ npx playwright show-report
|
|||
|
||||
<img width="739" alt="image" src="https://user-images.githubusercontent.com/13063165/178003817-3bd2f088-4173-406c-a9e9-74c89181f381.png" />
|
||||
|
||||
|
||||
## What's Next
|
||||
|
||||
- [Debug tests with the Playwright Debugger](./debug.md)
|
||||
- [Generate tests with Codegen](./codegen.md)
|
||||
- [See a trace of your tests](./trace-viewer.md)
|
||||
- [See a trace of your tests](./trace-viewer.md)
|
||||
|
|
|
|||
|
|
@ -49,8 +49,30 @@ You can run a single test, a set of tests or all tests. Tests can be run on one
|
|||
|
||||
For more information see [Playwright Pytest usage](./test-runners.md) or the Pytest documentation for [general CLI usage](https://docs.pytest.org/en/stable/usage.html).
|
||||
|
||||
## Running Tests
|
||||
|
||||
Since Playwright runs in Python, you can debug it with your debugger of choice with e.g. the [Python extension](https://code.visualstudio.com/docs/python/python-tutorial) in Visual Studio Code. Playwright comes with the Playwright Inspector which allows you to step through Playwright API calls, see their debug logs and explore [selectors](./selectors.md).
|
||||
|
||||
|
||||
```bash tab=bash-bash lang=python
|
||||
PWDEBUG=1 pytest -s
|
||||
```
|
||||
|
||||
```batch tab=bash-batch lang=python
|
||||
set PWDEBUG=1
|
||||
pytest -s
|
||||
```
|
||||
|
||||
```powershell tab=bash-powershell lang=python
|
||||
$env:PWDEBUG=1
|
||||
pytest -s
|
||||
```
|
||||
<img width="712" alt="Playwright Inspector" src="https://user-images.githubusercontent.com/883973/108614092-8c478a80-73ac-11eb-9597-67dfce110e00.png"></img>
|
||||
|
||||
Check out our [debugging guide](./debug.md) to learn more about the [Playwright Inspector](./debug.md#playwright-inspector) as well as debugging with [Browser Developer tools](./debug.md#browser-developer-tools).
|
||||
|
||||
|
||||
## What's Next
|
||||
|
||||
- [Debug tests with the Playwright Debugger](./debug.md)
|
||||
- [Generate tests with Codegen](./codegen.md)
|
||||
- [See a trace of your tests](./trace-viewer.md)
|
||||
|
|
@ -3,7 +3,7 @@ id: selectors
|
|||
title: "Selectors"
|
||||
---
|
||||
|
||||
Selectors are strings that are used to create [Locator]s. Locators are used to perform actions on the elements by means of methods such as [`method: Locator.click`], [`method: Locator.fill`] and alike.
|
||||
Selectors are strings that are used to create [Locator]s. Locators are used to perform actions on the elements by means of methods such as [`method: Locator.click`], [`method: Locator.fill`] and alike. For debugging selectors, see [here](./debug-selectors).
|
||||
|
||||
Writing good selectors is part art, part science so be sure to checkout the [Best Practices](#best-practices) section.
|
||||
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ Here are the most common options available in the command line.
|
|||
npx playwright test --reporter=dot
|
||||
```
|
||||
|
||||
- Run in debug mode with [Playwright Inspector](./inspector.md)
|
||||
- Run in debug mode with [Playwright Inspector](./debug.md)
|
||||
```bash
|
||||
npx playwright test --debug
|
||||
```
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@ Once you're on Playwright Test, you get a lot!
|
|||
- Built-in test artifact collection: [video recording](./test-configuration#record-video), [screenshots](./test-configuration#automatic-screenshots) and [playwright traces](./test-configuration#record-test-trace)
|
||||
|
||||
Also you get all these ✨ awesome tools ✨ that come bundled with Playwright Test:
|
||||
- [Playwright Inspector](./inspector)
|
||||
- [Playwright Inspector](./debug.md)
|
||||
- [Playwright Test Code generation](./auth#code-generation)
|
||||
- [Playwright Tracing](./trace-viewer) for post-mortem debugging
|
||||
|
||||
|
|
|
|||
|
|
@ -233,6 +233,5 @@ public class UnitTest1 : PageTest
|
|||
## What's Next
|
||||
|
||||
- [Run single tests, multiple tests, headed mode](./running-tests.md)
|
||||
- [Debug tests with the Playwright Debugger](./debug.md)
|
||||
- [Generate tests with Codegen](./codegen.md)
|
||||
- [See a trace of your tests](./trace-viewer.md)
|
||||
|
|
@ -135,6 +135,5 @@ test.describe("navigation", () => {
|
|||
## What's Next
|
||||
|
||||
- [Run single tests, multiple tests, headed mode](./running-tests.md)
|
||||
- [Debug tests with the Playwright Debugger](./debug.md)
|
||||
- [Generate tests with Codegen](./codegen.md)
|
||||
- [See a trace of your tests](./trace-viewer.md)
|
||||
|
|
@ -105,6 +105,5 @@ def test_main_navigation(page: Page):
|
|||
## What's Next
|
||||
|
||||
- [Run single tests, multiple tests, headed mode](./running-tests.md)
|
||||
- [Debug tests with the Playwright Debugger](./debug.md)
|
||||
- [Generate tests with Codegen](./codegen.md)
|
||||
- [See a trace of your tests](./trace-viewer.md)
|
||||
Loading…
Reference in a new issue