[Feature]: Proper recording with custom `test`

[JoepKockelkorn]

🚀 Feature Request

I'm using the @msw/playwright package to intercept network requests to force the app conditions into a specific state. Sidenote: The MSW mock handlers are registered using a custom network fixture but are being forwarded to page.route() so the browser is not using a service worker. This means my test function is not imported from @playwright/test but rather from a local path. This means the "Record new" feature from the VSCode extension is unusable in my setup. I tried using await page.pause() in a test, but the playwright test runner doesn't wait somehow when ran from the VSCode "Run test" button in the editor gutter.

I'd like to be able to configure the path (relative to the playwright config file) of my custom text (and expect) functions so I can still use the "Record new" recording mode from Playwright.

Example

A new setting can be set: playwright.recordingTestCodeImportPath that points to a relative path from the playwright.config.js file. Example:

"playwright.recordingTestCodeImportPath": "./playwright.setup"

Of course the name is up for discussion.

When set and clicking the "Record new" button it generates this code:

import { test, expect } from '../config/playwright.setup';

test('test', async ({ page }) => {
  // Recording...
});

The import path is adjusted because the playwright config (located in config folder) has this setting:

export default defineConfig({
  testDir: '../tests',
  // ...
})

This makes sure the networks requests are still intercepted and the test can be recorded "by just clicking around".

Motivation

The "Record new" feature from the VSCode extension will be usable in custom setups.

[Skn0tt]

This sounds like a bug, it should just work even with a custom test function. Could you provide me with a reproduction case? I'd like to take a look.

[JoepKockelkorn]

@Skn0tt Not sure how I should approach this, since as far as I know all tests generated using "Record new" always import { test, expect } from "@playwright/test" or am I mistaken? How would I use a custom test function when using "Record new"?

[Skn0tt]

My bad, I misread! Yeah that's a shortcoming, but normally there's a good workaround. You start with writing an empty test case with your own test function, then run it once. Now you place your cursor inside the test and click "Record at cursor" to record the test.

This doesn't work in your case though, because the test already completed and the page.route isn't active anymore. The proper solution would be for us to run tests in a mode where the page.route stays active at the end of a test run, but that's a big change. As a workaround, page.pause would be a good, as you mention. But we disabled that in VS Code for reasons. I think we should enable it again.

[Skn0tt]

The new setting you mention would only help you on the surface, by the way. Even if we'd use your custom test, it still wouldn't work because page.route is already deactivated at recording time.

[JoepKockelkorn]

Thanks for the detailed response. Let me know when it might work again!