playwright-repl.js

// node --experimental-repl-await ./repl.js
// OLD API (See below for a newer one)
const repl = require('repl');
const playwright = require('playwright');
const config = {
	headless: false,
	args: [
		// https://tink.uk/playing-with-the-accessibility-object-model-aom/
		'--enable-blink-features=AccessibilityObjectModel',
	],
};
const completions = ['.help', '.exit', '.load', '.save', 'playwright'];

// https://nodejs.org/api/readline.html#readline_use_of_the_completer_function
function completer(line) {
	const hits = completions.filter(c => c.startsWith(line));
	return [hits.length ? hits : completions, line];
}

(async () => {
	const browser = await playwright.chromium.launch(config);
	const targets = await browser.targets();
	const pageTarget = targets.find(t => t._targetInfo.type === 'page');
	const defaultContext = pageTarget.context();
	const [defaultPage] = await defaultContext.pages();
	const context = await browser.newContext({
		viewport: null,
	});
	const page = await context.newPage();
	await defaultPage.close();
	const client = await browser.pageTarget(page).createCDPSession();
	await client.send('Accessibility.enable');
	await client.send('Runtime.enable');
	await client.send('DOM.enable');
	return { browser, context, page, client };
})().then(props => {
	completions.push(...Object.keys(props));
	const r = repl.start({
		prompt: '> ',
		useColors: true,
		preview: true,
		completer,
	});
	Object.assign(r.context, props);
});

repl.js

// node --experimental-repl-await ./repl.js
// v1.18 API
const repl = require("repl");
const playwright = require("playwright");
const config = {
  headless: false,
  args: [
    // https://tink.uk/playing-with-the-accessibility-object-model-aom/
    "--enable-blink-features=AccessibilityObjectModel",
  ],
};
const completions = [".help", ".exit", ".load", ".save", "playwright"];

// https://nodejs.org/api/readline.html#readline_use_of_the_completer_function
function completer(line) {
  const hits = completions.filter((c) => c.startsWith(line));
  return [hits.length ? hits : completions, line];
}

(async () => {
  const browser = await playwright.chromium.launch(config);
  const context = await browser.newContext({
    viewport: null,
  });
  const page = await context.newPage();
  const client = await page.context().newCDPSession(page);
  await client.send("Accessibility.enable");
  await client.send("Runtime.enable");
  await client.send("DOM.enable");
  return { browser, context, page, client };
})().then((props) => {
  completions.push(...Object.keys(props));
  const r = repl.start({
    prompt: "> ",
    useColors: true,
    preview: true,
    completer,
  });
  Object.assign(r.context, props);
});

Example use:

node --experimental-repl-await ./playwright-repl.js

> page.goto('https://google.com')
> client.send('Accessibility.getFullAXTree')
> await client.send('Runtime.evaluate', {expression: `(async () => {const {name, role} = await getComputedAccessibleNode(document.querySelector('a')); return JSON.stringify({name, role})})()`, awaitPromise: true})
// in devtools
// await getComputedAccessibleNode(document.querySelector('a'))

Hello AutoSponge. I found this using Google and I would love to play with it. Unfortunately, I get the error
(node:67447) UnhandledPromiseRejectionWarning: TypeError: browser.targets is not a function

I updated the script to the new API. The one you found was quite old. That was before I turned it into a project called https://www.npmjs.com/package/scriptwriter. But that probably needs to be updated too.

I love this repl, it would be great if you can update the npm library, I found when I typed command 'playwright' in the repl, I got the error: "Uncaught ReferenceError: playwright is not defined", is it a bug?