KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta Join TestMu Conference

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.