Unlock 30% off on Manual Testing Annual Plans this Holiday Season. 
Use Code: LCMYEARENDEXCL30
Use Code: LCMYEARENDEXCL30Check icon
Copied to Clipboard!
How to use lazy method in Playwright Internal
Best JavaScript code snippet using playwright-internal
lazysizes-intersection.js
Source:lazysizes-intersection.js 
1(function(window, factory) {2 if(typeof module == 'object' && module.exports){3 module.exports = lazySizes;4 } else {5 window.lazySizes = factory(window, window.document);6 }7}(window, function l(window, document) {8 'use strict';9 /*jshint eqnull:true */10 if(!window.IntersectionObserver || !document.getElementsByClassName || !window.MutationObserver){return;}11 var lazysizes, lazySizesCfg;12 var docElem = document.documentElement;13 var Date = window.Date;14 var supportPicture = window.HTMLPictureElement;15 var _addEventListener = 'addEventListener';16 var _getAttribute = 'getAttribute';17 var addEventListener = window[_addEventListener];18 var setTimeout = window.setTimeout;19 var requestAnimationFrame = window.requestAnimationFrame || setTimeout;20 var requestIdleCallback = window.requestIdleCallback || setTimeout;21 var regPicture = /^picture$/i;22 var loadEvents = ['load', 'error', 'lazyincluded', '_lazyloaded'];23 var forEach = Array.prototype.forEach;24 var hasClass = function(ele, cls) {25 return ele.classList.contains(cls);26 };27 var addClass = function(ele, cls) {28 ele.classList.add(cls);29 };30 var removeClass = function(ele, cls) {31 ele.classList.remove(cls);32 };33 var addRemoveLoadEvents = function(dom, fn, add){34 var action = add ? _addEventListener : 'removeEventListener';35 if(add){36 addRemoveLoadEvents(dom, fn);37 }38 loadEvents.forEach(function(evt){39 dom[action](evt, fn);40 });41 };42 var triggerEvent = function(elem, name, detail, noBubbles, noCancelable){43 var event = document.createEvent('CustomEvent');44 if(!detail){45 detail = {};46 }47 detail.instance = lazysizes;48 event.initCustomEvent(name, !noBubbles, !noCancelable, detail);49 elem.dispatchEvent(event);50 return event;51 };52 var updatePolyfill = function (el, full){53 var polyfill;54 if( !supportPicture && ( polyfill = (window.picturefill || lazySizesCfg.pf) ) ){55 polyfill({reevaluate: true, elements: [el]});56 } else if(full && full.src){57 el.src = full.src;58 }59 };60 var getWidth = function(elem, parent, width){61 width = width || elem.offsetWidth;62 while(width < lazySizesCfg.minSize && parent && !elem._lazysizesWidth){63 width = parent.offsetWidth;64 parent = parent.parentNode;65 }66 return width;67 };68 var rAF = (function(){69 var running, waiting;70 var fns = [];71 var run = function(){72 var fn;73 running = true;74 waiting = false;75 while(fns.length){76 fn = fns.shift();77 fn[0].apply(fn[1], fn[2]);78 }79 running = false;80 };81 return function(fn){82 if(running){83 fn.apply(this, arguments);84 } else {85 fns.push([fn, this, arguments]);86 if(!waiting){87 waiting = true;88 (document.hidden ? setTimeout : requestAnimationFrame)(run);89 }90 }91 };92 })();93 var rAFIt = function(fn, simple){94 return simple ?95 function() {96 rAF(fn);97 } :98 function(){99 var that = this;100 var args = arguments;101 rAF(function(){102 fn.apply(that, args);103 });104 }105 ;106 };107 //based on http://modernjavascript.blogspot.de/2013/08/building-better-debounce.html108 var debounce = function(func) {109 var timeout, timestamp;110 var wait = 99;111 var run = function(){112 timeout = null;113 func();114 };115 var later = function() {116 var last = Date.now() - timestamp;117 if (last < wait) {118 setTimeout(later, wait - last);119 } else {120 (requestIdleCallback || run)(run);121 }122 };123 return function() {124 timestamp = Date.now();125 if (!timeout) {126 timeout = setTimeout(later, wait);127 }128 };129 };130 var loader = (function(){131 var inviewObserver, preloadObserver;132 var lazyloadElems, isCompleted, resetPreloadingTimer, started;133 var regImg = /^img$/i;134 var regIframe = /^iframe$/i;135 var supportScroll = ('onscroll' in window) && !(/glebot/.test(navigator.userAgent));136 var isLoading = 0;137 var isPreloadLoading = 0;138 var resetPreloading = function(e){139 isLoading--;140 if(isPreloadLoading){141 isPreloadLoading--;142 }143 if(e && e.target){144 addRemoveLoadEvents(e.target, resetPreloading);145 }146 if(!e || isLoading < 0 || !e.target){147 isLoading = 0;148 isPreloadLoading = 0;149 }150 if(lazyQuedElements.length && (isLoading - isPreloadLoading) < 1 && isLoading < 3){151 setTimeout(function(){152 while(lazyQuedElements.length && (isLoading - isPreloadLoading) < 1 && isLoading < 4){153 lazyUnveilElement({target: lazyQuedElements.shift()});154 }155 });156 }157 };158 var switchLoadingClass = function(e){159 addClass(e.target, lazySizesCfg.loadedClass);160 removeClass(e.target, lazySizesCfg.loadingClass);161 addRemoveLoadEvents(e.target, rafSwitchLoadingClass);162 };163 var rafedSwitchLoadingClass = rAFIt(switchLoadingClass);164 var rafSwitchLoadingClass = function(e){165 rafedSwitchLoadingClass({target: e.target});166 };167 var changeIframeSrc = function(elem, src){168 try {169 elem.contentWindow.location.replace(src);170 } catch(e){171 elem.src = src;172 }173 };174 var handleSources = function(source){175 var customMedia;176 var sourceSrcset = source[_getAttribute](lazySizesCfg.srcsetAttr);177 if( (customMedia = lazySizesCfg.customMedia[source[_getAttribute]('data-media') || source[_getAttribute]('media')]) ){178 source.setAttribute('media', customMedia);179 }180 if(sourceSrcset){181 source.setAttribute('srcset', sourceSrcset);182 }183 };184 var lazyUnveil = rAFIt(function (elem, detail, isAuto, sizes, isImg){185 var src, srcset, parent, isPicture, event, firesLoad;186 if(!(event = triggerEvent(elem, 'lazybeforeunveil', detail)).defaultPrevented){187 if(sizes){188 if(isAuto){189 addClass(elem, lazySizesCfg.autosizesClass);190 } else {191 elem.setAttribute('sizes', sizes);192 }193 }194 srcset = elem[_getAttribute](lazySizesCfg.srcsetAttr);195 src = elem[_getAttribute](lazySizesCfg.srcAttr);196 if(isImg) {197 parent = elem.parentNode;198 isPicture = parent && regPicture.test(parent.nodeName || '');199 }200 firesLoad = detail.firesLoad || (('src' in elem) && (srcset || src || isPicture));201 event = {target: elem};202 if(firesLoad){203 addRemoveLoadEvents(elem, resetPreloading, true);204 clearTimeout(resetPreloadingTimer);205 resetPreloadingTimer = setTimeout(resetPreloading, 2500);206 addClass(elem, lazySizesCfg.loadingClass);207 addRemoveLoadEvents(elem, rafSwitchLoadingClass, true);208 }209 if(isPicture){210 forEach.call(parent.getElementsByTagName('source'), handleSources);211 }212 if(srcset){213 elem.setAttribute('srcset', srcset);214 } else if(src && !isPicture){215 if(regIframe.test(elem.nodeName)){216 changeIframeSrc(elem, src);217 } else {218 elem.src = src;219 }220 }221 if(srcset || isPicture){222 updatePolyfill(elem, {src: src});223 }224 }225 rAF(function(){226 if(elem._lazyRace){227 delete elem._lazyRace;228 }229 removeClass(elem, lazySizesCfg.lazyWaitClass);230 if( !firesLoad || elem.complete ){231 if(firesLoad){232 resetPreloading(event);233 } else {234 isLoading--;235 }236 switchLoadingClass(event);237 }238 });239 });240 var unveilElement = function (elem){241 var detail, index;242 var isImg = regImg.test(elem.nodeName);243 //allow using sizes="auto", but don't use. it's invalid. Use data-sizes="auto" or a valid value for sizes instead (i.e.: sizes="80vw")244 var sizes = isImg && (elem[_getAttribute](lazySizesCfg.sizesAttr) || elem[_getAttribute]('sizes'));245 var isAuto = sizes == 'auto';246 if( (isAuto || !isCompleted) && isImg && (elem.src || elem.srcset) && !elem.complete && !hasClass(elem, lazySizesCfg.errorClass)){return;}247 detail = triggerEvent(elem, 'lazyunveilread').detail;248 if(isAuto){249 autoSizer.updateElem(elem, true, elem.offsetWidth);250 }251 isLoading++;252 if((index = lazyQuedElements.indexOf(elem)) != -1){253 lazyQuedElements.splice(index, 1);254 }255 inviewObserver.unobserve(elem);256 preloadObserver.unobserve(elem);257 lazyUnveil(elem, detail, isAuto, sizes, isImg);258 };259 var unveilElements = function(change){260 var i, len;261 for(i = 0, len = change.length; i < len; i++){262 if (change[i].isIntersecting === false) {263 continue;264 }265 unveilElement(change[i].target);266 }267 };268 var lazyQuedElements = [];269 var lazyUnveilElement = function(change){270 var index, i, len, element;271 for(i = 0, len = change.length; i < len; i++){272 element = change[i].target;273 if((isLoading - isPreloadLoading) < 1 && isLoading < 4){274 isPreloadLoading++;275 unveilElement(element);276 } else if((index = lazyQuedElements.indexOf(element)) == -1){277 lazyQuedElements.push(element);278 } else {279 lazyQuedElements.splice(index, 1);280 }281 }282 };283 var removeLazyClassElements = [];284 var removeLazyClass = rAFIt(function(){285 var element;286 while(removeLazyClassElements.length){287 element = removeLazyClassElements.shift();288 addClass(element, lazySizesCfg.lazyWaitClass);289 removeClass(element, lazySizesCfg.lazyClass);290 if(element._lazyAdd){291 delete element._lazyAdd;292 }293 }294 }, true);295 var addElements = function(){296 var i, len, runLazyRemove;297 for(i = 0, len = lazyloadElems.length; i < len; i++){298 if(!lazyloadElems[i]._lazyAdd){299 lazyloadElems[i]._lazyAdd = true;300 inviewObserver.observe(lazyloadElems[i]);301 preloadObserver.observe(lazyloadElems[i]);302 removeLazyClassElements.push(lazyloadElems[i]);303 runLazyRemove = true;304 if(!supportScroll){305 unveilElement(lazyloadElems[i]);306 }307 }308 }309 if(runLazyRemove){310 removeLazyClass();311 }312 };313 return {314 _: function(){315 started = Date.now();316 lazyloadElems = document.getElementsByClassName(lazySizesCfg.lazyClass);317 inviewObserver = new IntersectionObserver(unveilElements);318 preloadObserver = new IntersectionObserver(lazyUnveilElement, {319 rootMargin: lazySizesCfg.expand + 'px ' + (lazySizesCfg.expand * lazySizesCfg.hFac) + 'px',320 });321 new MutationObserver( addElements ).observe( docElem, {childList: true, subtree: true, attributes: true} );322 addElements();323 },324 unveil: unveilElement325 };326 })();327 var autoSizer = (function(){328 var autosizesElems;329 var sizeElement = rAFIt(function(elem, parent, event, width){330 var sources, i, len;331 elem._lazysizesWidth = width;332 width += 'px';333 elem.setAttribute('sizes', width);334 if(regPicture.test(parent.nodeName || '')){335 sources = parent.getElementsByTagName('source');336 for(i = 0, len = sources.length; i < len; i++){337 sources[i].setAttribute('sizes', width);338 }339 }340 if(!event.detail.dataAttr){341 updatePolyfill(elem, event.detail);342 }343 });344 var getSizeElement = function (elem, dataAttr, width){345 var event;346 var parent = elem.parentNode;347 if(parent){348 width = getWidth(elem, parent, width);349 event = triggerEvent(elem, 'lazybeforesizes', {width: width, dataAttr: !!dataAttr});350 if(!event.defaultPrevented){351 width = event.detail.width;352 if(width && width !== elem._lazysizesWidth){353 sizeElement(elem, parent, event, width);354 }355 }356 }357 };358 var updateElementsSizes = function(){359 var i;360 var len = autosizesElems.length;361 if(len){362 i = 0;363 for(; i < len; i++){364 getSizeElement(autosizesElems[i]);365 }366 }367 };368 var debouncedUpdateElementsSizes = debounce(updateElementsSizes);369 return {370 _: function(){371 autosizesElems = document.getElementsByClassName(lazySizesCfg.autosizesClass);372 addEventListener('resize', debouncedUpdateElementsSizes);373 },374 checkElems: debouncedUpdateElementsSizes,375 updateElem: getSizeElement376 };377 })();378 var init = function(){379 if(!init.i){380 init.i = true;381 autoSizer._();382 loader._();383 }384 };385 (function(){386 var prop;387 var lazySizesDefaults = {388 lazyClass: 'lazyload',389 lazyWaitClass: 'lazyloadwait',390 loadedClass: 'lazyloaded',391 loadingClass: 'lazyloading',392 preloadClass: 'lazypreload',393 errorClass: 'lazyerror',394 //strictClass: 'lazystrict',395 autosizesClass: 'lazyautosizes',396 srcAttr: 'data-src',397 srcsetAttr: 'data-srcset',398 sizesAttr: 'data-sizes',399 minSize: 40,400 customMedia: {},401 init: true,402 hFac: 0.8,403 loadMode: 2,404 expand: 400,405 };406 lazySizesCfg = window.lazySizesConfig || window.lazysizesConfig || {};407 for(prop in lazySizesDefaults){408 if(!(prop in lazySizesCfg)){409 lazySizesCfg[prop] = lazySizesDefaults[prop];410 }411 }412 setTimeout(function(){413 if(lazySizesCfg.init){414 init();415 }416 });417 })();418 lazysizes = {419 cfg: lazySizesCfg,420 autoSizer: autoSizer,421 loader: loader,422 init: init,423 uP: updatePolyfill,424 aC: addClass,425 rC: removeClass,426 hC: hasClass,427 fire: triggerEvent,428 gW: getWidth,429 rAF: rAF,430 };431 return lazysizes;...
MaterialUIComponentsRoutes.js
Source:MaterialUIComponentsRoutes.js
1import { lazy } from 'react';2const Accordion = lazy(() =>3 import('app/main/documentation/material-ui-components/pages/Accordion')4);5const Alert = lazy(() => import('app/main/documentation/material-ui-components/pages/Alert'));6const AppBar = lazy(() => import('app/main/documentation/material-ui-components/pages/AppBar'));7const Autocomplete = lazy(() =>8 import('app/main/documentation/material-ui-components/pages/Autocomplete')9);10const Avatars = lazy(() => import('app/main/documentation/material-ui-components/pages/Avatars'));11const Backdrop = lazy(() => import('app/main/documentation/material-ui-components/pages/Backdrop'));12const Badges = lazy(() => import('app/main/documentation/material-ui-components/pages/Badges'));13const BottomNavigation = lazy(() =>14 import('app/main/documentation/material-ui-components/pages/BottomNavigation')15);16const Box = lazy(() => import('app/main/documentation/material-ui-components/pages/Box'));17const Breadcrumbs = lazy(() =>18 import('app/main/documentation/material-ui-components/pages/Breadcrumbs')19);20const ButtonGroup = lazy(() =>21 import('app/main/documentation/material-ui-components/pages/ButtonGroup')22);23const Buttons = lazy(() => import('app/main/documentation/material-ui-components/pages/Buttons'));24const Cards = lazy(() => import('app/main/documentation/material-ui-components/pages/Cards'));25const Checkboxes = lazy(() =>26 import('app/main/documentation/material-ui-components/pages/Checkboxes')27);28const Chips = lazy(() => import('app/main/documentation/material-ui-components/pages/Chips'));29const ClickAwayListener = lazy(() =>30 import('app/main/documentation/material-ui-components/pages/ClickAwayListener')31);32const Container = lazy(() =>33 import('app/main/documentation/material-ui-components/pages/Container')34);35const CssBaseline = lazy(() =>36 import('app/main/documentation/material-ui-components/pages/CssBaseline')37);38const DatePicker = lazy(() =>39 import('app/main/documentation/material-ui-components/pages/DatePicker')40);41const DateRangePicker = lazy(() =>42 import('app/main/documentation/material-ui-components/pages/DateRangePicker')43);44const DateTimePicker = lazy(() =>45 import('app/main/documentation/material-ui-components/pages/DateTimePicker')46);47const Dialogs = lazy(() => import('app/main/documentation/material-ui-components/pages/Dialogs'));48const Dividers = lazy(() => import('app/main/documentation/material-ui-components/pages/Dividers'));49const Drawers = lazy(() => import('app/main/documentation/material-ui-components/pages/Drawers'));50const FloatingActionButton = lazy(() =>51 import('app/main/documentation/material-ui-components/pages/FloatingActionButton')52);53const Grid = lazy(() => import('app/main/documentation/material-ui-components/pages/Grid'));54const ImageList = lazy(() =>55 import('app/main/documentation/material-ui-components/pages/ImageList')56);57const Links = lazy(() => import('app/main/documentation/material-ui-components/pages/Links'));58const Lists = lazy(() => import('app/main/documentation/material-ui-components/pages/Lists'));59const Masonry = lazy(() => import('app/main/documentation/material-ui-components/pages/Masonry'));60const Menus = lazy(() => import('app/main/documentation/material-ui-components/pages/Menus'));61const Modal = lazy(() => import('app/main/documentation/material-ui-components/pages/Modal'));62const NoSsr = lazy(() => import('app/main/documentation/material-ui-components/pages/NoSsr'));63const Pagination = lazy(() =>64 import('app/main/documentation/material-ui-components/pages/Pagination')65);66const Paper = lazy(() => import('app/main/documentation/material-ui-components/pages/Paper'));67const Pickers = lazy(() => import('app/main/documentation/material-ui-components/pages/Pickers'));68const Popover = lazy(() => import('app/main/documentation/material-ui-components/pages/Popover'));69const Popper = lazy(() => import('app/main/documentation/material-ui-components/pages/Popper'));70const Portal = lazy(() => import('app/main/documentation/material-ui-components/pages/Portal'));71const Progress = lazy(() => import('app/main/documentation/material-ui-components/pages/Progress'));72const RadioButtons = lazy(() =>73 import('app/main/documentation/material-ui-components/pages/RadioButtons')74);75const Rating = lazy(() => import('app/main/documentation/material-ui-components/pages/Rating'));76const Selects = lazy(() => import('app/main/documentation/material-ui-components/pages/Selects'));77const Skeleton = lazy(() => import('app/main/documentation/material-ui-components/pages/Skeleton'));78const Slider = lazy(() => import('app/main/documentation/material-ui-components/pages/Slider'));79const Snackbars = lazy(() =>80 import('app/main/documentation/material-ui-components/pages/Snackbars')81);82const SpeedDial = lazy(() =>83 import('app/main/documentation/material-ui-components/pages/SpeedDial')84);85const Stack = lazy(() => import('app/main/documentation/material-ui-components/pages/Stack'));86const Steppers = lazy(() => import('app/main/documentation/material-ui-components/pages/Steppers'));87const Switches = lazy(() => import('app/main/documentation/material-ui-components/pages/Switches'));88const Tables = lazy(() => import('app/main/documentation/material-ui-components/pages/Tables'));89const Tabs = lazy(() => import('app/main/documentation/material-ui-components/pages/Tabs'));90const TextFields = lazy(() =>91 import('app/main/documentation/material-ui-components/pages/TextFields')92);93const TextareaAutosize = lazy(() =>94 import('app/main/documentation/material-ui-components/pages/TextareaAutosize')95);96const TimePicker = lazy(() =>97 import('app/main/documentation/material-ui-components/pages/TimePicker')98);99const Timeline = lazy(() => import('app/main/documentation/material-ui-components/pages/Timeline'));100const ToggleButton = lazy(() =>101 import('app/main/documentation/material-ui-components/pages/ToggleButton')102);103const Tooltips = lazy(() => import('app/main/documentation/material-ui-components/pages/Tooltips'));104const TransferList = lazy(() =>105 import('app/main/documentation/material-ui-components/pages/TransferList')106);107const Transitions = lazy(() =>108 import('app/main/documentation/material-ui-components/pages/Transitions')109);110const TrapFocus = lazy(() =>111 import('app/main/documentation/material-ui-components/pages/TrapFocus')112);113const TreeView = lazy(() => import('app/main/documentation/material-ui-components/pages/TreeView'));114const Typography = lazy(() =>115 import('app/main/documentation/material-ui-components/pages/Typography')116);117const MaterialUIComponentsRoutes = [118 {119 path: 'material-ui-components/accordion',120 element: <Accordion />,121 },122 {123 path: 'material-ui-components/alert',124 element: <Alert />,125 },126 {127 path: 'material-ui-components/app-bar',128 element: <AppBar />,...
lazy.js
Source:lazy.js
1import $ from '../../utils/dom';2import Utils from '../../utils/utils';3const Lazy = {4 loadInSlide(index, loadInDuplicate = true) {5 const swiper = this;6 const params = swiper.params.lazy;7 if (typeof index === 'undefined') return;8 if (swiper.slides.length === 0) return;9 const isVirtual = swiper.virtual && swiper.params.virtual.enabled;10 const $slideEl = isVirtual11 ? swiper.$wrapperEl.children(`.${swiper.params.slideClass}[data-swiper-slide-index="${index}"]`)12 : swiper.slides.eq(index);13 let $images = $slideEl.find(`.${params.elementClass}:not(.${params.loadedClass}):not(.${params.loadingClass})`);14 if ($slideEl.hasClass(params.elementClass) && !$slideEl.hasClass(params.loadedClass) && !$slideEl.hasClass(params.loadingClass)) {15 $images = $images.add($slideEl[0]);16 }17 if ($images.length === 0) return;18 $images.each((imageIndex, imageEl) => {19 const $imageEl = $(imageEl);20 $imageEl.addClass(params.loadingClass);21 const background = $imageEl.attr('data-background');22 const src = $imageEl.attr('data-src');23 const srcset = $imageEl.attr('data-srcset');24 const sizes = $imageEl.attr('data-sizes');25 swiper.loadImage($imageEl[0], (src || background), srcset, sizes, false, () => {26 if (typeof swiper === 'undefined' || swiper === null || !swiper || (swiper && !swiper.params) || swiper.destroyed) return;27 if (background) {28 $imageEl.css('background-image', `url("${background}")`);29 $imageEl.removeAttr('data-background');30 } else {31 if (srcset) {32 $imageEl.attr('srcset', srcset);33 $imageEl.removeAttr('data-srcset');34 }35 if (sizes) {36 $imageEl.attr('sizes', sizes);37 $imageEl.removeAttr('data-sizes');38 }39 if (src) {40 $imageEl.attr('src', src);41 $imageEl.removeAttr('data-src');42 }43 }44 $imageEl.addClass(params.loadedClass).removeClass(params.loadingClass);45 $slideEl.find(`.${params.preloaderClass}`).remove();46 if (swiper.params.loop && loadInDuplicate) {47 const slideOriginalIndex = $slideEl.attr('data-swiper-slide-index');48 if ($slideEl.hasClass(swiper.params.slideDuplicateClass)) {49 const originalSlide = swiper.$wrapperEl.children(`[data-swiper-slide-index="${slideOriginalIndex}"]:not(.${swiper.params.slideDuplicateClass})`);50 swiper.lazy.loadInSlide(originalSlide.index(), false);51 } else {52 const duplicatedSlide = swiper.$wrapperEl.children(`.${swiper.params.slideDuplicateClass}[data-swiper-slide-index="${slideOriginalIndex}"]`);53 swiper.lazy.loadInSlide(duplicatedSlide.index(), false);54 }55 }56 swiper.emit('lazyImageReady', $slideEl[0], $imageEl[0]);57 });58 swiper.emit('lazyImageLoad', $slideEl[0], $imageEl[0]);59 });60 },61 load() {62 const swiper = this;63 const {64 $wrapperEl, params: swiperParams, slides, activeIndex,65 } = swiper;66 const isVirtual = swiper.virtual && swiperParams.virtual.enabled;67 const params = swiperParams.lazy;68 let slidesPerView = swiperParams.slidesPerView;69 if (slidesPerView === 'auto') {70 slidesPerView = 0;71 }72 function slideExist(index) {73 if (isVirtual) {74 if ($wrapperEl.children(`.${swiperParams.slideClass}[data-swiper-slide-index="${index}"]`).length) {75 return true;76 }77 } else if (slides[index]) return true;78 return false;79 }80 function slideIndex(slideEl) {81 if (isVirtual) {82 return $(slideEl).attr('data-swiper-slide-index');83 }84 return $(slideEl).index();85 }86 if (!swiper.lazy.initialImageLoaded) swiper.lazy.initialImageLoaded = true;87 if (swiper.params.watchSlidesVisibility) {88 $wrapperEl.children(`.${swiperParams.slideVisibleClass}`).each((elIndex, slideEl) => {89 const index = isVirtual ? $(slideEl).attr('data-swiper-slide-index') : $(slideEl).index();90 swiper.lazy.loadInSlide(index);91 });92 } else if (slidesPerView > 1) {93 for (let i = activeIndex; i < activeIndex + slidesPerView; i += 1) {94 if (slideExist(i)) swiper.lazy.loadInSlide(i);95 }96 } else {97 swiper.lazy.loadInSlide(activeIndex);98 }99 if (params.loadPrevNext) {100 if (slidesPerView > 1 || (params.loadPrevNextAmount && params.loadPrevNextAmount > 1)) {101 const amount = params.loadPrevNextAmount;102 const spv = slidesPerView;103 const maxIndex = Math.min(activeIndex + spv + Math.max(amount, spv), slides.length);104 const minIndex = Math.max(activeIndex - Math.max(spv, amount), 0);105 // Next Slides106 for (let i = activeIndex + slidesPerView; i < maxIndex; i += 1) {107 if (slideExist(i)) swiper.lazy.loadInSlide(i);108 }109 // Prev Slides110 for (let i = minIndex; i < activeIndex; i += 1) {111 if (slideExist(i)) swiper.lazy.loadInSlide(i);112 }113 } else {114 const nextSlide = $wrapperEl.children(`.${swiperParams.slideNextClass}`);115 if (nextSlide.length > 0) swiper.lazy.loadInSlide(slideIndex(nextSlide));116 const prevSlide = $wrapperEl.children(`.${swiperParams.slidePrevClass}`);117 if (prevSlide.length > 0) swiper.lazy.loadInSlide(slideIndex(prevSlide));118 }119 }120 },121};122export default {123 name: 'lazy',124 params: {125 lazy: {126 enabled: false,127 loadPrevNext: false,128 loadPrevNextAmount: 1,129 loadOnTransitionStart: false,130 elementClass: 'swiper-lazy',131 loadingClass: 'swiper-lazy-loading',132 loadedClass: 'swiper-lazy-loaded',133 preloaderClass: 'swiper-lazy-preloader',134 },135 },136 create() {137 const swiper = this;138 Utils.extend(swiper, {139 lazy: {140 initialImageLoaded: false,141 load: Lazy.load.bind(swiper),142 loadInSlide: Lazy.loadInSlide.bind(swiper),143 },144 });145 },146 on: {147 beforeInit() {148 const swiper = this;149 if (swiper.params.lazy.enabled && swiper.params.preloadImages) {150 swiper.params.preloadImages = false;151 }152 },153 init() {154 const swiper = this;155 if (swiper.params.lazy.enabled && !swiper.params.loop && swiper.params.initialSlide === 0) {156 swiper.lazy.load();157 }158 },159 scroll() {160 const swiper = this;161 if (swiper.params.freeMode && !swiper.params.freeModeSticky) {162 swiper.lazy.load();163 }164 },165 resize() {166 const swiper = this;167 if (swiper.params.lazy.enabled) {168 swiper.lazy.load();169 }170 },171 scrollbarDragMove() {172 const swiper = this;173 if (swiper.params.lazy.enabled) {174 swiper.lazy.load();175 }176 },177 transitionStart() {178 const swiper = this;179 if (swiper.params.lazy.enabled) {180 if (swiper.params.lazy.loadOnTransitionStart || (!swiper.params.lazy.loadOnTransitionStart && !swiper.lazy.initialImageLoaded)) {181 swiper.lazy.load();182 }183 }184 },185 transitionEnd() {186 const swiper = this;187 if (swiper.params.lazy.enabled && !swiper.params.lazy.loadOnTransitionStart) {188 swiper.lazy.load();189 }190 },191 slideChange() {192 const swiper = this;193 if (swiper.params.lazy.enabled && swiper.params.cssMode) {194 swiper.lazy.load();195 }196 },197 },...
ls.optimumx.js
Source:ls.optimumx.js
1(function(window, factory) {2 if(!window) {return;}3 var globalInstall = function(){4 factory(window.lazySizes);5 window.removeEventListener('lazyunveilread', globalInstall, true);6 };7 factory = factory.bind(null, window, window.document);8 if(typeof module == 'object' && module.exports){9 factory(require('lazysizes'));10 } else if(window.lazySizes) {11 globalInstall();12 } else {13 window.addEventListener('lazyunveilread', globalInstall, true);14 }15}(typeof window != 'undefined' ?16 window : 0, function(window, document, lazySizes) {17 /*jshint eqnull:true */18 'use strict';19 if(!window.addEventListener){return;}20 var config;21 var regPicture = /^picture$/i;22 var docElem = document.documentElement;23 var parseWsrcset = (function(){24 var candidates;25 var reg = /(([^,\s].[^\s]+)\s+(\d+)(w|h)(\s+(\d+)(w|h))?)/g;26 var addCandidate = function(match, candidate, url, descNumber1, descType1, fullDesc, descNumber2, descType2){27 candidates.push({28 c: candidate,29 u: url,30 w: (descType2 == 'w' ? descNumber2 : descNumber1) * 131 });32 };33 return function(input){34 candidates = [];35 input.replace(reg, addCandidate);36 return candidates;37 };38 })();39 var parseImg = (function(){40 var ascendingSort = function ( a, b ) {41 return a.w - b.w;42 };43 var parseSets = function (elem, dataName){44 var lazyData = {srcset: elem.getAttribute(lazySizes.cfg.srcsetAttr) || ''};45 var cands = parseWsrcset(lazyData.srcset);46 Object.defineProperty(elem, dataName, {47 value: lazyData,48 writable: true49 });50 lazyData.cands = cands;51 lazyData.index = 0;52 lazyData.dirty = false;53 if(cands[0] && cands[0].w){54 cands.sort( ascendingSort );55 lazyData.cSrcset = [cands[ lazyData.index ].c];56 } else {57 lazyData.cSrcset = lazyData.srcset ? [lazyData.srcset] : [];58 lazyData.cands = [];59 }60 return lazyData;61 };62 return function parseImg(elem, dataName){63 var sources, i, len, parent;64 if(!elem[dataName]){65 parent = elem.parentNode || {};66 elem[dataName] = parseSets(elem, dataName);67 elem[dataName].isImg = true;68 if(regPicture.test(parent.nodeName || '')){69 elem[dataName].picture = true;70 sources = parent.getElementsByTagName('source');71 for(i = 0, len = sources.length; i < len; i++){72 parseSets(sources[i], dataName).isImg = false;73 }74 }75 }76 return elem[dataName];77 };78 })();79 var constraintFns = {80 _lazyOptimumx: (function(){81 var takeHighRes = function (lowerCandidate, higherCandidateResolution, optimumx){82 var low, bonusFactor, substract;83 if(!lowerCandidate || !lowerCandidate.d){84 return true;85 }86 substract = optimumx > 0.7 ? 0.6 : 0.4;87 if(lowerCandidate.d >= optimumx){return false;}88 bonusFactor = Math.pow(lowerCandidate.d - substract, 1.6) || 0.1;89 if(bonusFactor < 0.1){90 bonusFactor = 0.1;91 } else if(bonusFactor > 3){92 bonusFactor = 3;93 }94 low = lowerCandidate.d + ((higherCandidateResolution - optimumx) * bonusFactor);95 return low < optimumx;96 };97 return function (data, width, optimumx){98 var i, can;99 for(i = 0; i < data.cands.length; i++){100 can = data.cands[i];101 can.d = (can.w || 1) / width;102 if(data.index >= i){continue;}103 if(can.d <= optimumx || takeHighRes(data.cands[i - 1], can.d, optimumx)){104 data.cSrcset.push(can.c);105 data.index = i;106 } else {107 break;108 }109 }110 };111 })()112 };113 var constrainSets = (function(){114 var constrainSet = function(elem, displayWidth, optimumx, attr, dataName){115 var curIndex;116 var lazyData = elem[dataName];117 if(!lazyData){return;}118 curIndex = lazyData.index;119 constraintFns[dataName](lazyData, displayWidth, optimumx);120 if(!lazyData.dirty || curIndex != lazyData.index){121 lazyData.cSrcset.join(', ');122 elem.setAttribute(attr, lazyData.cSrcset.join(', '));123 lazyData.dirty = true;124 }125 };126 return function(image, displayWidth, optimumx, attr, dataName){127 var sources, parent, len, i;128 var lazyData = image[dataName];129 lazyData.width = displayWidth;130 if(lazyData.picture && (parent = image.parentNode)){131 sources = parent.getElementsByTagName('source');132 for(i = 0, len = sources.length; i < len; i++){133 constrainSet(sources[i], displayWidth, optimumx, attr, dataName);134 }135 }136 constrainSet(image, displayWidth, optimumx, attr, dataName);137 };138 })();139 var getOptimumX = function(element){140 var optimumx = element.getAttribute('data-optimumx') || element.getAttribute('data-maxdpr');141 if(!optimumx && config.constrainPixelDensity){142 optimumx = 'auto';143 }144 if(optimumx){145 if(optimumx == 'auto'){146 optimumx = config.getOptimumX(element);147 } else {148 optimumx = parseFloat(optimumx, 10);149 }150 }151 return optimumx;152 };153 var extentLazySizes = function(){154 if(lazySizes && !lazySizes.getOptimumX){155 lazySizes.getX = getOptimumX;156 lazySizes.pWS = parseWsrcset;157 docElem.removeEventListener('lazybeforeunveil', extentLazySizes);158 }159 };160 docElem.addEventListener('lazybeforeunveil', extentLazySizes);161 setTimeout(extentLazySizes);162 config = lazySizes && lazySizes.cfg;163 if(typeof config.getOptimumX != 'function'){164 config.getOptimumX = function(/*element*/){165 var dpr = window.devicePixelRatio || 1;166 if(dpr > 2.6){167 dpr *= 0.6; // returns 1.8 for 3168 } else if(dpr > 1.9){169 dpr *= 0.8; // returns 1.6 for 2170 } else {171 dpr -= 0.01; // returns 0.99 for 1172 }173 return Math.min(Math.round(dpr * 100) / 100, 2);174 };175 }176 if(!window.devicePixelRatio){return;}177 addEventListener('lazybeforesizes', function(e){178 if(e.detail.instance != lazySizes){return;}179 var optimumx, lazyData, width, attr;180 var elem = e.target;181 var detail = e.detail;182 var dataAttr = detail.dataAttr;183 if(e.defaultPrevented ||184 !(optimumx = getOptimumX(elem)) ||185 optimumx >= devicePixelRatio){return;}186 if(dataAttr && elem._lazyOptimumx && !detail.reloaded && (!config.unloadedClass || !lazySizes.hC(elem, config.unloadedClass))){187 elem._lazyOptimumx = null;188 }189 lazyData = parseImg(elem, '_lazyOptimumx');190 width = detail.width;191 if(width && (lazyData.width || 0) < width){192 attr = dataAttr ? lazySizes.cfg.srcsetAttr : 'srcset';193 lazySizes.rAF(function(){194 constrainSets(elem, width, optimumx, attr, '_lazyOptimumx');195 });196 }197 });...
routes.js
Source:routes.js
1import React from 'react';2const Breadcrumbs = React.lazy(() => import('./views/Base/Breadcrumbs'));3const Cards = React.lazy(() => import('./views/Base/Cards'));4const Carousels = React.lazy(() => import('./views/Base/Carousels'));5const Collapses = React.lazy(() => import('./views/Base/Collapses'));6const Dropdowns = React.lazy(() => import('./views/Base/Dropdowns'));7const Forms = React.lazy(() => import('./views/Base/Forms'));8const Jumbotrons = React.lazy(() => import('./views/Base/Jumbotrons'));9const ListGroups = React.lazy(() => import('./views/Base/ListGroups'));10const Navbars = React.lazy(() => import('./views/Base/Navbars'));11const Navs = React.lazy(() => import('./views/Base/Navs'));12const Paginations = React.lazy(() => import('./views/Base/Paginations'));13const Popovers = React.lazy(() => import('./views/Base/Popovers'));14const ProgressBar = React.lazy(() => import('./views/Base/ProgressBar'));15const Switches = React.lazy(() => import('./views/Base/Switches'));16const Tables = React.lazy(() => import('./views/Base/Tables'));17const Tabs = React.lazy(() => import('./views/Base/Tabs'));18const Tooltips = React.lazy(() => import('./views/Base/Tooltips'));19const BrandButtons = React.lazy(() => import('./views/Buttons/BrandButtons'));20const ButtonDropdowns = React.lazy(() => import('./views/Buttons/ButtonDropdowns'));21const ButtonGroups = React.lazy(() => import('./views/Buttons/ButtonGroups'));22const Buttons = React.lazy(() => import('./views/Buttons/Buttons'));23const Charts = React.lazy(() => import('./views/Charts'));24const Dashboard = React.lazy(() => import('./views/Dashboard'));25const CoreUIIcons = React.lazy(() => import('./views/Icons/CoreUIIcons'));26const Flags = React.lazy(() => import('./views/Icons/Flags'));27const FontAwesome = React.lazy(() => import('./views/Icons/FontAwesome'));28const SimpleLineIcons = React.lazy(() => import('./views/Icons/SimpleLineIcons'));29const Alerts = React.lazy(() => import('./views/Notifications/Alerts'));30const Badges = React.lazy(() => import('./views/Notifications/Badges'));31const Modals = React.lazy(() => import('./views/Notifications/Modals'));32const StockChart = React.lazy(() => import('./views/Theme/StockChart'));33const Typography = React.lazy(() => import('./views/Theme/Typography'));34const Widgets = React.lazy(() => import('./views/Widgets/Widgets'));35const Users = React.lazy(() => import('./views/Users/Users'));36const User = React.lazy(() => import('./views/Users/User'));37// https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config38const routes = [39 { path: '/', exact: true, name: 'Home' },40 { path: '/dashboard', name: 'Dashboard', component: Dashboard },41 { path: '/theme', exact: true, name: 'Theme', component: StockChart },42 { path: '/theme/stockchart', name: 'Stock Chart', component: StockChart },43 { path: '/theme/typography', name: 'Typography', component: Typography },44 { path: '/base', exact: true, name: 'Base', component: Cards },45 { path: '/base/cards', name: 'Cards', component: Cards },46 { path: '/base/forms', name: 'Forms', component: Forms },47 { path: '/base/switches', name: 'Switches', component: Switches },48 { path: '/base/tables', name: 'Tables', component: Tables },49 { path: '/base/tabs', name: 'Tabs', component: Tabs },50 { path: '/base/breadcrumbs', name: 'Breadcrumbs', component: Breadcrumbs },...
lazyload.js
Source:lazyload.js
1/**2 * Lazy-load script for anything with a 'native-lazyload-js-fallback' class.3 *4 * @link https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/5 *6 * Copyright 2019 Google LLC7 *8 * Licensed under the Apache License, Version 2.0 (the "License");9 * you may not use this file except in compliance with the License.10 * You may obtain a copy of the License at11 *12 * https://www.apache.org/licenses/LICENSE-2.013 *14 * Unless required by applicable law or agreed to in writing, software15 * distributed under the License is distributed on an "AS IS" BASIS,16 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.17 * See the License for the specific language governing permissions and18 * limitations under the License.19 */20( function() {21 let lazyElements = [].slice.call( document.querySelectorAll( '.native-lazyload-js-fallback' ) );22 if ( 'IntersectionObserver' in window ) {23 const lazyObserver = new IntersectionObserver( function( entries ) {24 entries.forEach( function( entry ) {25 if ( entry.isIntersecting ) {26 const lazyElement = entry.target;27 if ( ! lazyElement.dataset.src && ! lazyElement.dataset.srcset ) {28 lazyObserver.unobserve( lazyElement );29 return;30 }31 lazyElement.src = lazyElement.dataset.src;32 delete lazyElement.dataset.src;33 if ( lazyElement.dataset.srcset ) {34 lazyElement.srcset = lazyElement.dataset.srcset;35 delete lazyElement.dataset.srcset;36 }37 if ( lazyElement.dataset.sizes ) {38 lazyElement.sizes = lazyElement.dataset.sizes;39 delete lazyElement.dataset.sizes;40 }41 lazyElement.classList.remove( 'native-lazyload-js-fallback' );42 lazyObserver.unobserve( lazyElement );43 }44 } );45 } );46 lazyElements.forEach( function( lazyElement ) {47 lazyObserver.observe( lazyElement );48 } );49 } else {50 // For older browsers lacking IntersectionObserver support.51 let active = false;52 const lazyLoad = function() {53 if ( false === active ) {54 active = true;55 setTimeout( function() {56 lazyElements.forEach( function( lazyElement ) {57 if ( ( lazyElement.getBoundingClientRect().top <= window.innerHeight && 0 <= lazyElement.getBoundingClientRect().bottom ) && 'none' !== getComputedStyle( lazyElement ).display ) {58 if ( lazyElement.dataset.src || lazyElement.dataset.srcset ) {59 lazyElement.src = lazyElement.dataset.src;60 delete lazyElement.dataset.src;61 if ( lazyElement.dataset.srcset ) {62 lazyElement.srcset = lazyElement.dataset.srcset;63 delete lazyElement.dataset.srcset;64 }65 if ( lazyElement.dataset.sizes ) {66 lazyElement.sizes = lazyElement.dataset.sizes;67 delete lazyElement.dataset.sizes;68 }69 lazyElement.classList.remove( 'native-lazyload-js-fallback' );70 }71 lazyElements = lazyElements.filter( function( element ) {72 return element !== lazyElement;73 } );74 if ( 0 === lazyElements.length ) {75 document.removeEventListener( 'scroll', lazyLoad );76 window.removeEventListener( 'resize', lazyLoad );77 window.removeEventListener( 'orientationchange', lazyLoad );78 }79 }80 } );81 active = false;82 }, 200 );83 }84 };85 document.addEventListener( 'scroll', lazyLoad );86 window.addEventListener( 'resize', lazyLoad );87 window.addEventListener( 'orientationchange', lazyLoad );88 }...
_libs.js
Source:_libs.js
1// Lazy loading img & background images using intersection observer2// Reference: https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/3// Using example: <img class="lazy" src="thumb.gif" data-src="real-img.jpg" data-srcset="real-img@1x.jpg 1x, real-img@2x.jpg 2x">4// Background image class usign example: <div class="lazy-background"> with added class ".visible" for styling5// Background image style attribute lazy loading example: <div data-bg="image.jpg">6// delete window.IntersectionObserver; // Fallback Testing7document.addEventListener('DOMContentLoaded', function() {8 var lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));9 var lazyBackgrounds = [].slice.call(document.querySelectorAll('.lazy-background'));10 var lazyBackgroundsData = [].slice.call(document.querySelectorAll('[data-bg]'));11 if ('IntersectionObserver' in window) {12 let lazyImageObserver = new IntersectionObserver(function(entries, observer) {13 entries.forEach(function(entry) {14 if (entry.isIntersecting) {15 let lazyImage = entry.target;16 lazyImage.src = lazyImage.dataset.src;17 lazyImage.srcset = lazyImage.dataset.srcset;18 lazyImage.classList.remove('lazy');19 lazyImageObserver.unobserve(lazyImage);20 }21 });22 });23 lazyImages.forEach(function(lazyImage) {24 lazyImageObserver.observe(lazyImage);25 });26 let lazyBackgroundObserver = new IntersectionObserver(function(entries, observer) {27 entries.forEach(function(entry) {28 if (entry.isIntersecting) {29 entry.target.classList.add('visible');30 lazyBackgroundObserver.unobserve(entry.target);31 }32 });33 });34 lazyBackgrounds.forEach(function(lazyBackground) {35 lazyBackgroundObserver.observe(lazyBackground);36 });37 let lazyBackgroundDataObserver = new IntersectionObserver(function(entries, observer) {38 entries.forEach(function(entry) {39 if (entry.isIntersecting) {40 let lazyBackgroundData = entry.target;41 lazyBackgroundData.style.backgroundImage = 'url(' + lazyBackgroundData.dataset.bg + ')';42 lazyBackgroundDataObserver.unobserve(lazyBackgroundData);43 }44 });45 });46 lazyBackgroundsData.forEach(function(lazyBackgroundData) {47 lazyBackgroundDataObserver.observe(lazyBackgroundData);48 });49 } else {50 // Fallback51 lazyImages.forEach(function(lazyImage) {52 lazyImage.src = lazyImage.dataset.src;53 lazyImage.srcset = lazyImage.dataset.srcset;54 });55 lazyBackgrounds.forEach(function(lazyBackground) {56 lazyBackground.classList.add('visible');57 });58 lazyBackgroundsData.forEach(function(lazyBackgroundData) {59 lazyBackgroundData.style.backgroundImage = 'url(' + lazyBackgroundData.dataset.bg + ')';60 });61 }...
lazy-load-graphs.js
Source:lazy-load-graphs.js
1document.addEventListener('DOMContentLoaded', function() {2 var lazyGraphs = [].slice.call(document.querySelectorAll('[lazy]'));3 var active = false;4 var lazyLoad = function() {5 if (active === false) {6 active = true;7 setTimeout(function() {8 lazyGraphs.forEach(function(lazyGraph) {9 if (10 lazyGraph.getBoundingClientRect().top <= window.innerHeight &&11 lazyGraph.getBoundingClientRect().bottom >= 0 &&12 getComputedStyle(lazyGraph).display !== 'none'13 ) {14 lazyGraph.data = lazyGraph.getAttribute('lazy');15 lazyGraph.removeAttribute('lazy');16 lazyGraphs = lazyGraphs.filter(function(image) { return image !== lazyGraph});17 if (lazyGraphs.length === 0) {18 document.removeEventListener('scroll', lazyLoad);19 window.removeEventListener('resize', lazyLoad);20 window.removeEventListener('orientationchange', lazyLoad);21 }22 }23 });24 active = false;25 }, 200);26 }27 };28 // initial load29 lazyLoad();30 var container = document.querySelector('.container-fluid.modules');31 if (container) {32 container.addEventListener('scroll', lazyLoad);33 window.addEventListener('resize', lazyLoad);34 window.addEventListener('orientationchange', lazyLoad);35 }...
Using AI Code Generation
1const { chromium } = require('playwright-internal');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await browser.close();7})();8const { chromium } = require('playwright');9(async () => {10 const browser = await chromium.launch();11 const context = await browser.newContext();12 const page = await context.newPage();13 await browser.close();14})();15const { chromium } = require('playwright');16(async () => {17 const browser = await chromium.launch();18 const context = await browser.newContext();19 const page = await context.newPage();20 await browser.close();21})();22const { chromium } = require('playwright');23(async () => {24 const browser = await chromium.launch();25 const context = await browser.newContext();26 const page = await context.newPage();27 await browser.close();28})();29const { chromium } = require('playwright');30(async () => {31 const browser = await chromium.launch();32 const context = await browser.newContext();33 const page = await context.newPage();34 await browser.close();35})();36const { chromium } = require('playwright');37(async () => {38 const browser = await chromium.launch();39 const context = await browser.newContext();40 const page = await context.newPage();41 await browser.close();42})();43const { chromium } = require('playwright');44(async () => {45 const browser = await chromium.launch();46 const context = await browser.newContext();47 const page = await context.newPage();48 await browser.close();49})();
Using AI Code Generation
1const { chromium } = require('playwright-internal');2(async () => {3 const browser = await chromium.launch();4 const context = await browser.newContext();5 const page = await context.newPage();6 await browser.close();7})();8const { chromium } = require('playwright');9(async () => {10 const browser = await chromium.launch();11 const context = await browser.newContext();12 const page = await context.newPage();13 await browser.close();14})();15const { chromium } = require('playwright');16(async () => {17 const browser = await chromium.launch();18 const context = await browser.newContext();19 const page = await context.newPage();20 await browser.close();21})();22const { chromium } = require('playwright');23(async () => {24 const browser = await chromium.launch();25 const context = await browser.newContext();26 const page = await context.newPage();27 await browser.close();28})();29const { chromium } = require('playwright');30(async () => {31 const browser = await chromium.launch();32 const context = await browser.newContext();33 const page = await context.newPage();34 await browser.close();35})();36const { chromium } = require('playwright');37(async () => {38 const browser = await chromium.launch();39 const context = await browser.newContext();40 const page = await context.newPage();41 await browser.close();42})();43const { chromium } = require('playwright');44(async () => {45 const browser = await chromium.launch();46 const context = await browser.newContext();47 const page = await context.newPage();48 await browser.close();49})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({ headless: false });4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.click('text="Sign in"');7 await page.fill('input[name="identifier"]', '
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.screenshot({ path: `example.png` });7 await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11 const browser = await chromium.launch();12 const context = await browser.newContext();13 const page = await context.newPage();14 await page.screenshot({ path: `example.png` });15 await browser.close();16})();17const { chromium } = require('playwright');18(async () => {19 const browser = await chromium.launch();20 const context = await browser.newContext();21 const page = await context.newPage();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 context = await browser.newContext();29 const page = await context.newPage();30 await page.screenshot({ path: `example.png` });31 await browser.close();32})();33const { chromium } = require('playwright');34(async () => {35 const browser = await chromium.launch();36 const context = await browser.newContext();37 const page = await context.newPage();38 await page.screenshot({ path: `example.png` });39 await browser.close();40})();41const { chromium } = require('playwright');42(async () => {43 const browser = await chromium.launch();44 const context = await browser.newContext();45 const page = await context.newPage();46 await page.screenshot({ path: `example.png` });47 await browser.close();48})();
Using AI Code Generation
1const {chromium} = require('playwright-chromium');2(async () => {3 const browser = await chromium.launch(-chromium);4 const context = await browser.newContext();5 const page = await context.newPage();();6 const context = await browser.newContext);7 const page = await context.newPage();8 await page.click('input[name="q"]');9 await page.fill('input[name="q"]', 'playwright');10 await page.click('text=Playwright');11 await context.close();12 await browser.close();13})();14const { chromium } = require('playwright-chromium');15 const browser = awaitchromium.launc();16 const context = await browser.newContext();17 const page = await context.nwPge();18 await page.click('input[name="q"]');19 await page.fill('input[name="q"]', 'playwright');20 await page.click('text=Playwright');21 await context.cos();22 await brower.cloe();23})();24const { chromium } = require('playwright-chromium');25(async () => {26 const browser = awit chromium.aunch();27 const context = await brower.nwContext();28 const page = await context.newPage();29 await page.click('input[name="q"]');30 await page.fill('input[name="q"]', 'playwright');31 await page.click('text=Playwright');
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({ headless: false4 await page.screenshot({ path: 'example.png' });5 await browser.close();6})();7const {chromium} = require('playwright-chromium');8(async () => {9 const browser = await chromium.launch();10 const context = await browser.newContext();11 const page = await context.newPage();12 await page.screenshot({ path: 'example.png' });13 await browser.close();14})();15const {chromium} = require('playwright-chromium');16(async () => {17 const browser = await chromium.launch();18 const context = await browser.newContext();19 const page = await context.newPage();20 await page.screenshot({ path: 'example.png' });21 await browser.close();22})();23const {chromium} = require('playwright-chromium');24(async () => {25 const browser = await chromium.launch();26 const context = await browser.newContext();27 const page = await context.newPage();28 await page.screenshot({ path: 'example.png' });29 await browser.close();30})();31const {chromium} = require('playwright-chromium');32(async () => {33 const browser = await chromium.launch();34 const context = await browser.newContext();35 const page = await context.newPage();36 await page.screenshot({ path: 'example.png' });37 await browser.close();38})();39const {chromium} = require('playwright-chromium');40(async () => {ternal41const { chromium } = require('play
Using AI Code Generation
1 const browser } = require('playwright');2const {=lazy await chromiplaywright/lib/locator');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 const lazyLocator = lazy(() => uage.$('text="Learn more"'));7 console.log(await m.zlLocator.evaluate((node) => node.textContent));8 console.log(await lazyLocator.evaluate((node) => node.textContent));9 await browser.close();10})();aunch();11 const context = await browser.newContext();12 const page = await context.newPage();13 await page.goto('
Using AI Code Generation
1const { chromium } = require('playwright-internal');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 await page.screenshot({ path: 'example.png' });6 await browser.close();7})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch({ headless: false, slowMo: 500 });4 const context = await browser.newContext();5 const page = await context.newPage();6 await page.screenshot({ path: `example.png` });7 await browser.close();8})();9const { chromium } = require('playwright');10(async () => {11 const browser = await chromium.launch({ headless: false, slowMo: 500 });12 const context = await browser.newContext();13 const page = await context.newPage();14 await page.screenshot({ path: `example.png` });15 await browser.close();16})();17const { chromium } = require('playwright');18(async () => {19 const browser = await chromium.launch({ headless: false, slowMo: 500 });20 const context = await browser.newContext();21 const page = await context.newPage();22 await page.screenshot({ path: `example.png` });23 await browser.close();24})();25const { chromium } = require('playwright');26(async () => {27 const browser = await chromium.launch({ headless: false, slowMo: 500 });28 const context = await browser.newContext();29 const page = await context.newPage();30 await page.screenshot({ path: `example.png` });31 await browser.close();32})();33const { chromium } = require('playwright');34(async () => {35 const browser = await chromium.launch({ headless: false, slowMo: 500 });36 const context = await browser.newContext();37 const page = await context.newPage();38 await page.screenshot({ path: `example.png` });39 await browser.close();40})();41const { chromium } = require('play
Using AI Code Generation
1const { chromium } = require('playwright');2const { lazy } = require('playwright/lib/locator');3(async () => {4 const browser = await chromium.launch();5 const page = await browser.newPage();6 const lazyLocator = lazy(() => page.$('text="Learn more"'));7 console.log(await lazyLocator.evaluate((node) => node.textContent));8 console.log(await lazyLocator.evaluate((node) => node.textContent));9 await browser.close();10})();
Using AI Code Generation
1const playwright = require('playwright');2const context = playwright.webkitBrowserContext();3const browser = await context.newBrowser();4const page = await browser.newPage();5const title = await page.title();6console.log(title);7await browser.close();
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?
