Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

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.