[Question] Usage advice for script injection and execution

[naripok]

Hello good people! 👋
I come for advice!

My use-case is as follow:

• I want to navigate to a blank mockup page
• I want to inject a script on the page
• I want it to run
• I want to be able to infer its results.

My index.test.ts file looks roughtly like this:

/// <reference types="jest-playwright-preset" />
/// <reference types="expect-playwright" />

import { mockHtmlResponse } from '../helpers/network';
import * as examplePage from '../fixtures/examplePage.json';
import { importedFunc } from '../../src';

describe('basic run behaviour', () => {
  const testUrl = 'https://example.com/';

  beforeEach(async () => {
    mockHtmlResponse(page, testUrl, examplePage);  // this is just a hidden page.route call
    await page.goto(testUrl, { waitUntil: 'load' });
  });

  it('runs', async () => {
    await page.evaluate(
      importedFunc,
      {
        someParam: [],
        otherParam: {}
      }
    );
   // ... assert stuff
  });
});

And my configs:

module.exports = {
  verbose: true,
  preset: 'jest-playwright-preset',
  testMatch: [
    '**/test/e2e/?(*.)+(spec|test).+(ts|js)',
  ],
  transform: {
    '^.+\\.ts$': 'ts-jest',
  },
  testEnvironmentOptions: {
    'jest-playwright': {
      browsers: ['chromium'],
      lauchOptions: {
        headless: true,
      },
    },
  },
};

I'm using jest-playwright-preset, but the problem is the same with vanilla ts-jest configs.

So, for functions defined inside the page.evaluate thunk, everything works fine, but things break for the imported stuff.
I get errors of the someBrowserApi is undefined kind.

My question is:
Is there a way to import my (transformed) to-be-tested code, inject it into the page and assert about its behaviours without having to actually spawn a server with transpiled code being served and navigate to it?

Thanks for the good work!
Cheers!

[pavelfeldman]

page.evaluate(func) will toString the func, move it to the browser and run it there. It'll work for local functions and functions with reasonable toString, but won't work for any imported behavior. Your imports are in the Node world and the scripts run in the Browser world. You can still inject your transpiled functions, say get a webpack output and evaluate it altogether so that it all appeared in the page, so you don't need a server for that. But you still need to inject some consistent scripts so that you could run them inside the browser...

[ydennisy]

@pavelfeldman thanks for the reply, and @naripok sorry for the highjack!

Could you please elaborate a little on, or point to some resource which explains how to achieve this:

ou can still inject your transpiled functions, say get a webpack output and evaluate it altogether so that it all appeared in the page, so you don't need a server for that. But you still need to inject some consistent scripts so that you could run them inside the browser...

Thanks in advance!

[pavelfeldman]

There isn't much to expand on, page.evaluate accepts string script and this can be a compiled script, a result of the webpack run. So if you have a complex app and use webpack, you can feel the entire js file that webpack generates into the page. And it'll run there...

[aslushnikov]

Looks like there's no more actions on our end - closing this. Feel free to refile if we still can be helpful!