Join the 1-day Testing & QA Summit featuring 15+ Expert Speakers.Register for FREE! 
How to use scrollRectIntoViewIfNeeded method in Playwright Internal
Best JavaScript code snippet using playwright-internal
dom.js
Source:dom.js 
...363 }364 )365 await this._page._doSlowMo()366 }367 async _scrollRectIntoViewIfNeeded(rect) {368 return await this._page._delegate.scrollRectIntoViewIfNeeded(this, rect)369 }370 async _waitAndScrollIntoViewIfNeeded(progress) {371 while (progress.isRunning()) {372 assertDone(373 throwRetargetableDOMError(374 await this._waitForDisplayedAtStablePosition(375 progress,376 false,377 /* force */378 false379 /* waitForEnabled */380 )381 )382 )383 progress.throwIfAborted() // Avoid action that has side-effects.384 const result = throwRetargetableDOMError(385 await this._scrollRectIntoViewIfNeeded()386 )387 if (result === 'error:notvisible') continue388 assertDone(result)389 return390 }391 }392 async scrollIntoViewIfNeeded(metadata, options = {}) {393 const controller = new _progress.ProgressController(metadata, this)394 return controller.run(395 (progress) => this._waitAndScrollIntoViewIfNeeded(progress),396 this._page._timeoutSettings.timeout(options)397 )398 }399 async _clickablePoint() {400 const intersectQuadWithViewport = (quad) => {401 return quad.map((point) => ({402 x: Math.min(Math.max(point.x, 0), metrics.width),403 y: Math.min(Math.max(point.y, 0), metrics.height)404 }))405 }406 const computeQuadArea = (quad) => {407 // Compute sum of all directed areas of adjacent triangles408 // https://en.wikipedia.org/wiki/Polygon#Simple_polygons409 let area = 0410 for (let i = 0; i < quad.length; ++i) {411 const p1 = quad[i]412 const p2 = quad[(i + 1) % quad.length]413 area += (p1.x * p2.y - p2.x * p1.y) / 2414 }415 return Math.abs(area)416 }417 const [quads, metrics] = await Promise.all([418 this._page._delegate.getContentQuads(this),419 this._page420 .mainFrame()421 ._utilityContext()422 .then((utility) =>423 utility.evaluate(() => ({424 width: innerWidth,425 height: innerHeight426 }))427 )428 ])429 if (!quads || !quads.length) return 'error:notvisible' // Allow 1x1 elements. Compensate for rounding errors by comparing with 0.99 instead.430 const filtered = quads431 .map((quad) => intersectQuadWithViewport(quad))432 .filter((quad) => computeQuadArea(quad) > 0.99)433 if (!filtered.length) return 'error:notinviewport' // Return the middle point of the first quad.434 const result = {435 x: 0,436 y: 0437 }438 for (const point of filtered[0]) {439 result.x += point.x / 4440 result.y += point.y / 4441 }442 compensateHalfIntegerRoundingError(result)443 return result444 }445 async _offsetPoint(offset) {446 const [box, border] = await Promise.all([447 this.boundingBox(),448 this.evaluateInUtility(449 ([injected, node]) => injected.getElementBorderWidth(node),450 {}451 ).catch((e) => {})452 ])453 if (!box || !border) return 'error:notvisible'454 if (border === 'error:notconnected') return border // Make point relative to the padding box to align with offsetX/offsetY.455 return {456 x: box.x + border.left + offset.x,457 y: box.y + border.top + offset.y458 }459 }460 async _retryPointerAction(461 progress,462 actionName,463 waitForEnabled,464 action,465 options466 ) {467 let retry = 0 // We progressively wait longer between retries, up to 500ms.468 const waitTime = [0, 20, 100, 100, 500] // By default, we scroll with protocol method to reveal the action point.469 // However, that might not work to scroll from under position:sticky elements470 // that overlay the target element. To fight this, we cycle through different471 // scroll alignments. This works in most scenarios.472 const scrollOptions = [473 undefined,474 {475 block: 'end',476 inline: 'end'477 },478 {479 block: 'center',480 inline: 'center'481 },482 {483 block: 'start',484 inline: 'start'485 }486 ]487 while (progress.isRunning()) {488 if (retry) {489 progress.log(490 `retrying ${actionName} action${491 options.trial ? ' (trial run)' : ''492 }, attempt #${retry}`493 )494 const timeout = waitTime[Math.min(retry - 1, waitTime.length - 1)]495 if (timeout) {496 progress.log(` waiting ${timeout}ms`)497 const result = await this.evaluateInUtility(498 ([injected, node, timeout]) =>499 new Promise((f) => setTimeout(f, timeout)),500 timeout501 )502 if (result === 'error:notconnected') return result503 }504 } else {505 progress.log(506 `attempting ${actionName} action${507 options.trial ? ' (trial run)' : ''508 }`509 )510 }511 const forceScrollOptions = scrollOptions[retry % scrollOptions.length]512 const result = await this._performPointerAction(513 progress,514 actionName,515 waitForEnabled,516 action,517 forceScrollOptions,518 options519 )520 ++retry521 if (result === 'error:notvisible') {522 if (options.force) throw new Error('Element is not visible')523 progress.log(' element is not visible')524 continue525 }526 if (result === 'error:notinviewport') {527 if (options.force) throw new Error('Element is outside of the viewport')528 progress.log(' element is outside of the viewport')529 continue530 }531 if (typeof result === 'object' && 'hitTargetDescription' in result) {532 if (options.force)533 throw new Error(534 `Element does not receive pointer events, ${result.hitTargetDescription} intercepts them`535 )536 progress.log(537 ` ${result.hitTargetDescription} intercepts pointer events`538 )539 continue540 }541 return result542 }543 return 'done'544 }545 async _performPointerAction(546 progress,547 actionName,548 waitForEnabled,549 action,550 forceScrollOptions,551 options552 ) {553 const { force = false, position } = options554 if (options.__testHookBeforeStable) await options.__testHookBeforeStable()555 const result = await this._waitForDisplayedAtStablePosition(556 progress,557 force,558 waitForEnabled559 )560 if (result !== 'done') return result561 if (options.__testHookAfterStable) await options.__testHookAfterStable()562 progress.log(' scrolling into view if needed')563 progress.throwIfAborted() // Avoid action that has side-effects.564 if (forceScrollOptions) {565 const scrolled = await this.evaluateInUtility(566 ([injected, node, options]) => {567 if (568 node.nodeType === 1569 /* Node.ELEMENT_NODE */570 )571 node.scrollIntoView(options)572 },573 forceScrollOptions574 )575 if (scrolled === 'error:notconnected') return scrolled576 } else {577 const scrolled = await this._scrollRectIntoViewIfNeeded(578 position579 ? {580 x: position.x,581 y: position.y,582 width: 0,583 height: 0584 }585 : undefined586 )587 if (scrolled !== 'done') return scrolled588 }589 progress.log(' done scrolling')590 const maybePoint = position591 ? await this._offsetPoint(position)...
PageAgent.js
Source:PageAgent.js
...453 throw new Error('Node is detached from document');454 if (!rect)455 rect = { x: -1, y: -1, width: -1, height: -1};456 if (unsafeObject.scrollRectIntoViewIfNeeded)457 unsafeObject.scrollRectIntoViewIfNeeded(rect.x, rect.y, rect.width, rect.height);458 else459 throw new Error('Node does not have a layout object');460 }461 _getNodeBoundingBox(unsafeObject) {462 if (!unsafeObject.getBoxQuads)463 throw new Error('RemoteObject is not a node');464 const quads = unsafeObject.getBoxQuads({relativeTo: this._frameTree.mainFrame().domWindow().document});465 if (!quads.length)466 return;467 let x1 = Infinity;468 let y1 = Infinity;469 let x2 = -Infinity;470 let y2 = -Infinity;471 for (const quad of quads) {...
ffPage.js
Source:ffPage.js
...438 width: maxX - minX,439 height: maxY - minY440 };441 }442 async scrollRectIntoViewIfNeeded(handle, rect) {443 return await this._session.send('Page.scrollIntoViewIfNeeded', {444 frameId: handle._context.frame._id,445 objectId: handle._objectId,446 rect447 }).then(() => 'done').catch(e => {448 if (e instanceof Error && e.message.includes('Node is detached from document')) return 'error:notconnected';449 if (e instanceof Error && e.message.includes('Node does not have a layout object')) return 'error:notvisible';450 throw e;451 });452 }453 async setScreencastOptions(options) {454 if (options) {455 const {456 screencastId...
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.waitForTimeout(2000);7 await page.evaluate(async () => {8 const element = document.querySelector('input[name="q"]');9 await window.scrollRectIntoViewIfNeeded(element);10 });11 await page.screenshot({ path: `screenshot.png` });12 await browser.close();13})();14const { chromium } = require('playwright');15(async () => {16 const browser = await chromium.launch();17 const context = await browser.newContext();18 const page = await context.newPage();19 await page.waitForTimeout(2000);20 await page.evaluate(async () => {21 const element = document.querySelector('input[name="q"]');22 await window.scrollRectIntoViewIfNeeded(element);23 });24 await page.screenshot({ path: `screenshot.png` });25 await browser.close();26})();27const { chromium } = require('playwright');28(async () => {29 const browser = await chromium.launch();30 const context = await browser.newContext();31 const page = await context.newPage();32 await page.waitForTimeout(2000);33 await page.evaluate(async () => {34 const element = document.querySelector('input[name="q"]');35 await window.scrollRectIntoViewIfNeeded(element);36 });37 await page.screenshot({ path: `screenshot.png` });38 await browser.close();39})();40const { chromium } = require('playwright');41(async () => {42 const browser = await chromium.launch();43 const context = await browser.newContext();44 const page = await context.newPage();45 await page.waitForTimeout(2000);46 await page.evaluate(async () => {47 const element = document.querySelector('input[name="q"]');48 await window.scrollRectIntoViewIfNeeded(element);49 });
Using AI Code Generation
1const { chromium } = require("playwright");2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.type("input[title='Search']", "Playwright");7 await page.keyboard.press("Enter");8 await page.waitForSelector("text=Playwright");9 await page.click("text=Playwright");10 await page.waitForLoadState();11 await page.click("text=Docs");12 await page.waitForLoadState();13 await page.waitForSelector("text=API Reference");14 await page.click("text=API Reference");15 await page.waitForLoadState();16 await page.waitForSelector("text=Page");17 await page.click("text=Page");18 await page.waitForLoadState();19 await page.waitForSelector("text=scrollRectIntoViewIfNeeded");20 await page.click("text=scrollRectIntoViewIfNeeded");21 await page.waitForLoadState();22 await page.waitForSelector("text=Parameters");23 await page.click("text=Parameters");24 await page.waitForLoadState();25 await page.waitForSelector("text=element");26 await page.click("text=element");27 await page.waitForLoadState();28 await page.waitForSelector("text=Returns");29 await page.click("text=Returns");30 await page.waitForLoadState();31 await page.waitForSelector("text=Promise");32 await page.click("text=Promise");33 await page.waitForLoadState();34 await page.waitForSelector("text=void");35 await page.click("text=void");36 await page.waitForLoadState();37 await page.waitForSelector("text=Example");38 await page.click("text=Example");39 await page.waitForLoadState();40 await page.waitForSelector("text=await page.click('#checkbox')");41 await page.click("text=await page.click('#checkbox')");42 await page.waitForLoadState();43 await page.waitForSelector("text=await page.scrollRectIntoViewIfNeeded('#checkbox')");44 await page.click("text=await page.scrollRectIntoViewIfNeeded('#checkbox')");45 await page.waitForLoadState();46 await page.waitForSelector("text=await page.evaluate(() => document.querySelector('#checkbox').checked)");47 await page.click("text=await page.evaluate(() => document.querySelector('#checkbox').checked)");48 await page.waitForLoadState();49 await page.waitForSelector("text=true");
Using AI Code Generation
1(async () => {2 const browser = await chromium.launch();3 const context = await browser.newContext();4 const page = await context.newPage();5 await page.evaluate(() => {6 document.querySelector('h1').scrollIntoViewIfNeeded();7 });8 await browser.close();9})();10const { chromium } = require('playwright');11(async () => {12 const browser = await chromium.launch();13 const context = await browser.newContext();14 const page = await context.newPage();15 await page.evaluate(() => {16 document.querySelector('h1').scrollIntoViewIfNeeded();17 });18 await browser.close();19})();20import { chromium } from 'playwright';21(async () => {22 const browser = await chromium.launch();23 const context = await browser.newContext();24 const page = await context.newPage();25 await page.evaluate(() => {26 document.querySelector('h1').scrollIntoViewIfNeeded();27 });28 await browser.close();29})();30import { chromium } from 'playwright';31(async () => {32 const browser = await chromium.launch();33 const context = await browser.newContext();34 const page = await context.newPage();35 await page.evaluate(() => {36 document.querySelector('h1').scrollIntoViewIfNeeded();37 });38 await browser.close();39})();40const { chromium } = require('playwright');41(async () => {42 const browser = await chromium.launch();43 const context = await browser.newContext();44 const page = await context.newPage();45 await page.evaluate(() => {46 document.querySelector('h1').scrollIntoViewIfNeeded();47 });48 await browser.close();49})();50const { chromium } = require('playwright');51(async () => {
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.waitForSelector('input[name="q"]');6 await page.$eval('input[name="q"]', (el) => el.scrollIntoViewIfNeeded());7 await page.type('input[name="q"]', 'playwright');8 await page.click('input[name="btnK"]');9 await page.waitForSelector('text=Playwright is a Node library to automate');10 await page.screenshot({ path: 'example.png' });11 await browser.close();12})();13const { chromium } = require('playwright');14(async () => {15 const browser = await chromium.launch();16 const page = await browser.newPage();17 await page.waitForSelector('input[name="q"]');18 await page.$eval('input[name="q"]', (el) => el.scrollIntoViewIfNeeded());19 await page.type('input[name="q"]', 'playwright');20 await page.click('input[name="btnK"]');21 await page.waitForSelector('text=Playwright is a Node library to automate');22 await page.screenshot({ path: 'example.png' });23 await browser.close();24})();25const { chromium } = require('playwright');26(async () => {27 const browser = await chromium.launch();28 const page = await browser.newPage();29 await page.waitForSelector('input[name="q"]');30 await page.$eval('input[name="q"]', (el) => el.scrollIntoViewIfNeeded());31 await page.type('input[name="q"]', 'playwright');32 await page.click('input[name="btnK"]');33 await page.waitForSelector('text=Playwright is a Node library to automate');34 await page.screenshot({ path: 'example.png' });35 await browser.close();36})();37const { chromium } = require('playwright');
Using AI Code Generation
1const { scrollRectIntoViewIfNeeded } = require('playwright/lib/webkit/webkit.js');2const { webkit } = require('playwright');3(async () => {4 const browser = await webkit.launch();5 const page = await browser.newPage();6 const element = await page.$('#hplogo');7 await scrollRectIntoViewIfNeeded(page.mainFrame(), await element.boundingBox());8 await browser.close();9})();
Using AI Code Generation
1const element = await page.$('text=Some Text');2await element.scrollRectIntoViewIfNeeded();3const element = await page.$('text=Some Text');4await element.scrollIntoViewIfNeeded();5const element = await page.$('text=Some Text');6await element.scrollIntoView();7const element = await page.$('text=Some Text');8await element.scrollIntoViewIfNeeded();9const element = await page.$('text=Some Text');10await element.scrollIntoView();11const element = await page.$('text=Some Text');12await element.scrollIntoViewIfNeeded();13const element = await page.$('text=Some Text');14await element.scrollIntoView();15const element = await page.$('text=Some Text');16await element.scrollIntoViewIfNeeded();17const element = await page.$('text=Some Text');18await element.scrollIntoView();19const element = await page.$('text=Some Text');20await element.scrollIntoViewIfNeeded();21const element = await page.$('text=Some Text');22await element.scrollIntoView();23const element = await page.$('text=Some Text');24await element.scrollIntoViewIfNeeded();25const element = await page.$('text=Some Text');26await element.scrollIntoView();27const element = await page.$('text=Some Text');28await element.scrollIntoViewIfNeeded();29const element = await page.$('text=Some Text');30await element.scrollIntoView();
Using AI Code Generation
1import {chromium} from 'playwright';2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 const search = await page.$('input[name="q"]');7 await search.scrollRectIntoViewIfNeeded();8 await browser.close();9})();10import {chromium} from 'playwright';11(async () => {12 const browser = await chromium.launch();13 const context = await browser.newContext();14 const page = await context.newPage();15 const search = await page.$('input[name="q"]');16 await search.scrollRectIntoViewIfNeeded();17 await browser.close();18})();19import {chromium} from 'playwright';20(async () => {21 const browser = await chromium.launch();22 const context = await browser.newContext();23 const page = await context.newPage();24 const search = await page.$('input[name="q"]');25 await search.scrollRectIntoViewIfNeeded();26 await browser.close();27})();28import {chromium} from 'playwright';29(async () => {30 const browser = await chromium.launch();31 const context = await browser.newContext();32 const page = await context.newPage();33 const search = await page.$('input[name="
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?
