feat(@angular/build): support custom Playwright connectOptions for browser unit tests - #33655
feat(@angular/build): support custom Playwright connectOptions for browser unit tests#33655d3n1el1 wants to merge 1 commit into
Conversation
Sorry, something went wrong.
…owser unit tests When the `browsers` option is used, the Vitest unit-test builder constructs its own Playwright browser provider. This overrode any `connectOptions` (such as a custom `wsEndpoint`) defined in a user's Vitest configuration file, making it impossible to run browser-based unit tests against a remote or shared Playwright browser server. A new `connectOptions` builder option is now forwarded to the Playwright provider's `connectOptions`, allowing a custom `wsEndpoint` (and other Playwright connection settings) to be configured directly from `angular.json`. The option is ignored, with an informational message, when no browsers are configured or a non-Playwright provider is used. Closes angular#33115
There was a problem hiding this comment.
Code Review
This pull request introduces a new connectOptions configuration option to the Angular build unit-test builder, allowing Vitest browser-based tests to connect to a remote or preconfigured Playwright browser server. The changes include schema updates, option normalization, and forwarding these options to the Vitest browser provider, along with comprehensive unit tests. The feedback suggests adding a validation check to ensure connectOptions is only used with the Vitest runner, and resolving a conceptual conflict where both executablePath and connectOptions are configured simultaneously, as they are mutually exclusive in Playwright.
Sorry, something went wrong.
| outputFile: options.outputFile, | ||
| browsers: browsers?.length ? browsers : undefined, | ||
| browserViewport: width && height ? { width, height } : undefined, | ||
| connectOptions: options.connectOptions, |
There was a problem hiding this comment.
Similar to the ui and isolate options, connectOptions is only supported when using the Vitest runner (since Karma does not use the Playwright browser provider configured by this builder).
Consider adding a validation check in normalizeOptions to throw an error if connectOptions is provided with a non-Vitest runner:
if (options.connectOptions && runner !== Runner.Vitest) {
throw new Error('The connectOptions option is only available for the vitest runner.');
}
Sorry, something went wrong.
| it('should forward connectOptions alongside executablePath on per-instance providers', async () => { | ||
| const connectOptions = { wsEndpoint: 'ws://localhost:1234/playwright' }; | ||
| const { browser } = await setupBrowserConfiguration( | ||
| ['ChromeHeadless'], | ||
| undefined, | ||
| false, | ||
| workspaceRoot, | ||
| undefined, | ||
| connectOptions, | ||
| ); | ||
|
|
||
| // The per-instance provider should carry both the connect options and the executable path. | ||
| expect( | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| (browser?.instances?.[0]?.provider as any)?.options?.connectOptions, | ||
| ).toEqual(connectOptions); | ||
| expect( | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| (browser?.instances?.[0]?.provider as any)?.options?.launchOptions?.executablePath, | ||
| ).toBe('/custom/path/to/chrome'); | ||
| }); |
There was a problem hiding this comment.
This test asserts that executablePath is forwarded alongside connectOptions on per-instance providers. However, since executablePath is a local launch option and connectOptions is for remote connections, they are conceptually mutually exclusive. Playwright ignores launchOptions (including executablePath) when connecting to a remote browser via connectOptions.
To avoid passing redundant/ignored configuration and to simplify the setup, consider disabling the executablePath override in browser-provider.ts when connectOptions is active (e.g., if (executablePath && !connectOptions)), and update this test to assert that executablePath is not applied.
Sorry, something went wrong.
PR Checklist
Please check to confirm your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
When the browsers option is used, the Vitest unit-test builder constructs its own Playwright browser provider. This overrode any connectOptions (such as a custom wsEndpoint) defined in a user's Vitest configuration file, making it impossible to run browser-based unit tests against a remote or shared Playwright browser server.
Issue Number: #33115
What is the new behavior?
A new connectOptions builder option is now forwarded to the Playwright provider's connectOptions, allowing a custom wsEndpoint (and other Playwright connection settings) to be configured directly from angular.json. The option is ignored, with an informational message, when no browsers are configured, or a non-Playwright provider is used.
Does this PR introduce a breaking change?
Other information