32:T42b,async function withBrowser(api, action) { const [register, cleanup] = utils.newRegistry(); try { const { ExtensionDebuggerTransport, puppeteer } = WebRunPuppeteer; let screenshotUrl, headers; let win = await api.windows.create({ url: "about:blank", focused: true, type: "popup", width: 1200, height: 800 }); const tab = win.tabs[0]; const tabId = tab.id; const extensionTransport = await ExtensionDebuggerTransport.create( api, tabId ); const browser = await puppeteer.connect({ transport: extensionTransport, defaultViewport: null }); register(() => win && api.windows.remove(win.id)); register(() => browser.close()); function onRemove(windowId) { if (windowId === win.id) { cleanup(); } } api.windows.onRemoved.addListener(onRemove); register(() => api.windows.onRemoved.removeListener(onRemove)); return await action({ browser, tabId, window: win }); } finally { cleanup(); } }33:T448,withBrowser(api, async ({ browser }) => { // use first page from pages instead of using browser.newPage() const [page] = await browser.pages(); if (!page) return { error: "Can not find the first page in this window." }; await page.goto("https://wikipedia.org"); const englishButton = await page.waitForSelector("#js-link-box-en > strong"); await englishButton?.click(); const searchBox = await page.waitForSelector("#searchInput"); await searchBox?.type(searchWord); await page.keyboard.press("Enter"); await Promises.delay(1000); const headers = await page.evaluate(() => { return [ ...document.querySelectorAll("#bodyContent :is(h1, h2, h3, h4, h5, h6)") ].map((elm) => { return { tag: elm.tagName, content: elm.innerText }; }); }); const content = await page.$("#content"); const screenshot = await content?.screenshot({ encoding: "base64" }); const screenshotUrl = `data:image/png;base64,${screenshot}`; await Promises.delay(1000); mutable automationResult = { headers, screenshotUrl }; })34:[] 30:{"title":"[puppeteer] Pilot Browser with the Puppeteer API","cells":[{"id":181,"value":"# [puppeteer] Pilot Browser with the Puppeteer API \n**Connect to the With WebRun DevTools**\n","pinned":false,"hidden":false,"mode":"md"},{"id":0,"value":"\nThis notebooks shows integraration of the Puppeteer v13x with [WebRun DevTools Browser Extension](/@kotelnikov/webrun-devtools).\nSteps described below:\n1. Connect to the extension:\n - Generate the API key\n - Initialize the API\n2. Open a new window with the site\n3. Import and initialize the Puppeteer API\n4. Execute a custom script piloting the external site\n5. Show results of the automation - a screenshot + table of content\n6. Closes the window\n","pinned":false,"hidden":false,"mode":"md"},{"id":188,"value":"## Step 1: Connect to the API\n\nTo connect to the [WebRun DevTools Browser Extension](/@kotelnikov/webrun-devtools) please generate an API Key and enter it in the box below:","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"inputApiKey = newApiKeyInput()","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"## Step 2: Init Window\n\nIn this section we open a new window associated with the browser instance. ","pinned":false,"hidden":false,"mode":"md"},{"id":203,"value":"If the API key is valid then the next cell will show an API object:","pinned":false,"hidden":false,"mode":"md"},{"id":9,"value":"api = loadApi({ input: inputApiKey, invalidation })","pinned":false,"hidden":false,"mode":"ojs"},{"id":659,"value":"api.tabs.query({})","pinned":true,"hidden":false,"mode":"ojs"},{"id":523,"value":"Now using the API we can create a new Puppeteer Browser instance, used in the next section to launch automation steps. The method below opens a new window, creates a new Puppeteer instance and call the specified action to automate tasks. The results of this action are returned as the function results.","pinned":false,"hidden":false,"mode":"md"},{"id":469,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":198,"value":"## Step 3: Work With Page Content\n\nThe form below allows you to search and extract data from Wikipedia. The box below allows you to enter a keyword. After that the script automatically creates a new window, open English Wikipedia, enters this keyword and extract information from the first found page.\n\nThere are two types of extracted data: the screenshot of the main article section and a Table Of Content (tree of article headers).\n","pinned":false,"hidden":false,"mode":"md"},{"id":278,"value":"searchForm = api\n ? Inputs.form({\n text: Inputs.text({\n value: \"telephone\",\n label: \"Search word\"\n }),\n submit: Inputs.button(\"Go!\")\n })\n : Inputs.form({\n message: \"Click the 'Open Browser' button to continue. Waiting...\"\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":617,"value":"searchWord = listenForm(searchForm, { value : d => d.text } )","pinned":true,"hidden":false,"mode":"ojs"},{"id":534,"value":"{\n if (!automationResult) return \"Waiting...\";\n\n const { headers, screenshotUrl } = automationResult;\n\n const formattedHeaders = headers\n .map(({ tag, content }) => {\n const shift = Array.from({ length: +tag[1] })\n .map((v) => \" \")\n .join(\"\");\n return `${shift}- ${content}`;\n })\n .join(\"\\n\");\n const tableOfContent = md`**Table Of Content**\\n${formattedHeaders}`;\n const screenshotPanel = htl.html`

`;\n\n return htl.html`

\n ${screenshotPanel}\n ${tableOfContent}\n

\n\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":608,"value":"mutable automationResult = null;","pinned":true,"hidden":false,"mode":"ojs"},{"id":261,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":517,"value":"## Imports and Initializations","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"import {\n loadApi,\n listenForm,\n newApiKeyInput\n} from \"@kotelnikov/webrun-devtools\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":482,"value":"utils = import(\"@statewalker/utils\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":467,"value":"WebRunPuppeteer = await import(\"@statewalker/webrun-puppeteer\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}