Best JavaScript code snippet using puppeteer
video.js
Source:video.js
...214 try {215 clearTimeout( $this.data( "timeout" ) );216 } catch ( error ) {}217 onMoveScrub.call( this, e );218 function onRaf() {219 _rafId = raf( onRaf );220 var percent = _rafOffset / $this[ 0 ].clientWidth,221 time = percent * mediabox.getMediaProp( videoId, "duration" );222 $thumb[ 0 ].currentTime = time;223 translate3d( $thumb[ 0 ], px( _rafPosition ), 0, 0 );224 }225 _rafId = raf( onRaf );226 $this.addClass( "is-hovered" );227 $thumb.addClass( "is-active" );228},229onMoveScrub = function ( e ) {230 var $this = $( this ),231 $video = $this.closest( ".js-video" ),232 $progress = $this.find( ".js-video-progress" ),...
cut_it_out.js
Source:cut_it_out.js
...26 window.requestAnimationFrame(() => {27 const o = {}28 o.time = window.performance.now() / 100029 this.raf()30 if (this.onRaf) this.onRaf(o)31 })32 }33 }34 35 36 /*--------------------37 Canvas38 --------------------*/39 class Canvas extends Raf {40 constructor(obj) {41 super()42 this.canvas = document.getElementById(obj.id)43 this.ctx = this.canvas.getContext('2d')44 this.resize()45 this.events()46 }47 48 resize() {49 this.dpr = window.devicePixelRatio50 this.canvas.style.width = `${width}px`51 this.canvas.style.height = `${height}px`52 this.canvas.width = width * this.dpr53 this.canvas.height = height * this.dpr54 }55 56 events() {57 window.addEventListener('resize', this.resize)58 }59 60 getCtx() {61 return this.ctx62 }63 64 clear() {65 this.ctx.clearRect(0, 0, width * this.dpr, height * this.dpr)66 }67 68 onRaf() {69 this.clear()70 }71 }72 73 74 /*--------------------75 Trail76 --------------------*/77 class Trail extends Raf {78 constructor(obj) {79 super()80 Object.assign(this, obj)81 82 this.x = 083 this.y = 084 this.Trail = []85 86 this.binds()87 this.events()88 }89 90 binds() {91 ['handleMouse', 'events', 'tail'].forEach(e => this[e] = this[e].bind(this))92 }93 94 handleMouse(e) {95 this.x = this.dpr * (e.clientX || e.touches[0].clientX)96 this.y = this.dpr * (e.clientY || e.touches[0].clientY)97 }98 99 events() {100 ['mousemove', 'touchstart', 'touchmove']101 .forEach(e => {102 game_window.addEventListener(e, this.handleMouse) 103 })104 }105 106 tail() {107 this.Trail.unshift({x: this.x, y: this.y})108 if (this.Trail.length > this.length) {109 this.Trail.pop()110 }111 }112 113 draw() {114 this.ctx.strokeStyle = this.color115 this.ctx.lineCap = this.lineCap116 this.ctx.beginPath()117 118 this.Trail.forEach((el, i) => {119 this.ctx.lineWidth = this.dpr * mapRange(i, 0, this.length, this.strokeMax, this.strokeMin)120 const type = i === 0 ? 'moveTo' : 'lineTo'121 this.ctx.stroke()122 this.ctx[type](el.x, el.y)123 })124 125 if (this.fill) {126 this.ctx.fillStyle = 'rgba(0, 0, 0, 0)'127 this.ctx.fill()128 }129 }130 131 detect() {132 this.balls.forEach(ball => {133 const half = ball.size / 2134 const bound = {135 left: ball.x - half,136 top: ball.y - half,137 right: ball.x + half,138 bottom: ball.y + half139 }140 141 this.Trail.forEach(e => {142 const {x, y} = e143 if (x > bound.left && x < bound.right && y > bound.top && y < bound.bottom) {144 ball.explode()145 }146 })147 })148 }149 150 onRaf() {151 this.tail()152 this.detect()153 this.draw()154 }155 }156 157 /*--------------------158 Ball159 --------------------*/160 class Ball extends Raf {161 constructor(obj) {162 super()163 Object.assign(this, obj)164 this.regenerate()165 this.draw()166 }167 168 regenerate() {169 this.bomb = random(0, 10) > 8.5170 171 this.exploded = false172 this.color = this.bomb ? 'black' : `hsl(${random(0, 360)}, 80%, 60%)`173 this.size = random(this.sizeMin, this.sizeMax) * this.dpr174 this.x = random(this.size, (width * this.dpr) - this.size)175 this.y = -this.size176 this.acc = 0177 this.speed = 0178 this.ready = false179 180 setTimeout(() => {181 this.ready = true182 }, random(0, 2000))183 }184 185 draw() {186 this.ctx.fillStyle = this.color187 this.ctx.beginPath()188 this.ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2)189 this.ctx.fill()190 this.ctx.closePath()191 }192 193 explode() {194 if (this.exploded) return195 this.exploded = true196 this.game.catch()197 this.speed = -5198 this.size /= 10199 if (this.bomb) {200 console.log('gameover')201 this.game.over()202 }203 }204 205 onRaf() {206 if (!this.ready || this.game.gameOver) return207 this.acc += this.vel208 this.speed += this.acc209 this.y += this.speed210 211 if (this.y > (height * this.dpr) + this.size) {212 if (!this.exploded && !this.bomb) {213 this.game.loose()214 }215 if (this.game.gameOver) return216 this.regenerate()217 }218 this.draw()219 }...
lightWaveAnimation.js
Source:lightWaveAnimation.js
...60 }61 onResize() {62 this._setCamera();63 }64 onRaf() {65 this._render();66 }67}68class Mesh {69 constructor(stage) {70 this.canvas = document.getElementById("webgl-canvas");71 this.canvasWidth = 100; // this.canvas.width;72 this.canvasHeight = 130; //this.canvas.height;73 this.uniforms = {74 resolution: { type: "v2", value: [ this.canvasWidth, this.canvasHeight ] },75 time: { type: "f", value: 0.0 },76 xScale: { type: "f", value: 2.0 },77 yScale: { type: "f", value: 0.5 },78 distortion: { type: "f", value: 0.050 }79 };80 this.stage = stage;81 this.mesh = null;82 this.xScale = 2.0;83 this.yScale = 0.5;84 this.distortion = 0.050;85 }86 init() {87 this._setMesh();88 // this._setGui();89 }90 _setMesh() {91 const position = [92 -1.0, -1.0, 0.0,93 1.0, -1.0, 0.0,94 -1.0, 1.0, 0.0,95 1.0, -1.0, 0.0,96 -1.0, 1.0, 0.0,97 1.0, 1.0, 0.098 ];99 const positions = new THREE.BufferAttribute(new Float32Array(position), 3);100 const geometry = new THREE.BufferGeometry();101 geometry.setAttribute("position", positions);102 const material = new THREE.RawShaderMaterial({103 vertexShader: document.getElementById("js-vertex-shader").textContent,104 fragmentShader: document.getElementById("js-fragment-shader").textContent,105 uniforms: this.uniforms,106 side: THREE.DoubleSide107 });108 this.mesh = new THREE.Mesh(geometry, material);109 this.stage.scene.add(this.mesh);110 }111 _diffuse() {112 // gsap.to(this.mesh.material.uniforms.xScale, {113 // value: 2,114 // duration: 0.1,115 // ease: 'power2.inOut',116 // repeat: -1,117 // yoyo: true118 // });119 // gsap.to(this.mesh.material.uniforms.yScale, {120 // value: 1,121 // duration: 0.1,122 // ease: 'power2.inOut',123 // repeat: -1,124 // yoyo: true125 // });126 }127 _render() {128 this.uniforms.time.value += 0.01;129 }130 _setGui() {131 const parameter = {132 xScale: this.xScale,133 yScale: this.yScale,134 distortion: this.distortion135 }136 const gui = new dat.GUI();137 gui.add(parameter, "xScale", 0.00, 5.00, 0.01).onChange((value) => {138 this.mesh.material.uniforms.xScale.value = value;139 });140 gui.add(parameter, "yScale", 0.00, 1.00, 0.01).onChange((value) => {141 this.mesh.material.uniforms.yScale.value = value;142 });143 gui.add(parameter, "distortion", 0.001, 0.100, 0.001).onChange((value) => {144 this.mesh.material.uniforms.distortion.value = value;145 });146 }147 onRaf() {148 this._render();149 }150}151(() => {152 const stage = new Stage();153 stage.init();154 const mesh = new Mesh(stage);155 mesh.init();156 window.addEventListener("resize", () => {157 stage.onResize();158 });159 window.addEventListener("load", () => {160 setTimeout(() => {161 mesh._diffuse();162 }, 1000);163 });164 const _raf = () => {165 window.requestAnimationFrame(() => {166 stage.onRaf();167 mesh.onRaf();168 _raf();169 });170 };171 _raf();...
funky.js
Source:funky.js
...27 const o = {}28 o.time = window.performance.now() / 100029 o.playhead = o.time % LOOP / LOOP30 this.raf()31 this.onRaf(o)32 })33 }34 }35}36/*--------------------37Canvas38--------------------*/39class Canvas extends Raf {40 constructor(obj) {41 super()42 this.canvas = document.getElementById(obj.id)43 this.ctx = this.canvas.getContext('2d')44 this.resize()45 this.events()46 }47 48 resize() {49 this.dpr = window.devicePixelRatio50 this.canvas.style.width = `${window.innerWidth}px`51 this.canvas.style.height = `${window.innerHeight}px`52 this.canvas.width = window.innerWidth * this.dpr53 this.canvas.height = window.innerHeight * this.dpr54 }55 56 events() {57 window.addEventListener('resize', this.resize)58 }59 60 clear() {61 this.ctx.clearRect(0, 0, window.innerWidth * this.dpr, window.innerHeight * this.dpr)62 }63 64 onRaf() {65 this.clear()66 }67}68/*--------------------69Circle70--------------------*/71class Circle extends Raf {72 constructor(obj) {73 super()74 Object.assign(this, obj)75 this.draw()76 }77 78 draw(playhead, time) {79 const breathe = sin(playhead * TAO)80 this.ctx.globalCompositeOperation = "screen"81 this.ctx.save()82 this.ctx.translate(window.innerWidth / 2 * this.dpr, window.innerHeight / 2 * this.dpr - 30 * this.dpr)83 this.ctx.rotate(PI)84 85 this.ctx.strokeStyle = this.color86 this.ctx.fillStyle = 'rgba(0, 100, 0, 0)'87 this.ctx.lineWidth = this.lineWidth88 this.ctx.beginPath()89 90 for (let i = 0; i <= this.points; i++) {91 const p = i / this.points92 93 const times = 794 const phase = mapRange(cos(p * TAO), -1, 1, 1, mapRange(sin(((this.offset + time * this.speed) * .2 + p) * times * TAO), -1, 1, .5, .58))95 96 let x = phase * this.radius * sin(p * TAO)97 let y = phase * this.radius * cos(p * TAO) 98 99 const type = i === 0 ? 'moveTo' : 'lineTo'100 this.ctx[type](x, y) 101 }102 103 this.ctx.fill()104 this.ctx.stroke() 105 this.ctx.beginPath()106 this.ctx.fillStyle = this.color107 this.ctx.fill()108 this.ctx.restore()109 }110 111 onRaf({playhead, time}) {112 this.draw(playhead, time)113 }114 115}116/*--------------------117Init118--------------------*/119const canvas = new Canvas({120 id: 'canvas'121})122for (let i = 0; i < 8; i++) {123 new Circle({124 ctx: canvas.ctx,125 dpr: canvas.dpr,...
main.js
Source:main.js
...23 this.gui = new dat.GUI();24 }25 init() {26 this._setting()27 this.onRaf()28 gsap.to(this.material.uniforms.uAnimation, {29 value: 1,30 duration: 10,31 })32 }33 _setting() {34 this.webgl.appendChild(this.renderer.domElement)35 this.camera = new THREE.PerspectiveCamera(36 45,37 this.width / this.height,38 0.1,39 100040 )41 this.camera.position.set(0, 0, 2)42 this.controls = new OrbitControls(this.camera, this.renderer.domElement);43 this.controls.enableDamping = true44 45 this._setMesh()46 this._gui();47 }48 _setMesh() {49 this.geometry = new THREE.PlaneBufferGeometry(1,1,1,1);50 this.material = new THREE.ShaderMaterial({51 vertexShader:vert,52 fragmentShader:frag,53 side:THREE.DoubleSide,54 transparent:true,55 uniforms: {56 uTexture: {57 value: this.img58 },59 uProgress: {60 value: 061 },62 uTime: {63 value: 064 },65 uAnimation: {66 value: 067 }68 }69 })70 this.mesh = new THREE.Mesh(this.geometry,this.material);71 this.scene.add(this.mesh);72 }73 _gui() {74 this.gui.add(this.material.uniforms.uProgress,'value',0,1,0.01).name('progress');75 }76 onResize() {77 this.camera.aspect = window.innerWidth / window.innerHeight;78 this.camera.updateProjectionMatrix();79 this.renderer.setSize( window.innerWidth,window.innerHeight);80 this.renderer.setPixelRatio(Math.min(window.devicePixelRatio,2));81 }82 onRaf() {83 this.material.uniforms.uTime.value = this.clock.getElapsedTime()84 this.renderer.render(this.scene, this.camera);85 this.controls.update()86 window.requestAnimationFrame(() => {87 this.onRaf();88 })89 }90}91window.addEventListener('load', () => {92 const gl = new main(document.querySelector('#canvas'));93 window.addEventListener('resize',() => {94 gl.onResize();95 })...
fur.js
Source:fur.js
...17 const o = { };18 o.time = window.performance.now() / 1000;19 o.playhead = o.time % loop / loop;20 this.raf();21 this.onRaf(o);22 });23 }24 }25}26//27class Canvas extends Raf {28 constructor(obj) {29 super();30 this.canvas = document.getElementById(obj.id);31 this.ctx = this.canvas.getContext('2d');32 this.resize();33 this.events();34 }35 resize() {36 this.dpr = window.devicePixelRatio;37 this.canvas.style.width = `${width}px`;38 this.canvas.style.height = `${height}px`;39 this.canvas.width = width * this.dpr;40 this.canvas.height = height * this.dpr;41 this.ctx = this.canvas.getContext('2d');42 this.ctx.scale(this.dpr, this.dpr);43 }44 events() {45 window.addEventListener('resize', this.resize);46 }47 clear() {48 this.ctx.clearRect(0, 0, window.innerWidth, window.innerHeight);49 }50 onRaf() {51 this.clear();52 }53}54//55class Fur extends Raf {56 constructor(obj) {57 super();58 Object.assign(this, obj);59 this.draw();60 }61 draw(playhead, time) {62 this.ctx.save();63 this.ctx.translate(this.x, this.y);64 const n = this.simplex.noise3D(time * 0.1 + this.x * 0.002, -time * 0.2 + this.y * 0.002, time * 0.3);65 this.ctx.fillStyle = 'white';66 const t = Math.round(22 * ((n + 2) * .5)) % 10;67 for (let i = 0; i < t; i++) {68 this.ctx.fillRect(Math.random() * cell, Math.random() * 30, 1, 1);69 }70 this.ctx.fill();71 this.ctx.restore();72 }73 onRaf({ playhead, time }) {74 this.draw(playhead, time);75 }76}77// init78const canvas = new Canvas({79 id: '__canvas'80});81for (let y = 0; y < height; y += cell) {82 for (let x = 0; x < width; x += cell) {83 const i = y * width / cell + x / cell;84 new Fur({85 ctx: canvas.ctx,86 x: x,87 y: y,...
LottieAnimatedTimer.jsx
Source:LottieAnimatedTimer.jsx
1import Lottie from 'lottie-web';2import EkoUIComponents from 'EkoUIComponents';3// Configure Lottie. You need to do this only once. Read more here:4// https://developer.helloeko.com/docs/howto/svgs_and_lottie.html#Using-Lottie-Elements5Lottie.setLocationHref(window.location.href);6export default class LottieAnimatedTimer extends EkoUIComponents.EkoButton{7 componentDidMount(){8 // generate a new Lottie instance with the animation path passed in the props9 this.animation = Lottie.loadAnimation({10 container: this.containerRef.current,11 renderer: 'svg',12 loop: false,13 autoplay: false,14 animationData: this.props.lottieData,15 });16 this.isActive = true;17 this.onRAF = this.onRAF.bind(this);18 this.onRAF();19 }20 componentWillUnmount(){21 this.isActive = false;22 // release resources23 this.animation.destroy();24 }25 onRAF(){26 if (this.isActive) {27 let decisionProgress = player.decision.get(player.currentNodeId).progress;28 let frameNum = Math.round(decisionProgress * this.animation.totalFrames);29 this.animation.goToAndStop(frameNum, true);30 window.requestAnimationFrame(this.onRAF);31 }32 }33 getContent(){34 return null;35 }...
animation.js
Source:animation.js
1'use strict';2var EventEmitter = require('event-emitter');3module.exports = Animation;4function Animation () {5 this.frame = 0;6 EventEmitter.call(this);7}8EventEmitter(Animation.prototype);9Animation.prototype.start = function () {10 if (!this.raf) {11 var onRaf = function (t) {12 this.emit('frame', t, this.frame++)13 this.raf = requestAnimationFrame(onRaf);14 }.bind(this);15 this.raf = requestAnimationFrame(onRaf);16 }17 return this;18};19Animation.prototype.stop = function () {20 if (this.raf) {21 cancelAnimationFrame(this.raf);22 this.raf = null;23 }24 return this;...
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.screenshot({path: 'example.png'});6 await browser.close();7})();8const puppeteer = require('puppeteer');9(async () => {10 const browser = await puppeteer.launch();11 const page = await browser.newPage();12 await page.screenshot({path: 'example.png'});13 await browser.close();14})();15const puppeteer = require('puppeteer');16(async () => {17 const browser = await puppeteer.launch();18 const page = await browser.newPage();19 await page.screenshot({path: 'example.png'});20 await browser.close();21})();22const puppeteer = require('puppeteer');23(async () => {24 const browser = await puppeteer.launch();25 const page = await browser.newPage();26 await page.screenshot({path: 'example.png'});27 await browser.close();28})();29const puppeteer = require('puppeteer');30(async () => {31 const browser = await puppeteer.launch();32 const page = await browser.newPage();33 await page.screenshot({path: 'example.png'});34 await browser.close();35})();36const puppeteer = require('puppeteer');37(async () => {38 const browser = await puppeteer.launch();39 const page = await browser.newPage();40 await page.screenshot({path: 'example.png'});41 await browser.close();42})();43const puppeteer = require('puppeteer');44(async () => {45 const browser = await puppeteer.launch();
Using AI Code Generation
1const puppeteer = require('puppeteer');2const path = require('path');3(async () => {4 const browser = await puppeteer.launch();5 const page = await browser.newPage();6 await page.goto(`file:${path.join(__dirname, 'index.html')}`);7 await page.on('console', msg => console.log('PAGE LOG:', msg.text()));8 await page.evaluate(() => {9 window.requestAnimationFrame(() => {10 console.log('I was called');11 });12 });13 await browser.close();14})();15 window.requestAnimationFrame(() => {16 console.log('I was called');17 });18const puppeteer = require('puppeteer');19const path = require('path');20(async () => {21 const browser = await puppeteer.launch();22 const page = await browser.newPage();23 await page.goto(`file:${path.join(__dirname, 'index.html')}`);24 await page.on('console', msg => console.log('PAGE LOG:', msg.text()));25 await page.evaluate(() => {26 window.requestAnimationFrame(() => {27 console.log('I was called');28 });29 });30 await browser.close();31})();32 window.requestAnimationFrame(() => {33 console.log('I was called');34 });35const puppeteer = require('puppeteer');36const path = require('path');37(async () => {38 const browser = await puppeteer.launch();
Using AI Code Generation
1const puppeteer = require('puppeteer');2const fs = require('fs');3const path = require('path');4const { promisify } = require('util');5const writeFile = promisify(fs.writeFile);6const readFile = promisify(fs.readFile);7(async () => {8 const browser = await puppeteer.launch();9 const page = await browser.newPage();10 const dimensions = await page.evaluate(() => {11 return {12 };13 });14 console.log('Dimensions:', dimensions);15 await page.screenshot({path: 'example.png'});16 await browser.close();17})();18const puppeteer = require('puppeteer');19const fs = require('fs');20const path = require('path');21const { promisify } = require('util');22const writeFile = promisify(fs.writeFile);23const readFile = promisify(fs.readFile);24(async () => {25 const browser = await puppeteer.launch();26 const page = await browser.newPage();27 const dimensions = await page.evaluate(() => {28 return {29 };30 });31 console.log('Dimensions:', dimensions);32 await page.screenshot({path: 'example.png'});33 await browser.close();34})();
Using AI Code Generation
1const puppeteer = require('puppeteer');2const fs = require('fs');3const path = require('path');4const outputDir = path.join(__dirname, 'output');5(async () => {6 const browser = await puppeteer.launch();7 const page = await browser.newPage();8 await page.setViewport({ width: 1920, height: 1080 });9 await page.goto(url);10 await page.evaluate(async () => {11 await new Promise((resolve) => {12 requestAnimationFrame(resolve);13 });14 });15 await page.screenshot({ path: `${outputDir}/screenshot.png` });16 await browser.close();17})();18const puppeteer = require('puppeteer');19const fs = require('fs');20const path = require('path');21const outputDir = path.join(__dirname, 'output');22(async () => {23 const browser = await puppeteer.launch();24 const page = await browser.newPage();25 await page.setViewport({ width: 1920, height: 1080 });26 await page.goto(url);27 await page.evaluate(async () => {28 await new Promise((resolve) => {29 requestAnimationFrame(resolve);30 });31 });32 await page.screenshot({ path: `${outputDir}/screenshot.png` });33 await browser.close();34})();35const puppeteer = require('puppeteer');36const fs = require('fs');37const path = require('path');38const outputDir = path.join(__dirname, 'output');39(async () => {40 const browser = await puppeteer.launch();41 const page = await browser.newPage();42 await page.setViewport({ width: 1920, height: 1080 });43 await page.goto(url);44 await page.evaluate(async () => {45 await new Promise((resolve) => {46 requestAnimationFrame(resolve);47 });48 });49 await page.screenshot({ path: `${outputDir}/screenshot.png` });50 await browser.close();51})();52const puppeteer = require('puppeteer');53const fs = require('fs');54const path = require('path');
Using AI Code Generation
1const puppeteer = require('puppeteer');2const path = require('path');3const fs = require('fs');4(async () => {5 const browser = await puppeteer.launch({headless: false});6 const page = await browser.newPage();7 await page.setViewport({ width: 1920, height: 1080});8 await page.screenshot({path: 'full.png', fullPage: true});9 await page.evaluate(async () => {10 await new Promise((resolve, reject) => {11 var totalHeight = 0;12 var distance = 100;13 var timer = setInterval(() => {14 var scrollHeight = document.body.scrollHeight;15 window.scrollBy(0, distance);16 totalHeight += distance;17 if(totalHeight >= scrollHeight){18 clearInterval(timer);19 resolve();20 }21 }, 100);22 });23 });24 await page.screenshot({path: 'scroll.png', fullPage: true});25 await browser.close();26})();
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({6 });7 await page.on('response', response => {8 if (response.ok()) {9 const request = response.request();10 const timeInterval = response._request._timing.responseEnd - request._timing.requestTime;11 const timeTaken = response._request._timing.responseEnd - response._request._timing.requestTime;12 console.log('Time Interval: ' + timeInterval + 'ms');13 console.log('Time Taken: ' + timeTaken + 'ms');14 }15 });16 await browser.close();17})();18run();
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.
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Get 100 minutes of automation test minutes FREE!!