[Feature] Support adding custom loaders to the test runner

[AlessioGr]

Ever since switching from CJS to ESM, we've needed a custom node loader to process .scss, .svg and png file imports.

For playwright, we had to create a patch file which patches playwright to point to our custom loader.

Without this loader, we'd get the following error:

Instead of us having to patch playwright, could you either

• add a config option which allows us to add custom node loaders here, or
• natively support scss/svg/png imports in playwright's own loader?

[hpierre74]

any update on this ?

[jmikrut]

Also looking for an update on this one. We've patched this here:

https://github.com/payloadcms/payload/blob/alpha/patches/playwright%401.42.1.patch

But would love to sunset our reliance on patching Playwright.

Thank you!

[divmgl]

Currently running into this issue in our monorepo. It'd be nice to be able to use tsx to overcome the ESM/CJS module hell in Playwright.

[avallonazevedo]

That'd be a fantastic feature. Any updates?

[karlhorky]

@AlessioGr @jmikrut I noticed that you removed the Playwright patch - the patches/ folder is no longer accessible:

• https://github.com/payloadcms/payload/tree/main/patches/

Did you come up with a different solution for this?

Would love to be able to load .mdx files using @mdx-js/node-loader in test files!

[karlhorky]

Workaround: Node.js ESM Loaders via Customization Hooks

Our workaround is to register Node.js ESM loaders (via Customization Hooks APIs) in playwright.config.ts for custom file types imported in our tests - @mdx-js/node-loader for MDX files and @nodejs-loaders/media for image files:

+import { register } from 'node:module';
 import type { PlaywrightTestConfig } from '@playwright/test';

+register('@nodejs-loaders/media', import.meta.url);
+register('@mdx-js/node-loader', import.meta.url);
+
 const config: PlaywrightTestConfig = {
   // ...
 };
 
 export default config;

Code for copying:

import { register } from 'node:module';

// Node.js ESM loaders for image files and MDX imported by test files
// - https://github.com/microsoft/playwright/issues/26822#issuecomment-2692835230
register('@nodejs-loaders/media', import.meta.url);
register('@mdx-js/node-loader', import.meta.url);

Seems to work so far!

So to import SCSS or other formats in your tests, try to find a Node.js ESM loader (NOT the same as a webpack loader) for your file format, and try using register() from node:module in playwright.config.ts

Also added to playwright-tricks: https://github.com/karlhorky/playwright-tricks#import-custom-file-types-in-tests

[pavelfeldman]

Why was this issue closed?

Thank you for your involvement. This issue was closed due to limited engagement (upvotes/activity), lack of recent activity, and insufficient actionability. To maintain a manageable database, we prioritize issues based on these factors.

If you have additional information not present in this issue that you think will help prioritizing it, please open a new issue and reference this one. More support or clarity on its necessity may prompt a review. Your understanding and cooperation are appreciated.