When using recorder, I get - TypeError: Cannot read property 'onmessage' of undefined

[rahuldixit]

I am using folio the playwright test runner, and inside a before all loop I run the below 2 lines of code:

browser = await chromium.launch(config.launchOptions);
page = (await initializeRecorder(browser, 'vuetify-session-events')).page;

The stacktrace I get is:
TypeError: Cannot read property 'onmessage' of undefined

  19 |     beforeAll(async () => {
  20 |       browser = await chromium.launch(config.launchOptions);
> 21 |       page = (await initializeRecorder(browser, 'vuetify-session-events')).page;
     |                     ^

Can I get some help to debug.fix this issue please?
Thanks

[derrickwilliams]

It appears that playwright-session is not compatible with anything greater than [email protected]. It looks like some refactoring of the browser connection implementation in playwright has removed the private browser._connection._transport property and that causes the TypeError exception.

The playwright version requirements should probably be updated to reflect the current compatibility. Whatever the semver syntax is for <=1.3.0.

Downgrading your version of playwright to a version older than 1.4.0 should work. I believe 1.3.0 is the latest version to work with playwright-session.

This worked for me:

npm install [email protected]

I hope this helps.

@domderen Any plans to support latest playwright (v1.7.0 at this time)?

[rahuldixit]

Hi Derrick,

I tried with:
playwright 1.3.0 and playwright-session ^0.0.7
and still got the same error.

Are you sure the above version combination is correct?

Many Thanks,
Rahul Dixit

[derrickwilliams]

Hi Rahul.

Here is the code and terminal output on my end. What happens when you run your shell's equivalent of those commands?

Hopefully this is helpful.

const { chromium } = require('playwright');
const { default: initializeRecorder } = require('playwright-session');
const chalk = require('chalk');

(async () => {
  const browser = await chromium.launch({ headless: false });

  try {
    const { page, context } = await initializeRecorder(browser);
    console.log(chalk.greenBright.italic('We successfully initialized'));
    page.goto('http://www.github.com');
  } catch (err) {
    console.error(
      chalk.redBright.underline('We caught the `onmessage` error.')
    );
    console.error(err);
    process.exit(1);
    return;
  }
})();

Failed [email protected]

Successful [email protected]

[domderen]

Hey everyone, sorry for a long time without a response. Playwright now has an implementation WIP on something very similar to Playwright-Session. Out there it is called a tracer, and consists of a browser context parameter for recording browser.newContext({ _tracePath: tracePath }); and CLI command npx playwright@next show-trace <tracePath>. It would be great to hear your feedback on this functionality, and if this is something that would be useful from your point of view. Bare in mind that the show-trace cli command is not yet available in Playwright published in NPM, so you would have to clone the repo to use it at the moment, and run the command as PWTRACE=1 node ../playwright/lib/cli/cli.js show-trace <tracePath>.

I also created this issue in Playwright to consider creating a hosted version of the trace-viewer app, similar to what Playwright-Session is offering, and it would be great to know your feedback. microsoft/playwright#4967

Thanks!