How to use trpc directly in playwright testing?

[WhyAsh5114]

Describe the bug
Unable to use trpc client in playwright tests

To Reproduce
Steps to reproduce the behavior:

1. Setup a sveltekit project with playwright enabled
2. Create a basic tRPC config with an endpoint
3. Try to directly call it from playwright

Expected behavior
The client should work as it does in Svelte files in the frontend

Additional context
I tried various methods to create the client in playwright:

1. I tried using it without args and it gave me an
   Calling createTRPCClient() on the server requires passing a valid LoadEvent argument
2. Maybe I'm supposed to use createCaller() with createContext() like we do in server load functions, but what do we pass to the createContext()?
3. Creating the client with { url: { origin: page.url() } } also doesn't seem to work and give this error:
   TRPCClientError: Unexpected token '<', "<!doctype "... is not valid JSON

[mass8326]

Playwright runs in a node environment, so you are unable to create a browser trpc client with trpc-sveltekit. It is missing the necessary context to know where to send the requests.

trpc-sveltekit/package/src/client.ts

Lines 64 to 80 in bb32593

	if (typeof window === 'undefined' && !init) {
	throw new Error(
	'Calling createTRPCClient() on the server requires passing a valid LoadEvent argument'
	);
	}
	return internalCreateTRPCClient<Router>({
	transformer,
	links: [
	httpBatchLink({
	url:
	typeof window === 'undefined' ? `${init.url.origin}${url}` : `${location.origin}${url}`,
	fetch: typeof window === 'undefined' ? init.fetch : init?.fetch ?? window.fetch,
	headers
	})
	]
	});

If you want to test your endpoint, you will need to manually create a client with @trpc/client and pass in where your web server is running.

import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';

const client = createTRPCProxyClient({
  links: [httpBatchLink({ url: "..." })],
});

[WhyAsh5114]

I tried this too, the method returns a weird string union