Join the 1-day Testing & QA Summit featuring 15+ Expert Speakers.Register for FREE! 
How to use convertToDisjointRanges method in Playwright Internal
Best JavaScript code snippet using playwright-internal
Coverage.js
Source:Coverage.js 
...130 continue;131 const flattenRanges = [];132 for (const func of entry.functions)133 flattenRanges.push(...func.ranges);134 const ranges = convertToDisjointRanges(flattenRanges);135 coverage.push({url, ranges, text});136 }137 return coverage;138 }139}140class CSSCoverage {141 /**142 * @param {!Puppeteer.CDPSession} client143 */144 constructor(client) {145 this._client = client;146 this._enabled = false;147 this._stylesheetURLs = new Map();148 this._stylesheetSources = new Map();149 this._eventListeners = [];150 this._resetOnNavigation = false;151 }152 /**153 * @param {!Object} options154 */155 async start(options = {}) {156 console.assert(!this._enabled, 'CSSCoverage is already enabled');157 this._resetOnNavigation = options.resetOnNavigation === undefined ? true : !!options.resetOnNavigation;158 this._enabled = true;159 this._stylesheetURLs.clear();160 this._stylesheetSources.clear();161 this._eventListeners = [162 helper.addEventListener(this._client, 'CSS.styleSheetAdded', this._onStyleSheet.bind(this)),163 helper.addEventListener(this._client, 'Runtime.executionContextsCleared', this._onExecutionContextsCleared.bind(this)),164 ];165 await Promise.all([166 this._client.send('DOM.enable'),167 this._client.send('CSS.enable'),168 this._client.send('CSS.startRuleUsageTracking'),169 ]);170 }171 _onExecutionContextsCleared() {172 if (!this._resetOnNavigation)173 return;174 this._stylesheetURLs.clear();175 this._stylesheetSources.clear();176 }177 /**178 * @param {!Object} event179 */180 async _onStyleSheet(event) {181 const header = event.header;182 // Ignore anonymous scripts183 if (!header.sourceURL)184 return;185 try {186 const response = await this._client.send('CSS.getStyleSheetText', {styleSheetId: header.styleSheetId});187 this._stylesheetURLs.set(header.styleSheetId, header.sourceURL);188 this._stylesheetSources.set(header.styleSheetId, response.text);189 } catch (e) {190 // This might happen if the page has already navigated away.191 debugError(e);192 }193 }194 /**195 * @return {!Promise<!Array<!CoverageEntry>>}196 */197 async stop() {198 console.assert(this._enabled, 'CSSCoverage is not enabled');199 this._enabled = false;200 const [ruleTrackingResponse] = await Promise.all([201 this._client.send('CSS.stopRuleUsageTracking'),202 this._client.send('CSS.disable'),203 this._client.send('DOM.disable'),204 ]);205 helper.removeEventListeners(this._eventListeners);206 // aggregate by styleSheetId207 const styleSheetIdToCoverage = new Map();208 for (const entry of ruleTrackingResponse.ruleUsage) {209 let ranges = styleSheetIdToCoverage.get(entry.styleSheetId);210 if (!ranges) {211 ranges = [];212 styleSheetIdToCoverage.set(entry.styleSheetId, ranges);213 }214 ranges.push({215 startOffset: entry.startOffset,216 endOffset: entry.endOffset,217 count: entry.used ? 1 : 0,218 });219 }220 const coverage = [];221 for (const styleSheetId of this._stylesheetURLs.keys()) {222 const url = this._stylesheetURLs.get(styleSheetId);223 const text = this._stylesheetSources.get(styleSheetId);224 const ranges = convertToDisjointRanges(styleSheetIdToCoverage.get(styleSheetId) || []);225 coverage.push({url, ranges, text});226 }227 return coverage;228 }229}230/**231 * @param {!Array<!{startOffset:number, endOffset:number, count:number}>} nestedRanges232 * @return {!Array<!{start:number, end:number}>}233 */234function convertToDisjointRanges(nestedRanges) {235 const points = [];236 for (const range of nestedRanges) {237 points.push({ offset: range.startOffset, type: 0, range });238 points.push({ offset: range.endOffset, type: 1, range });239 }240 // Sort points to form a valid parenthesis sequence.241 points.sort((a, b) => {242 // Sort with increasing offsets.243 if (a.offset !== b.offset)244 return a.offset - b.offset;245 // All "end" points should go before "start" points.246 if (a.type !== b.type)247 return b.type - a.type;248 const aLength = a.range.endOffset - a.range.startOffset;...
cssHandler.js
Source:cssHandler.js
...31 this._stylesheetURLs.clear();32 this._stylesheetSources.clear();33 });34 }35 async convertToDisjointRanges(nestedRanges) {36 const points = [];37 for (const range of nestedRanges) {38 points.push({ offset: range.startOffset, type: 0, range });39 points.push({ offset: range.endOffset, type: 1, range });40 }41 // Sort points to form a valid parenthesis sequence.42 points.sort((a, b) => {43 // Sort with increasing offsets.44 if (a.offset !== b.offset) return a.offset - b.offset;45 // All "end" points should go before "start" points.46 if (a.type !== b.type) return b.type - a.type;47 const aLength = a.range.endOffset - a.range.startOffset;48 const bLength = b.range.endOffset - b.range.startOffset;49 // For two "start" points, the one with longer range goes first.50 if (a.type === 0) return bLength - aLength;51 // For two "end" points, the one with shorter range goes first.52 return aLength - bLength;53 });54 const hitCountStack = [];55 const results = [];56 let lastOffset = 0;57 // Run scanning line to intersect all ranges.58 for (const point of points) {59 if (60 hitCountStack.length &&61 lastOffset < point.offset &&62 hitCountStack[hitCountStack.length - 1] > 063 ) {64 const lastResult = results.length ? results[results.length - 1] : null;65 if (lastResult && lastResult.end === lastOffset)66 lastResult.end = point.offset;67 else results.push({ start: lastOffset, end: point.offset });68 }69 lastOffset = point.offset;70 if (point.type === 0) hitCountStack.push(point.range.count);71 else hitCountStack.pop();72 }73 // Filter out empty ranges.74 return results.filter(range => range.end - range.start > 1);75 }76 async stopCssTracking() {77 assert(this._enabled, 'CSS Coverage has not started!!');78 let cssResults = await this.css.stopRuleUsageTracking();79 await Promise.all([this.css.disable()]);80 this._enabled = false;81 const styleSheetIdToCoverage = new Map();82 for (const entry of cssResults.ruleUsage) {83 let ranges = styleSheetIdToCoverage.get(entry.styleSheetId);84 if (!ranges) {85 ranges = [];86 styleSheetIdToCoverage.set(entry.styleSheetId, ranges);87 }88 ranges.push({89 startOffset: entry.startOffset,90 endOffset: entry.endOffset,91 count: entry.used ? 1 : 092 });93 }94 const cssCoverage = [];95 for (const styleSheetId of this._stylesheetURLs.keys()) {96 const url = this._stylesheetURLs.get(styleSheetId);97 const text = this._stylesheetSources.get(styleSheetId);98 const ranges = await this.convertToDisjointRanges(99 styleSheetIdToCoverage.get(styleSheetId) || []100 );101 cssCoverage.push({ url, ranges, text });102 }103 const coverageAfter = [104 ...cssCoverage.map(results => ({105 ...results,106 type: 'CSS'107 }))108 ];109 const result = await formatCoverage(coverageAfter);110 return result;111 }112 async prettyCss(coverage) {...
JSCoverage.js
Source:JSCoverage.js
...101 const text = this._scriptSources.get(entry.scriptId)102 if (text === undefined || url === undefined) continue103 const flattenRanges = []104 for (const func of entry.functions) flattenRanges.push(...func.ranges)105 const ranges = convertToDisjointRanges(flattenRanges)106 coverage.push({ url, ranges, text })107 }108 return coverage109 }110}...
CSSCoverage.js
Source:CSSCoverage.js
...94 const coverage = []95 for (const styleSheetId of this._stylesheetURLs.keys()) {96 const url = this._stylesheetURLs.get(styleSheetId)97 const text = this._stylesheetSources.get(styleSheetId)98 const ranges = convertToDisjointRanges(99 styleSheetIdToCoverage.get(styleSheetId) || []100 )101 coverage.push({ url, ranges, text })102 }103 return coverage104 }105}...
util.js
Source:util.js
...8 merged[entry.url].ranges.push(...entry.ranges);9 }10 }11 Object.values(merged).forEach(entry => {12 entry.range = convertToDisjointRanges(entry.ranges);13 });14 return Object.values(merged);15};16// https://github.com/GoogleChrome/puppeteer/blob/83c327a0f6b343865304059dd09323e4f8285217/lib/Coverage.js#L26917/**18 * @param {!Array<!{startOffset:number, endOffset:number, count:number}>} nestedRanges19 * @return {!Array<!{start:number, end:number}>}20 */21function convertToDisjointRanges(nestedRanges) {22 const points = [];23 for (const range of nestedRanges) {24 points.push({ offset: range.startOffset, type: 0, range });25 points.push({ offset: range.endOffset, type: 1, range });26 }27 // Sort points to form a valid parenthesis sequence.28 points.sort((a, b) => {29 // Sort with increasing offsets.30 if (a.offset !== b.offset) return a.offset - b.offset;31 // All "end" points should go before "start" points.32 if (a.type !== b.type) return b.type - a.type;33 const aLength = a.range.endOffset - a.range.startOffset;34 const bLength = b.range.endOffset - b.range.startOffset;35 // For two "start" points, the one with longer range goes first....
Using AI Code Generation
1const { convertToDisjointRanges } = require('playwright/lib/utils/convertToDisjointRanges');2const { chromium } = require('playwright');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 const ranges = await page.evaluate(() => {7 const text = 'Hello world';8 const element = document.querySelector('body');9 const regex = new RegExp(text, 'g');10 let match;11 const ranges = [];12 while ((match = regex.exec(element.textContent)) !== null) {13 const start = match.index;14 const end = start + text.length;15 ranges.push({start, end});16 }17 return ranges;18 });19 const disjointRanges = convertToDisjointRanges(ranges);20 await page.addScriptTag({content: `window.findInPage = ${findInPage.toString()}`});21 await page.evaluate((disjointRanges) => {22 window.findInPage(disjointRanges);23 }, disjointRanges);24 await page.screenshot({ path: `example.png` });25 await browser.close();26})();27function findInPage(disjointRanges) {28 ::selection {29 background-color: #ADD8E6;30 color: #000;31 }32 ::-moz-selection {33 background-color: #ADD8E6;34 color: #000;35 }36 `;37 const style = document.createElement('style');38 style.appendChild(document.createTextNode(css));39 document.body.appendChild(style);40 let currentRange = 0;41 function jumpToNextRange() {42 if (!disjointRanges.length || currentRange === disjointRanges.length)43 return;44 const range = disjointRanges[currentRange++];45 const node = document.caretRangeFromPoint(range.start, 0).startContainer;46 const selection = window.getSelection();47 selection.removeAllRanges();48 const rangeObj = new Range();49 rangeObj.setStart(node, range.start);50 rangeObj.setEnd(node, range.end);51 selection.addRange(rangeObj);52 }53 jumpToNextRange();54 document.addEventListener('keydown', (e) => {55 if (e.key === 'ArrowDown') {56 jumpToNextRange();57 e.preventDefault();58 }59 });60 }
Using AI Code Generation
1const { convertToDisjointRanges } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');2const ranges = convertToDisjointRanges([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96, 97, 98, 99, 100, 101, 102, 103, 104, 105, 106, 107, 108, 109, 110, 111, 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 122, 123, 124, 125, 126, 127, 128]);3console.log(ranges);4 { start: 0, end: 128 }5const { convertToDisjointRanges } = require('playwright/lib/server/supplements/recorder/recorderSupplement.js');6const ranges = convertToDisjointRanges([0,
Using AI Code Generation
1const { convertToDisjointRanges } = require('playwright-core/lib/server/supplements/recorder/recorderUtils');2const ranges = convertToDisjointRanges([[1, 3], [2, 4], [5, 6]]);3console.log(ranges);4const { convertToDisjointRanges } = require('playwright-core/lib/server/supplements/recorder/recorderUtils');5const ranges = convertToDisjointRanges([[1, 3], [2, 4], [5, 6]]);6console.log(ranges);
Using AI Code Generation
1const { convertToDisjointRanges } = require('playwright-core/lib/utils/convertToDisjointRanges');2const { test } = require('@playwright/test');3test('test', async ({ page }) => {4 const ranges = convertToDisjointRanges([[1, 2], [3, 5], [4, 5], [6, 7]]);5 console.log(ranges);6});7const { test } = require('@playwright/test');8const { convertToDisjointRanges } = require('playwright-core/lib/utils/convertToDisjointRanges');9test('test', async ({ page }) => {10 const ranges = convertToDisjointRanges([[1, 2], [3, 5], [4, 5], [6, 7]]);11 console.log(ranges);12});13The Playwright team is happy to accept contributions. Please see [CONTRIBUTING.md](
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?
