Skip to content
This repository was archived by the owner on Sep 11, 2025. It is now read-only.
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 9 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -234,9 +234,16 @@ module.exports = {

All of them are available globally in each Jest test. If you are using ESLint and JavaScript, its recommend to use it in combination with the [eslint-plugin-jest-playwright](https://github.com/playwright-community/eslint-plugin-jest-playwright).

## Put in debug mode
## Debug mode

Debugging tests can be hard sometimes and it is very useful to be able to pause tests in order to inspect the browser. Jest Playwright exposes a method `jestPlaywright.debug()` that suspends test execution and gives you opportunity to see what's going on in the browser.
Debugging tests can be hard sometimes and it is very useful to be able to pause tests in order to inspect the browser. There are two ways to put your tests in debug mode:

- Playwright give you [ability](https://playwright.dev/docs/debug/#run-in-debug-mode) to configure the browser for debugging with the `PWDEBUG` environment variable:
```js
PWDEBUG=1 jest
```

- Jest Playwright exposes a method `jestPlaywright.debug()` that suspends test execution and gives you opportunity to see what's going on in the browser.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How does jestPlaywright.debug() interact with page.pause()? https://playwright.dev/docs/api/class-page?_highlight=paus#pagepause

It would be great if jestPlaywright.debug() also pauses (and allows the user to resume) but I think this should be explicitly explained here. It is good to say here what debugging does both for the Playwright settings, as well as the Jest settings.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

maybe we can rework that jestPlaywright will use playwright.pause under the hood?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jhildenbiddle page.pause() was introduced only in last version. And jestPlaywright.debug() does not related to this function. Personally, I don't like jestPlaywright.debug() because it's weird and hacky solution to simplify debugging, that came from jest-puppeteer

Copy link
Member Author

@mmarkelov mmarkelov Feb 27, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mxschmitt yes we can. But it will be breaking change. I think usage of this feature for debugging is much better that jestPlaywright.debug()

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That would be sweet, do you want to create an issue? I can do it if you want but you can probably better explain it. Release it under a 2.0 release then, I think this awesome project has graduated enough to warrant a new major version 👍

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@thernstig yes. It will be nice if you create an issue)

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


```js
await jestPlaywright.debug()
Expand Down
4 changes: 2 additions & 2 deletions src/PlaywrightEnvironment.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import type {
import {
CHROMIUM,
CONFIG_ENVIRONMENT_NAME,
DEBUG_TIMEOUT,
DEFAULT_CONFIG,
FIREFOX,
IMPORT_KIND_PLAYWRIGHT,
Expand Down Expand Up @@ -396,8 +397,7 @@ export const getPlaywrightEnv = (basicEnv = 'node'): unknown => {
event.name === 'add_test' &&
event.fn?.toString().includes('jestPlaywright.debug()')
) {
// Set timeout to 4 days
state.testTimeout = 4 * 24 * 60 * 60 * 1000
state.testTimeout = DEBUG_TIMEOUT
}
}

Expand Down
12 changes: 10 additions & 2 deletions src/PlaywrightRunner.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ import {
generateKey,
} from './utils'
import {
DEBUG_TIMEOUT,
DEFAULT_TEST_PLAYWRIGHT_TIMEOUT,
CONFIG_ENVIRONMENT_NAME,
SERVER,
Expand Down Expand Up @@ -95,15 +96,22 @@ const getDevices = (
return resultDevices
}

const getJestTimeout = (configTimeout?: number) => {
if (configTimeout) {
return configTimeout
}
return process.env.PWDEBUG ? DEBUG_TIMEOUT : DEFAULT_TEST_PLAYWRIGHT_TIMEOUT
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mmarkelov I think you should document that you set the default timeout to 15s. I was surprised when running tests after a recent upgrade that it increased from 5 -> 15 s for each jest test. It is worth mentioning in your docs that this is the case.

Also, https://playwright.dev/docs/next/debug/#run-in-debug-mode mentions that it both runs in headful, as well as sets the playwright timeout to 0 (= no timeout). Is this the same you do? I.e. set both Jest's and Playwrights timeout to no timeout? I think it is worth mentioning in the docs what you do when a user sets PWDEBUG=1. I.e. do you, in addition to what Playwright does, also change Jest's default?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jhildenbiddle i believe that changes from 5 -> 15 s was made in the first versions of jest-playwright, and it was made because some interactions with page can be slow and 5 second was not enough, lots of tests are failing because of it.
I suppose no timeout for PWDEBUG mode is about playwrights timers. And we set timeout to big value, because otherwise the usage of debugging features, like page.pause() will relate to jest failure

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mmarkelov Did you mean to tag me really? :)

Could you document this? Two things I think of.

  1. Document somewhere that you set the default timeout for all tests to 15 sec.
  2. Document in the Debug section that when PWDEBUG is set, that you following defaults are set: https://playwright.dev/docs/next/debug/#defaults, plus that you set Jest's own timeout to a huge value. Maybe be explicit

I think that would be great :)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@thernstig create new issue about doc improvements #602

}

class PlaywrightRunner extends JestRunner {
browser2Server: Partial<Record<string, BrowserServer>>
constructor(
globalConfig: JestConfig.GlobalConfig,
context: TestRunnerContext,
) {
const config = { ...globalConfig }
// Set default timeout to 15s
config.testTimeout = config.testTimeout || DEFAULT_TEST_PLAYWRIGHT_TIMEOUT
// Set testTimeout
config.testTimeout = getJestTimeout(config.testTimeout)
super(config, context)
this.browser2Server = {}
}
Expand Down
2 changes: 2 additions & 0 deletions src/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,5 +23,7 @@ export const DEFAULT_CONFIG: JestPlaywrightConfig = {
}

export const DEFAULT_TEST_PLAYWRIGHT_TIMEOUT = 15000
// Set timeout to 4 days
export const DEBUG_TIMEOUT = 4 * 24 * 60 * 60 * 1000

export const PACKAGE_NAME = 'jest-playwright-preset'