How to use lazy method in Playwright Internal

Best JavaScript code snippet using playwright-internal

lazysizes-intersection.js

Source:lazysizes-intersection.js Github

copy

Full Screen

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;...

Full Screen

Full Screen

MaterialUIComponentsRoutes.js

Source:MaterialUIComponentsRoutes.js Github

copy

Full Screen

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 />,...

Full Screen

Full Screen

lazy.js

Source:lazy.js Github

copy

Full Screen

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 },...

Full Screen

Full Screen

ls.optimumx.js

Source:ls.optimumx.js Github

copy

Full Screen

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 });...

Full Screen

Full Screen

routes.js

Source:routes.js Github

copy

Full Screen

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 },...

Full Screen

Full Screen

lazyload.js

Source:lazyload.js Github

copy

Full Screen

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 }...

Full Screen

Full Screen

_libs.js

Source:_libs.js Github

copy

Full Screen

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 }...

Full Screen

Full Screen

lazy-load-graphs.js

Source:lazy-load-graphs.js Github

copy

Full Screen

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 }...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

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})();

Full Screen

Using AI Code Generation

copy

Full Screen

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})();

Full Screen

Using AI Code Generation

copy

Full Screen

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"]', '

Full Screen

Using AI Code Generation

copy

Full Screen

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})();

Full Screen

Using AI Code Generation

copy

Full Screen

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');

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Using AI Code Generation

copy

Full Screen

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('

Full Screen

Using AI Code Generation

copy

Full Screen

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})();

Full Screen

Using AI Code Generation

copy

Full Screen

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

Full Screen

Using AI Code Generation

copy

Full Screen

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})();

Full Screen

Using AI Code Generation

copy

Full Screen

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();

Full Screen

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:

  1. 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.
  2. 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.
  3. 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.
  4. 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.
  5. Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
  6. 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.
  7. 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.
  8. 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.
  9. 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.
  10. 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.
  11. 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.
  12. 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!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful