Unlock 30% off on Manual Testing Annual Plans this Holiday Season. 
Use Code: LCMYEARENDEXCL30
Use Code: LCMYEARENDEXCL30Check icon
Copied to Clipboard!
How to use exposeBinding method in Playwright Internal
Best JavaScript code snippet using playwright-internal
recorderSupplement.js
Source:recorderSupplement.js 
...113 this._recorderSources = data.sources;114 this._pushAllSources();115 (_this$_recorderApp = this._recorderApp) === null || _this$_recorderApp === void 0 ? void 0 : _this$_recorderApp.setFile(data.primaryFileName);116 });117 await this._context.exposeBinding('_playwrightRecorderState', false, source => {118 let actionSelector = this._highlightedSelector;119 let actionPoint;120 for (const [metadata, sdkObject] of this._currentCallsMetadata) {121 if (source.page === sdkObject.attribution.page) {122 actionPoint = metadata.point || actionPoint;123 actionSelector = actionSelector || metadata.params.selector;124 }125 }126 const uiState = {127 mode: this._mode,128 actionPoint,129 actionSelector130 };131 return uiState;132 });133 await this._context.exposeBinding('_playwrightRecorderSetSelector', false, async (_, selector) => {134 var _this$_recorderApp2, _this$_recorderApp3;135 this._setMode('none');136 await ((_this$_recorderApp2 = this._recorderApp) === null || _this$_recorderApp2 === void 0 ? void 0 : _this$_recorderApp2.setSelector(selector, true));137 await ((_this$_recorderApp3 = this._recorderApp) === null || _this$_recorderApp3 === void 0 ? void 0 : _this$_recorderApp3.bringToFront());138 });139 await this._context.exposeBinding('_playwrightResume', false, () => {140 this._debugger.resume(false);141 });142 await this._context.extendInjectedScript(consoleApiSource.source);143 await this._contextRecorder.install();144 if (this._debugger.isPaused()) this._pausedStateChanged();145 this._debugger.on(_debugger.Debugger.Events.PausedStateChanged, () => this._pausedStateChanged());146 this._context.recorderAppForTest = recorderApp;147 }148 _pausedStateChanged() {149 var _this$_recorderApp4;150 // If we are called upon page.pause, we don't have metadatas, populate them.151 for (const {152 metadata,153 sdkObject154 } of this._debugger.pausedDetails()) {155 if (!this._currentCallsMetadata.has(metadata)) this.onBeforeCall(sdkObject, metadata);156 }157 (_this$_recorderApp4 = this._recorderApp) === null || _this$_recorderApp4 === void 0 ? void 0 : _this$_recorderApp4.setPaused(this._debugger.isPaused());158 this._updateUserSources();159 this.updateCallLog([...this._currentCallsMetadata.keys()]);160 }161 _setMode(mode) {162 var _this$_recorderApp5;163 this._mode = mode;164 (_this$_recorderApp5 = this._recorderApp) === null || _this$_recorderApp5 === void 0 ? void 0 : _this$_recorderApp5.setMode(this._mode);165 this._contextRecorder.setEnabled(this._mode === 'recording');166 this._debugger.setMuted(this._mode === 'recording');167 if (this._mode !== 'none') this._context.pages()[0].bringToFront().catch(() => {});168 }169 _refreshOverlay() {170 for (const page of this._context.pages()) page.mainFrame().evaluateExpression('window._playwrightRefreshOverlay()', false, undefined, 'main').catch(() => {});171 }172 async onBeforeCall(sdkObject, metadata) {173 if (this._mode === 'recording') return;174 this._currentCallsMetadata.set(metadata, sdkObject);175 this._allMetadatas.set(metadata.id, metadata);176 this._updateUserSources();177 this.updateCallLog([metadata]);178 if (metadata.params && metadata.params.selector) {179 var _this$_recorderApp6;180 this._highlightedSelector = metadata.params.selector;181 (_this$_recorderApp6 = this._recorderApp) === null || _this$_recorderApp6 === void 0 ? void 0 : _this$_recorderApp6.setSelector(this._highlightedSelector).catch(() => {});182 }183 }184 async onAfterCall(sdkObject, metadata) {185 if (this._mode === 'recording') return;186 if (!metadata.error) this._currentCallsMetadata.delete(metadata);187 this._updateUserSources();188 this.updateCallLog([metadata]);189 }190 _updateUserSources() {191 var _this$_recorderApp7;192 // Remove old decorations.193 for (const source of this._userSources.values()) {194 source.highlight = [];195 source.revealLine = undefined;196 } // Apply new decorations.197 let fileToSelect = undefined;198 for (const metadata of this._currentCallsMetadata.keys()) {199 if (!metadata.stack || !metadata.stack[0]) continue;200 const {201 file,202 line203 } = metadata.stack[0];204 let source = this._userSources.get(file);205 if (!source) {206 source = {207 file,208 text: this._readSource(file),209 highlight: [],210 language: languageForFile(file)211 };212 this._userSources.set(file, source);213 }214 if (line) {215 const paused = this._debugger.isPaused(metadata);216 source.highlight.push({217 line,218 type: metadata.error ? 'error' : paused ? 'paused' : 'running'219 });220 source.revealLine = line;221 fileToSelect = source.file;222 }223 }224 this._pushAllSources();225 if (fileToSelect) (_this$_recorderApp7 = this._recorderApp) === null || _this$_recorderApp7 === void 0 ? void 0 : _this$_recorderApp7.setFile(fileToSelect);226 }227 _pushAllSources() {228 var _this$_recorderApp8;229 (_this$_recorderApp8 = this._recorderApp) === null || _this$_recorderApp8 === void 0 ? void 0 : _this$_recorderApp8.setSources([...this._recorderSources, ...this._userSources.values()]);230 }231 async onBeforeInputAction(sdkObject, metadata) {}232 async onCallLog(sdkObject, metadata, logName, message) {233 this.updateCallLog([metadata]);234 }235 updateCallLog(metadatas) {236 var _this$_recorderApp9;237 if (this._mode === 'recording') return;238 const logs = [];239 for (const metadata of metadatas) {240 if (!metadata.method || metadata.internal) continue;241 let status = 'done';242 if (this._currentCallsMetadata.has(metadata)) status = 'in-progress';243 if (this._debugger.isPaused(metadata)) status = 'paused';244 logs.push((0, _recorderUtils.metadataToCallLog)(metadata, status));245 }246 (_this$_recorderApp9 = this._recorderApp) === null || _this$_recorderApp9 === void 0 ? void 0 : _this$_recorderApp9.updateCallLogs(logs);247 }248 _readSource(fileName) {249 try {250 return fs.readFileSync(fileName, 'utf-8');251 } catch (e) {252 return '// No source available';253 }254 }255}256exports.RecorderSupplement = RecorderSupplement;257class ContextRecorder extends _events.EventEmitter {258 constructor(context, params) {259 super();260 this._generator = void 0;261 this._pageAliases = new Map();262 this._lastPopupOrdinal = 0;263 this._lastDialogOrdinal = 0;264 this._lastDownloadOrdinal = 0;265 this._timers = new Set();266 this._context = void 0;267 this._params = void 0;268 this._recorderSources = void 0;269 this._context = context;270 this._params = params;271 const language = params.language || context._browser.options.sdkLanguage;272 const languages = new Set([new _java.JavaLanguageGenerator(), new _javascript.JavaScriptLanguageGenerator(false), new _javascript.JavaScriptLanguageGenerator(true), new _python.PythonLanguageGenerator(false), new _python.PythonLanguageGenerator(true), new _csharp.CSharpLanguageGenerator()]);273 const primaryLanguage = [...languages].find(l => l.id === language);274 if (!primaryLanguage) throw new Error(`\n===============================\nUnsupported language: '${language}'\n===============================\n`);275 languages.delete(primaryLanguage);276 const orderedLanguages = [primaryLanguage, ...languages];277 this._recorderSources = [];278 const generator = new _codeGenerator.CodeGenerator(context._browser.options.name, !!params.startRecording, params.launchOptions || {}, params.contextOptions || {}, params.device, params.saveStorage);279 let text = '';280 generator.on('change', () => {281 this._recorderSources = [];282 for (const languageGenerator of orderedLanguages) {283 const source = {284 file: languageGenerator.fileName,285 text: generator.generateText(languageGenerator),286 language: languageGenerator.highlighter,287 highlight: []288 };289 source.revealLine = source.text.split('\n').length - 1;290 this._recorderSources.push(source);291 if (languageGenerator === orderedLanguages[0]) text = source.text;292 }293 this.emit(ContextRecorder.Events.Change, {294 sources: this._recorderSources,295 primaryFileName: primaryLanguage.fileName296 });297 });298 if (params.outputFile) {299 context.on(_browserContext.BrowserContext.Events.BeforeClose, () => {300 fs.writeFileSync(params.outputFile, text);301 text = '';302 });303 process.on('exit', () => {304 if (text) fs.writeFileSync(params.outputFile, text);305 });306 }307 this._generator = generator;308 }309 async install() {310 this._context.on(_browserContext.BrowserContext.Events.Page, page => this._onPage(page));311 for (const page of this._context.pages()) this._onPage(page); // Input actions that potentially lead to navigation are intercepted on the page and are312 // performed by the Playwright.313 await this._context.exposeBinding('_playwrightRecorderPerformAction', false, (source, action) => this._performAction(source.frame, action)); // Other non-essential actions are simply being recorded.314 await this._context.exposeBinding('_playwrightRecorderRecordAction', false, (source, action) => this._recordAction(source.frame, action));315 await this._context.extendInjectedScript(recorderSource.source, {316 isUnderTest: (0, _utils2.isUnderTest)()317 });318 }319 setEnabled(enabled) {320 this._generator.setEnabled(enabled);321 }322 dispose() {323 for (const timer of this._timers) clearTimeout(timer);324 this._timers.clear();325 }326 async _onPage(page) {327 // First page is called page, others are called popup1, popup2, etc.328 const frame = page.mainFrame();...
toolbar.js
Source:toolbar.js
...8}9let scenarioStatusProxy = null;10const prepareToolbar = async function(context, director,scenarioStatus) {11 scenarioStatusProxy = scenarioStatus12 await context.exposeBinding('directorFunction', director)13 await context.exposeBinding('snapshotFunction', snapshotter)14 // the function to create the toolbar - HTML and CSS15 await context.exposeBinding('prepareToolbarFunction', injectToolbarIntoPage)16 await context.exposeBinding('saveAllImagesFunction', allImageDownloader )17 18 // this script invokes the function that creates the toolbar in the page 19 // it is executed when a page or frame is created or navigated (https://microsoft.github.io/playwright/docs/1.6.1/api/class-browsercontext#browsercontextaddinitscriptscript-arg)20 await context.addInitScript({21 content: `console.log('initializing script after page or frame DOM recreate');22 window.prepareToolbarFunction();23 ${shortCutJS} 24 `25 });26 27}28exports.prepareToolbar = prepareToolbar29const shortCutJS = `function handleShortCutKey(e) { 30 if ('KeyB'==e.code && e.ctrlKey) toggleToolbar()...
floating-menu.js
Source:floating-menu.js
...11(async () => {12 const browser = await chromium.launch({ headless: false })13 const context = await browser.newContext()14 // the function to take a snapshot of the current page15 await context.exposeBinding('snapshotFunction', snapshotter)16 // the function to create the toolbar - HTML and CSS17 await context.exposeBinding('prepareToolbarFunction', prepareToolbar)18 await context.exposeBinding('saveAllImagesFunction', allImageDownloader )19 const shortCutJS = `function handleShortCutKey(e) { 20 if ('KeyB'==e.code && e.ctrlKey) toggleToolbar()21 }22 const toggleToolbar = () => {23 const toolbar = document.getElementById('${TOOLBAR_ID}')24 if ('none'==toolbar.style.display)25 toolbar.style.display = "block"26 else 27 toolbar.style.display = "none"28 }29 // create a shortcut key (ctrl + b) that triggers the JS function to toggle the toolbar30 document.addEventListener('keyup', handleShortCutKey); 31 `32 ...
inject-shortcut-download-all-images.js
Source:inject-shortcut-download-all-images.js
...54(async () => {55 const browser = await chromium.launch({ headless: false })56 const context = await browser.newContext()57 // expose a Node function as binding to the page (to be invoked from the function)58 await context.exposeBinding('allImageDownloadFunction', allImageDownloader)59 await context.exposeBinding('snapshotFunction', snapshotter)60 await context.exposeBinding('imageDownloadFunction', singleImageDownloader)61 // create a shortcut key (ctrl + b) that triggers the JS function to download all images62 // create a shortcut key (ctrl + y) that triggers the JS function to take a snapshot of the page63 const shortCutJS = `async function handleShortCutKey(e) { 64 if ('KeyB'==e.code && e.ctrlKey) { // ctrl + b65 const result = window.allImageDownloadFunction() ; // invoke the Node function that was exposed to the browser context66 console.log(result+" images were downloaded")67 }68 if ('KeyY'==e.code && e.ctrlKey) { // ctrl + y69 window.snapshotFunction() ; // invoke the Node function that was exposed to the browser context 70 }71 if ('KeyM'==e.code && e.ctrlKey) {// ctrl + m72 console.log("save image under mouse, find first image ancestor / closest related node of type IMAGE from elementUnderMouse upwards")73 if (elementUnderMouse.tagName=="IMG") {74 const imageSource = elementUnderMouse.getAttribute('src')...
clickTracker.js
Source:clickTracker.js
...6 this.events=[this.eventType];7 }8 async instrument(page) {9 10 await page.exposeBinding('clicked', async (source, elementData) => {11 setTimeout((data)=>{this.report(data)}, 50, elementData);12 13 });14 await page.addInitScript({ content: `15 document.addEventListener('click', event => window.clicked(16 {17 classList: [...event.target.classList],18 elementId: event.target.id,19 text: event.target.textContent,20 innerText: event.target.innerText, 21 innerHtml: event.target.innerHTML,22 outerText: event.target.outerText, 23 outerHtml: event.target.outerHTML, 24 timeStamp: event.timeStamp, ...
screenshotTracker.js
Source:screenshotTracker.js
...6 this.events=[this.eventType];7 }8 async instrument(page) {9 10 await page.exposeBinding('screenshotPage', async (source, element) => {11 12 const screenshotBuffer= await page.screenshot();13 const bufferString= screenshotBuffer.toString("base64");14 setTimeout((data)=>{this.report(data)}, 50, bufferString)15 16 }, { handle: true });17 await page.addInitScript({ content: ` document.addEventListener('click', event => window.screenshotPage(event.target)); `});18 }19 report(elementData) {20 const eventData = {21 eventType: this.eventType,22 eventData: elementData23 };24 this.emit(this.eventType,JSON.stringify(eventData))...
demo6.js
Source:demo6.js
1const { webkit } = require('playwright'); // Or 'chromium' or 'firefox'.2(async () => {3 const browser = await webkit.launch({ headless: false });4 const context = await browser.newContext();5 await context.exposeBinding('pagetitle', ({ page }) => page.url());6 const page = await context.newPage();7 await page.setContent(`8 <script>9 async function onClick() {10 document.querySelector('div').textContent = await window.pagetitle();11 }12 </script>13 <button onclick="onClick()">Click me</button>14 <div></div>15 `);16 await page.click('button');...
Playwright.js
Source:Playwright.js
...3 return function (name) {4 return function (cb) {5 return function (opts) {6 return function () {7 return x.exposeBinding(name, function (info, arg) {8 return cb(info)(arg)();9 }, opts);10 };11 };12 };13 };...
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 await context.exposeBinding('foo', (source, arg) => {6 return `bar: ${arg}`;7 });8 const page = await context.newPage();9 const result = await page.evaluate(async arg => {10 return await window.foo(arg);11 }, 'hello');12 await browser.close();13})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({ headless: false });4 const page = await browser.newPage();5 await page.exposeBinding('myBinding', (source, ...args) => {6 console.log('myBinding called with', ...args);7 return 'myBindingResult';8 });9 await page.evaluate(() => {10 console.log('myBinding result:', window.myBinding('arg1', 'arg2'));11 });12 await browser.close();13})();14const { chromium } = require('playwright');15(async () => {16 const browser = await chromium.launch({17 });18 const page = await browser.newPage();19 await browser.close();20})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({ headless: false });4 const page = await browser.newPage();5 await page.exposeBinding('page', () => page);6 await page.exposeFunction('add', (a, b) => a + b);7 await page.exposeFunction('multiply', (a, b) => a * b);8 await page.exposeFunction('subtract', (a, b) => a - b);9 await page.exposeFunction('divide', (a, b) => a / b);10 await page.exposeFunction('modulo', (a, b) => a % b);11 await page.exposeFunction('power', (a, b) => a ** b);12 await page.exposeFunction('squareRoot', (a) => Math.sqrt(a));13 await page.exposeFunction('square', (a) => a * a);14 await page.exposeFunction('cube', (a) => a * a * a);15 await page.exposeFunction('log', (a) => Math.log(a));16 await page.exposeFunction('log10', (a) => Math.log10(a));17 await page.exposeFunction('log2', (a) => Math.log2(a));18 await page.exposeFunction('abs', (a) => Math.abs(a));19 await page.exposeFunction('round', (a) => Math.round(a));20 await page.exposeFunction('ceil', (a) => Math.ceil(a));21 await page.exposeFunction('floor', (a) => Math.floor(a));22 await page.exposeFunction('min', (a, b) => Math.min(a, b));23 await page.exposeFunction('max', (a, b) => Math.max(a, b));24 await page.exposeFunction('factorial', (a) => {25 let fact = 1;26 for (let i = 1; i <= a; i++) {27 fact *= i;28 }29 return fact;30 });31 await page.exposeFunction('fibonacci', (a) => {32 let num1 = 0;33 let num2 = 1;34 let sum;35 for (let i = 0; i < a; i++) {
Using AI Code Generation
1const { chromium } = require('playwright');2const path = require('path');3(async () => {4 const browser = await chromium.launch({ headless: false });5 const page = await browser.newPage();6 await page.exposeBinding('test', async (source, ...args) => {7 console.log('test function called', source, args);8 return 'test';9 });10 await page.waitForTimeout(3000);11 await page.evaluate(async () => {12 const test = await window.test('test', 1, 2, 3);13 console.log(test);14 });15 await browser.close();16})();17const { chromium } = require('playwright');18const path = require('path');19(async () => {20 const browser = await chromium.launch({ headless: false });21 const page = await browser.newPage();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 await context.exposeBinding('get', (source, ...args) => {6 return args[0];7 });8 const page = await context.newPage();9 const result = await page.evaluate(async () => {10 return await window.get('foo');11 });12 console.log(result);13 await browser.close();14})();15const { chromium } = require('playwright');16(async () => {17 const browser = await chromium.launch();18 const context = await browser.newContext();19 const page = await context.newPage();20 await page.screenshot({ path: 'example.png' });21 await browser.close();22})();23const { chromium } = require('playwright');24test('basic test', async ({ page }) => {25 await page.screenshot({ path: 'example.png' });26});
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 context.exposeBinding('log', (source, ...args) => {6 console.log('log', ...args);7 });8 const page = await context.newPage();9 await page.evaluate(() => log('hello', 'world'));10 await browser.close();11})();12const { chromium } = require('playwright');13(async () => {14 const browser = await chromium.launch();15 const context = await browser.newContext();16 context.exposeFunction('log', (...args) => {17 console.log('log', ...args);18 });19 const page = await context.newPage();20 await page.evaluate(() => log('hello', 'world'));21 await browser.close();22})();23const { chromium } = require('playwright');24(async () => {25 const browser = await chromium.launch();26 const context = await browser.newContext();27 context.exposeBinding('log', (source, ...args) => {28 console.log('log', ...args);29 });30 const page = await context.newPage();31 await page.evaluate(() => log('hello', 'world'));32 await browser.close();33})();34const { chromium } = require('playwright');35(async () => {36 const browser = await chromium.launch();37 const context = await browser.newContext();38 context.exposeFunction('log', (...args) => {39 console.log('log', ...args);40 });41 const page = await context.newPage();42 await page.evaluate(() => log('hello', 'world'));43 await browser.close();44})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 await context.exposeBinding('myBinding', (source, arg) => {6 });7 const page = await context.newPage();8 await page.evaluate(() => myBinding('hello'));9 await browser.close();10})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 await context.exposeBinding('playwright', (source, ...args) => {6 console.log(source);7 return source[args[0]].apply(source, args.slice(1));8 });9 const page = await context.newPage();10 await page.evaluate(async () => {11 const result = await window.playwright.evaluate('1 + 2');12 });13 await browser.close();14})();
Playwright tutorial
LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.
Chapters:
- What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
- How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
- Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
- What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
- Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
- Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
- Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
- Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
- Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
- Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
- Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
- Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.
Run Playwright Internal automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
