How to use clickablePoint method in Puppeteer

Best JavaScript code snippet using puppeteer

multi-block-selection.test.js

Source:multi-block-selection.test.js

...307		await page.keyboard.press( 'ArrowUp' );308		const [ paragraph1, paragraph2 ] = await page.$$(309			'[data-type="core/paragraph"]'310		);311		const coord1 = await paragraph1.clickablePoint();312		const coord2 = await paragraph2.clickablePoint();313		await page.mouse.move( coord1.x, coord1.y );314		await page.mouse.down();315		await page.mouse.move( coord2.x, coord2.y, { steps: 10 } );316		await page.mouse.up();317		await testNativeSelection();318		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );319	} );320	it( 'should select by dragging into nested block', async () => {321		await clickBlockAppender();322		await page.keyboard.type( '1' );323		await page.keyboard.press( 'Enter' );324		await page.keyboard.type( '/group' );325		await page.waitForXPath(326			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Group')]`327		);328		await page.keyboard.press( 'Enter' );329		const groupAppender = await page.waitForSelector(330			'.block-editor-button-block-appender'331		);332		await groupAppender.click();333		const paragraphBlockButton = await page.waitForSelector(334			'.editor-block-list-item-paragraph'335		);336		await paragraphBlockButton.click();337		await page.keyboard.type( '2' );338		const [ paragraph1, paragraph2 ] = await page.$$(339			'[data-type="core/paragraph"]'340		);341		const coord1 = await paragraph1.clickablePoint();342		const coord2 = await paragraph2.clickablePoint();343		await page.mouse.move( coord1.x, coord1.y );344		await page.mouse.down();345		await page.mouse.move( coord2.x, coord2.y, { steps: 10 } );346		await page.mouse.up();347		await testNativeSelection();348		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );349	} );350	it( 'should cut and paste', async () => {351		await clickBlockAppender();352		await page.keyboard.type( '1' );353		await page.keyboard.press( 'Enter' );354		await page.keyboard.type( '2' );355		await pressKeyWithModifier( 'primary', 'a' );356		await pressKeyWithModifier( 'primary', 'a' );357		await pressKeyWithModifier( 'primary', 'x' );358		expect( await getEditedPostContent() ).toMatchSnapshot();359		await pressKeyWithModifier( 'primary', 'v' );360		expect( await getEditedPostContent() ).toMatchSnapshot();361	} );362	it( 'should copy and paste', async () => {363		await clickBlockAppender();364		await page.keyboard.type( '1' );365		await page.keyboard.press( 'Enter' );366		await page.keyboard.type( '2' );367		await pressKeyWithModifier( 'primary', 'a' );368		await pressKeyWithModifier( 'primary', 'a' );369		await pressKeyWithModifier( 'primary', 'c' );370		expect( await getEditedPostContent() ).toMatchSnapshot();371		await page.keyboard.press( 'Backspace' );372		expect( await getEditedPostContent() ).toMatchSnapshot();373		await pressKeyWithModifier( 'primary', 'v' );374		expect( await getEditedPostContent() ).toMatchSnapshot();375	} );376	it( 'should return original focus after failed multi selection attempt', async () => {377		await clickBlockAppender();378		await page.keyboard.type( '1' );379		await page.keyboard.type( '2' );380		await page.keyboard.press( 'ArrowLeft' );381		const [ coord1, coord2 ] = await page.evaluate( () => {382			const selection = window.getSelection();383			if ( ! selection.rangeCount ) {384				return;385			}386			const range = selection.getRangeAt( 0 );387			const rect1 = range.getClientRects()[ 0 ];388			const element = document.querySelector(389				'[data-type="core/paragraph"]'390			);391			const rect2 = element.getBoundingClientRect();392			return [393				{394					x: rect1.x,395					y: rect1.y + rect1.height / 2,396				},397				{398					// Move a bit outside the paragraph.399					x: rect2.x - 5,400					y: rect2.y + rect2.height / 2,401				},402			];403		} );404		await page.mouse.move( coord1.x, coord1.y );405		await page.mouse.down();406		await page.mouse.move( coord2.x, coord2.y, { steps: 10 } );407		await page.mouse.up();408		// Wait for the selection to update.409		await page.evaluate(410			() => new Promise( window.requestAnimationFrame )411		);412		// Only "1" should be deleted.413		await page.keyboard.press( 'Backspace' );414		expect( await getEditedPostContent() ).toMatchSnapshot();415	} );416	it( 'should preserve dragged selection on move', async () => {417		await clickBlockAppender();418		await page.keyboard.type( '1' );419		await page.keyboard.press( 'Enter' );420		await page.keyboard.type( '2' );421		await page.keyboard.press( 'Enter' );422		await page.keyboard.type( '3' );423		const paragraphs = await page.$$( '[data-type="core/paragraph"]' );424		const coord1 = await paragraphs[ 2 ].clickablePoint();425		const coord2 = await paragraphs[ 1 ].clickablePoint();426		await page.mouse.move( coord1.x, coord1.y );427		await page.mouse.down();428		await page.mouse.move( coord2.x, coord2.y );429		await page.mouse.up();430		await testNativeSelection();431		expect( await getSelectedFlatIndices() ).toEqual( [ 2, 3 ] );432		await clickBlockToolbarButton( 'Move up' );433		await testNativeSelection();434		expect( await getSelectedFlatIndices() ).toEqual( [ 1, 2 ] );435		expect( await getEditedPostContent() ).toMatchSnapshot();436	} );437	it( 'should clear selection when clicking next to blocks', async () => {438		await clickBlockAppender();439		await page.keyboard.type( '1' );...

Map.js

Source:Map.js

1import React, { Component } from "react";2import { isEmpty, notEmpty } from "../../common/empty";3import PropTypes from "prop-types";4import GoogleMapReact from "google-map-react";5import ClickablePoint from "../point/ClickablePoint";6import { fitBounds } from "google-map-react/utils";7class Map extends Component {8  constructor(props) {9    super(props);10    this.state = { width: 0, height: 0 };11    this.updateWindowDimensions = this.updateWindowDimensions.bind(this);12  }13  componentDidMount() {14    this.updateWindowDimensions();15    window.addEventListener("resize", this.updateWindowDimensions);16  }17  componentWillUnmount() {18    this.props.setShowTopNav(true);19    window.removeEventListener("resize", this.updateWindowDimensions);20  }21  updateWindowDimensions() {22    this.setState({ width: window.innerWidth, height: window.innerHeight });23  }24  makeBounds(placesArr) {25    if (isEmpty(placesArr)) return null;26    const lats = [];27    const lngs = [];28    // put lats and lngs for all places in their respective arrays29    placesArr.forEach(({ latLng }) => {30      lats.push(latLng.lat);31      lngs.push(latLng.lng);32    });33    // spreading on Math.max/min can run into a maximum args limit for the js engine, but according to docs, thats well into the tens of thousands, so shouldnt be a problem for this app.34    return {35      nw: {36        lat: Math.max(...lats),37        lng: Math.min(...lngs)38      },39      se: {40        lat: Math.min(...lats),41        lng: Math.max(...lngs)42      }43    };44  }45  makePoints(placesArr) {46    const { lists, currentList = {} } = this.props;47    const currentColor = currentList.color;48    return placesArr.map(place => {49      const list = lists.find(list => {50        return list._id === place.list_id;51      });52      const color = (list && list.color) || currentColor || "default";53      return (54        <ClickablePoint55          show={placesArr.length === 1}56          key={place.place_id || place.address}57          lat={place.latLng.lat}58          lng={place.latLng.lng}59          text={place.suggestion}60          color={color}61        />62      );63    });64  }65  createMapOptions(maps) {66    return {67      fullscreenControl: false,68      zoomControl: true,69      // mapTypeControl: true,70      // mapTypeControlOptions: {71      //   style: maps.MapTypeControlStyle.DEFAULT,72      //   position: maps.ControlPosition.BOTTOM_CENTER73      // },74      streetViewControl: true,75      streetViewControlOptions: {76        position: maps.ControlPosition.LEFT_BOTTOM77      }78    };79  }80  render() {81    const { currentPlace, places = [], setShowTopNav } = this.props;82    const hasCurrentPlace = notEmpty(currentPlace.place_id);83    const placesArr = hasCurrentPlace ? [currentPlace] : places;84    const points = this.makePoints(placesArr);85    let centerZoom = {86      // default zoom and center over north america87      center: {88        lat: 39.09596,89        lng: -95.8886790      },91      zoom: 492    };93    if (hasCurrentPlace || placesArr.length === 1) {94      // has current place or only one place on list - show just that place zoomed in95      const place = hasCurrentPlace ? currentPlace : placesArr[0];96      centerZoom = {97        center: {98          lat: place.latLng.lat,99          lng: place.latLng.lng100        },101        zoom: hasCurrentPlace ? 17 : 10102      };103    } else if (placesArr.length > 1) {104      // no current place, but has more than one item on the list of places - have library make centerZoom105      const widthHeight = {106        width: this.state.width,107        height: this.state.height108      };109      const bounds = this.makeBounds(placesArr);110      centerZoom = bounds && fitBounds(bounds, widthHeight);111    }112    return (113      <div className="the-map">114        <GoogleMapReact115          center={centerZoom.center}116          zoom={centerZoom.zoom}117          options={this.createMapOptions}118          onGoogleApiLoaded={({ map, maps }) => {119            const streetView = map.getStreetView();120            maps.event.addListener(streetView, "visible_changed", () =>121              setShowTopNav(!streetView.visible)122            );123          }}124          yesIWantToUseGoogleMapApiInternals125        >126          {points}127        </GoogleMapReact>128      </div>129    );130  }131}132Map.propTypes = {133  places: PropTypes.array.isRequired,134  lists: PropTypes.array.isRequired,135  setShowTopNav: PropTypes.func.isRequired,136  currentList: PropTypes.object.isRequired,137  currentPlace: PropTypes.object.isRequired,138  text: PropTypes.string139};...

clicking.js

Source:clicking.js

...34  35  if (!(await clickMe.isIntersectingViewport())) {36    await page.evaluate((element) => { element.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"}); }, clickMe);37  }38  const clickPoint = await clickMe.clickablePoint();39  const integerclickPoint = {40    x: parseInt(clickPoint.x, 10),41    y: parseInt(clickPoint.y, 10),42  };43  await clickMe.click();44  console.log({ resultclickMe });45};...

ClickablePoint.js

Source:ClickablePoint.js

1import React, { Component } from "react";2import PropTypes from "prop-types";3import { CSSTransition } from "react-transition-group";4import { PlaceIcon } from "../common/Icon";5class ClickablePoint extends Component {6  constructor(props) {7    super(props);8    this.animationTime = 250; // css animation time in ms9    this.state = {10      show: props.show || false,11      transitionIn: false12    };13    this.handleClick = this.handleClick.bind(this);14  }15  componentDidMount() {16    if (this.state.show) {17      this.setState({ transitionIn: true });18    }19  }20  handleClick() {21    const { show, transitionIn } = this.state;22    if (show) {23      // currently visible, wait for transition out24      this.setState({ transitionIn: false });25      setTimeout(() => {26        this.setState({ show: !this.state.show });27      }, this.animationTime);28    } else {29      // currently hidden, show immediately30      this.setState({31        show: !show,32        transitionIn: !transitionIn33      });34    }35  }36  render() {37    const { text, color } = this.props;38    const { show, transitionIn } = this.state;39    return (40      <div onClick={this.handleClick} className="map-point">41        <PlaceIcon color={color} classes={["map-point__icon"]} />42        <CSSTransition in={transitionIn} timeout={0} classNames="growFade">43          <span className={`map-point__text z-depth-1 ${show ? "" : "hide"}`}>44            {text}45          </span>46        </CSSTransition>47      </div>48    );49  }50}51ClickablePoint.propTypes = {52  show: PropTypes.bool,53  color: PropTypes.string.isRequired,54  text: PropTypes.string55};...

draggable-block.test.js

Source:draggable-block.test.js

...34		await showBlockToolbar();35		const dragHandle = await page.waitForSelector(36			'.block-editor-block-mover__drag-handle'37		);38		const dragHandlePoint = await dragHandle.clickablePoint();39		const paragraph = await page.$( '[data-type="core/paragraph"]' );40		const paragraphPoint = await paragraph.clickablePoint();41		const paragraphRect = await paragraph.boundingBox();42		await page.mouse.dragAndDrop( dragHandlePoint, {43			x: paragraphPoint.x,44			// Drag to the top half.45			y: paragraphPoint.y - paragraphRect.height / 4,46		} );47		expect( await getEditedPostContent() ).toMatchSnapshot();48	} );...

list-view.test.js

Source:list-view.test.js

...7	getEditedPostContent,8	pressKeyWithModifier,9} from '@wordpress/e2e-test-utils';10async function dragAndDrop( draggableElement, targetElement, offsetY ) {11	const draggablePoint = await draggableElement.clickablePoint();12	const targetClickablePoint = await targetElement.clickablePoint();13	const targetPoint = {14		x: targetClickablePoint.x,15		y: targetClickablePoint.y + offsetY,16	};17	return await page.mouse.dragAndDrop( draggablePoint, targetPoint );18}19describe( 'List view', () => {20	beforeAll( async () => {21		await page.setDragInterception( true );22	} );23	beforeEach( async () => {24		await createNewPost();25	} );26	afterAll( async () => {...

youtube.js

Source:youtube.js

...16    await sleep(7 * 10 ** 3);17    const cursor = createCursor(page);18    const loginElement = await page.$(selector);19    console.log({ loginElement });20    const loginPoint = await loginElement.clickablePoint();21    console.log({ loginPoint });22    const integerLoginPoint = {23      x: parseInt(loginPoint.x, 10),24      y: parseInt(loginPoint.y, 10),25    };26    console.log({ integerLoginPoint });27    const resultStart = await cursor.moveTo({ x: 5, y: 5 });28    console.log({ resultStart });29    const resultLoginElement = await cursor.click(loginElement);30    console.log({ resultLoginElement });31    await page.screenshot("/usr/output/yt-login-step-0.png");32  } catch (error) {33    console.log({ error });34  } finally {...

drag-and-resize.js

Source:drag-and-resize.js

...8 *9 * @return {Promise} Promise resolving when drag completes.10 */11export async function dragAndResize( element, delta ) {12	const elementPoint = await element.clickablePoint();13	await page.mouse.move( elementPoint.x, elementPoint.y );14	await page.mouse.down();15	await page.mouse.move( elementPoint.x + delta.x, elementPoint.y + delta.y );16	await page.mouse.up();...

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3  const browser = await puppeteer.launch();4  const page = await browser.newPage();5  await page.setViewport({ width: 1280, height: 800 });6  await page.click('input[name="q"]');7  await page.type('input[name="q"]', 'Puppeteer');8  await page.click('input[name="btnK"]');9  await page.waitForNavigation();10  await page.screenshot({ path: 'puppeteer.png' });11  await browser.close();12})();13const puppeteer = require('puppeteer');14(async () => {15  const browser = await puppeteer.launch();16  const page = await browser.newPage();17  await page.setViewport({ width: 1280, height: 800 });18  await page.click('input[name="q"]');19  await page.type('input[name="q"]', 'Puppeteer');20  await page.click('input[name="btnK"]');21  await page.waitForNavigation();22  await page.screenshot({ path: 'puppeteer.png' });23  await browser.close();24})();25const puppeteer = require('puppeteer');26(async () => {27  const browser = await puppeteer.launch();28  const page = await browser.newPage();29  await page.setViewport({ width: 1280, height: 800 });30  await page.click('input[name="q"]');31  await page.type('input[name="q"]', 'Puppeteer');32  await page.click('input[name="btnK"]');33  await page.waitForNavigation();34  await page.screenshot({ path: 'puppeteer.png' });35  await browser.close();36})();37const puppeteer = require('puppeteer');38(async () => {39  const browser = await puppeteer.launch();40  const page = await browser.newPage();41  await page.setViewport({ width: 1280, height: 800 });42  await page.click('input[name="q"]');43  await page.type('input[name="q"]', '

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3  const browser = await puppeteer.launch({headless: false});4  const page = await browser.newPage();5  await page.setViewport({ width: 1920, height: 1080 });6  await page.waitForSelector('input[name="q"]');7  await page.click('input[name="q"]');8  await page.keyboard.type('Puppeteer');9  await page.click('input[name="btnK"]');10  await page.waitForSelector('a[href="

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async() => {3    const browser = await puppeteer.launch({headless: false});4    const page = await browser.newPage();5    await page.waitForSelector('input[name=q]', {visible: true});6    await page.click('input[name=q]');7    await page.type('input[name=q]', 'Puppeteer');8    const element = await page.$('input[name=q]');9    const box = await element.boundingBox();10    await page.mouse.click(box.x + box.width - 10, box.y + 10);11    await page.waitFor(2000);12    await browser.close();13})();14const puppeteer = require('puppeteer');15(async() => {16    const browser = await puppeteer.launch({headless: false});17    const page = await browser.newPage();18    await browser.close();19})();20page.goto()21page.waitFor()22await page.waitForSelector('input[name=q]', {visible: true});23page.click()24page.click()

Using AI Code Generation

1const puppeteer = require('puppeteer');2(async () => {3  const browser = await puppeteer.launch({headless: false});4  const page = await browser.newPage();5  await page.click('input[name="q"]');6  await page.keyboard.type('Puppeteer');7  await page.waitForSelector('ul.erkvQe');8  const result = await page.evaluate(() => {9    const results = Array.from(document.querySelectorAll('ul.erkvQe li'));10    const randomResult = results[Math.floor(Math.random() * results.length)];11    return randomResult.innerText;12  });13  await page.waitForSelector('input[name="q"]');14  await page.click('input[name="q"]');15  await page.keyboard.type(result);16  await page.waitForSelector('button[name="btnK"]');17  await page.click('button[name="btnK"]');18  await page.waitForNavigation();19  await page.screenshot({path: 'example.png'});20  await browser.close();21})();22const puppeteer = require('puppeteer');23(async () => {24  const browser = await puppeteer.launch({headless: false});25  const page = await browser.newPage();26  await page.click('input[name="q"]');27  await page.keyboard.type('Puppeteer');28  await page.waitForSelector('ul.erkvQe');29  const result = await page.evaluate(() => {30    const results = Array.from(document.querySelectorAll('ul.erkvQe li'));31    const randomResult = results[Math.floor(Math.random() * results.length)];32    return randomResult.innerText;33  });34  await page.waitForSelector('input[name="q"]');35  await page.click('input[name="q"]');36  await page.keyboard.type(result);37  await page.waitForSelector('button[name="btnK"]');38  await page.click('button[name="btnK"]');39  await page.waitForNavigation();40  await page.screenshot({path: 'example.png'});41  await browser.close();42})();43const puppeteer = require('puppeteer');44(async () => {45  const browser = await puppeteer.launch({headless: false});46  const page = await browser.newPage();

Using AI Code Generation

1const puppeteer = require('puppeteer');2const devices = require('puppeteer/DeviceDescriptors');3const iPhone = devices['iPhone 6'];4const fs = require('fs');5const path = require('path');6const {clickablePoint} = require('clickable-point');7const {getRandomInt} = require('random-number-gen');8(async () => {9    const browser = await puppeteer.launch({headless: false});10    const page = await browser.newPage();11    await page.emulate(iPhone);12    await page.waitForSelector('input[name="q"]');13    await page.focus('input[name="q"]');14    await page.type('input[name="q"]', 'puppeteer');15    await page.click('input[name="q"]');16    await page.waitForSelector('input[name="btnK"]');17    await page.focus('input[name="btnK"]');18    await page.click('input[name="btnK"]');19    await page.waitFor(5000);20    const element = await page.$('a[href="/search?q=puppeteer&ie=UTF-8&oe=UTF-8&hl=en-in&client=safari"]');21    const clickablePointCoordinates = await clickablePoint(element);22    await page.mouse.click(clickablePointCoordinates.x, clickablePointCoordinates.y);23    await page.waitFor(5000);24    await browser.close();25})();26const getRandomInt = (min, max) => {27    return Math.floor(Math.random() * (max - min + 1) + min);28};29module.exports = {30};31const {getRandomInt} = require('random-number-gen');32const clickablePoint = async (element) => {33    const box = await element.boundingBox();34    const x = getRandomInt(box.x, box.x + box.width);35    const y = getRandomInt(box.y, box.y + box.height);36    return {x, y};37};38module.exports = {39};

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.