diff --git a/docs/src/debug-selectors.md b/docs/src/debug-selectors.md deleted file mode 100644 index e7a42c4712..0000000000 --- a/docs/src/debug-selectors.md +++ /dev/null @@ -1,156 +0,0 @@ ---- -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: - -Selectors toolbar - -## 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 - - - -### playwright.$(selector) - -Query Playwright selector, using the actual Playwright query engine, for example: - -```txt -> playwright.$('.auth-form >> text=Log in'); - - -``` - -### playwright.$$(selector) - -Same as `playwright.$`, but returns all matching elements. - -```txt -> playwright.$$('li >> text=John') - -> [
  • ,
  • ,
  • ,
  • ] -``` - -### 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.highlight('.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 npx playwright test -``` - -```batch tab=bash-batch lang=js -set DEBUG=pw:api -npx playwright test -``` - -```powershell tab=bash-powershell lang=js -$env:DEBUG="pw:api" -npx playwright 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 -```