How to use useRef method in Playwright Internal
Best JavaScript code snippet using playwright-internal
Hardware.js
Source:Hardware.js 
...20 }, [history]);21 const contentOfPage = [22 {23 vendor: "intel",24 dRefs: useRef(null),25 offer: "Procesory // Dyski SSD // PÅyty gÅówne // Serwery",26 www:27 "https://www.intel.pl/content/www/pl/pl/products/docs/processors/core/10th-gen-processors.html",28 w3desc: "Strona producenta",29 img: "intel",30 },31 {32 vendor: "amd",33 dRefs: useRef(null),34 offer: "Procesory // Karty graficzne",35 www: "https://www.amd.com/pl/partner",36 w3desc: "Strona producenta",37 img: "amd",38 },39 {40 vendor: "nvidia",41 dRefs: useRef(null),42 offer: "Karty graficzne",43 www: "https://www.nvidia.com/pl-pl/",44 w3desc: "Strona producenta",45 img: "nvidia",46 },47 {48 vendor: "asus",49 dRefs: useRef(null),50 offer: "PÅyty gÅówne // Karty graficzne // Notebooki",51 www: "https://www.asus.com/pl/",52 w3desc: "Strona producenta",53 img: "asus",54 },55 {56 vendor: "gigabyte",57 dRefs: useRef(null),58 offer: "PÅyty gÅówne // Karty graficzne // Notebooki",59 www: "http://www.gigabyte.pl/",60 w3desc: "Strona producenta",61 img: "gigabyte",62 },63 {64 vendor: "msi",65 dRefs: useRef(null),66 offer: "PÅyty gÅówne // Karty graficzne // Notebooki",67 www: "https://pl.msi.com/",68 w3desc: "Strona producenta",69 img: "msi",70 },71 {72 vendor: "chieftec",73 dRefs: useRef(null),74 offer: "Obudowy // Zasilacze // Akcesoria",75 www: "https://www.chieftec.eu/pl/",76 w3desc: "Strona producenta",77 img: "chieftec",78 },79 {80 vendor: "cooler master",81 dRefs: useRef(null),82 offer: "Obudowy // Zasilacze // Wentylatory",83 www: "https://www.coolermaster.com/",84 w3desc: "Strona producenta",85 img: "coolerMaster",86 },87 {88 vendor: "bitfenix",89 dRefs: useRef(null),90 offer: "Obudowy // Zasilacze // Akcesoria",91 www: "https://www.bitfenix.com/",92 w3desc: "Strona producenta",93 img: "bitfenix",94 },95 {96 vendor: "zalman",97 dRefs: useRef(null),98 offer: "Obudowy // Zasilacze // Akcesoria",99 www: "https://www.zalman.com/eu/index.html?langGubun=en",100 w3desc: "Strona producenta",101 img: "zalman",102 },103 {104 vendor: "thermaltake",105 dRefs: useRef(null),106 offer: "Obudowy // Zasilacze // Wentylatory",107 www: "https://pl.thermaltake.com/",108 w3desc: "Strona producenta",109 img: "thermal",110 },111 {112 vendor: "antec",113 dRefs: useRef(null),114 offer: "Obudowy // Zasilacze // Wentylatory",115 www: "https://www.antec.com/",116 w3desc: "Strona producenta",117 img: "antec",118 },119 {120 vendor: "bequiet",121 dRefs: useRef(null),122 offer: "Obudowy // Zasilacze // Wentylatory",123 www: "https://www.bequiet.com/pl",124 w3desc: "Strona producenta",125 img: "bequiet",126 },127 {128 vendor: "corsair",129 dRefs: useRef(null),130 offer: "Myszki // Klawiatury // Wentylatory",131 www: "https://www.bequiet.com/pl",132 w3desc: "Strona producenta",133 img: "corsair",134 },135 {136 vendor: "razer",137 dRefs: useRef(null),138 offer: "Akcesoria",139 www: "https://www.razer.com/hk-en",140 w3desc: "Strona producenta",141 img: "razer",142 },143 {144 vendor: "scythe",145 dRefs: useRef(null),146 offer: "Obudowy // Zasilacze // Wentylatory",147 www: "http://www.scythe-eu.com/en",148 w3desc: "Strona producenta",149 img: "scythe",150 },151 {152 vendor: "noctua",153 dRefs: useRef(null),154 offer: "Wentylatory",155 www: "https://noctua.at/en/products/fan",156 w3desc: "Strona producenta",157 img: "noctua",158 },159 {160 vendor: "patriot",161 dRefs: useRef(null),162 offer: "PamiÄci // Dyski SSD // USB Flash",163 www: "https://info.patriotmemory.com/",164 w3desc: "Strona producenta",165 img: "patriot",166 },167 {168 vendor: "crucial",169 dRefs: useRef(null),170 offer: "PamiÄci // Dyski SSD",171 www: "https://www.crucial.com/",172 w3desc: "Strona producenta",173 img: "crucial",174 },175 {176 vendor: "kingston",177 dRefs: useRef(null),178 offer: "PamiÄci // Dyski SSD // USB Flash",179 www: "https://www.kingston.com/pl",180 w3desc: "Strona producenta",181 img: "kingston",182 },183 {184 vendor: "netgear",185 dRefs: useRef(null),186 offer: "UrzÄ
dzenia sieciowe",187 www: "https://www.netgear.pl/default.aspx",188 w3desc: "Strona producenta",189 img: "netgear",190 },191 {192 vendor: "tp-link",193 dRefs: useRef(null),194 offer: "UrzÄ
dzenia sieciowe",195 www: "https://www.tp-link.com/pl/",196 w3desc: "Strona producenta",197 img: "tplink",198 },199 {200 vendor: "eizo",201 dRefs: useRef(null),202 offer: "Monitory",203 www: "https://www.eizo.pl/",204 w3desc: "Strona producenta",205 img: "eizo",206 },207 {208 vendor: "wacom",209 dRefs: useRef(null),210 offer: "Pen computers // Pen Displays // Pen Tablets",211 www: "https://www.wacom.com/en-us",212 w3desc: "Strona producenta",213 img: "wacom",214 },215 ];216 const handleScroll = (go = false) => {217 if (go) {218 const vendorPresence = contentOfPage.map((vendor) => {219 return vendor.dRefs;220 });221 vendorPresence.forEach((animSection) => {222 let animateIn = gsap223 .timeline()...
useRef-test.internal.js
Source:useRef-test.internal.js
...38 }39 it('creates a ref object initialized with the provided value', () => {40 jest.useFakeTimers();41 function useDebouncedCallback(callback, ms, inputs) {42 const timeoutID = useRef(-1);43 useEffect(() => {44 return function unmount() {45 clearTimeout(timeoutID.current);46 };47 }, []);48 const debouncedCallback = useCallback(49 (...args) => {50 clearTimeout(timeoutID.current);51 timeoutID.current = setTimeout(callback, ms, ...args);52 },53 [callback, ms],54 );55 return useCallback(debouncedCallback, inputs);56 }57 let ping;58 function App() {59 ping = useDebouncedCallback(60 value => {61 Scheduler.unstable_yieldValue('ping: ' + value);62 },63 100,64 [],65 );66 return null;67 }68 act(() => {69 ReactNoop.render(<App />);70 });71 expect(Scheduler).toHaveYielded([]);72 ping(1);73 ping(2);74 ping(3);75 expect(Scheduler).toHaveYielded([]);76 jest.advanceTimersByTime(100);77 expect(Scheduler).toHaveYielded(['ping: 3']);78 ping(4);79 jest.advanceTimersByTime(20);80 ping(5);81 ping(6);82 jest.advanceTimersByTime(80);83 expect(Scheduler).toHaveYielded([]);84 jest.advanceTimersByTime(20);85 expect(Scheduler).toHaveYielded(['ping: 6']);86 });87 it('should return the same ref during re-renders', () => {88 function Counter() {89 const ref = useRef('val');90 const [count, setCount] = useState(0);91 const [firstRef] = useState(ref);92 if (firstRef !== ref) {93 throw new Error('should never change');94 }95 if (count < 3) {96 setCount(count + 1);97 }98 return <Text text={count} />;99 }100 ReactNoop.render(<Counter />);101 expect(Scheduler).toFlushAndYield([3]);102 ReactNoop.render(<Counter />);103 expect(Scheduler).toFlushAndYield([3]);104 });105 if (__DEV__) {106 it('should never warn when attaching to children', () => {107 class Component extends React.Component {108 render() {109 return null;110 }111 }112 function Example({phase}) {113 const hostRef = useRef();114 const classRef = useRef();115 return (116 <>117 <div key={`host-${phase}`} ref={hostRef} />118 <Component key={`class-${phase}`} ref={classRef} />119 </>120 );121 }122 act(() => {123 ReactNoop.render(<Example phase="mount" />);124 });125 act(() => {126 ReactNoop.render(<Example phase="update" />);127 });128 });129 // @gate enableUseRefAccessWarning130 it('should warn about reads during render', () => {131 function Example() {132 const ref = useRef(123);133 let value;134 expect(() => {135 value = ref.current;136 }).toWarnDev([137 'Example: Unsafe read of a mutable value during render.',138 ]);139 return value;140 }141 act(() => {142 ReactNoop.render(<Example />);143 });144 });145 it('should not warn about lazy init during render', () => {146 function Example() {147 const ref1 = useRef(null);148 const ref2 = useRef(undefined);149 // Read: safe because lazy init:150 if (ref1.current === null) {151 ref1.current = 123;152 }153 if (ref2.current === undefined) {154 ref2.current = 123;155 }156 return null;157 }158 act(() => {159 ReactNoop.render(<Example />);160 });161 // Should not warn after an update either.162 act(() => {163 ReactNoop.render(<Example />);164 });165 });166 it('should not warn about lazy init outside of render', () => {167 function Example() {168 // eslint-disable-next-line no-unused-vars169 const [didMount, setDidMount] = useState(false);170 const ref1 = useRef(null);171 const ref2 = useRef(undefined);172 useLayoutEffect(() => {173 ref1.current = 123;174 ref2.current = 123;175 setDidMount(true);176 }, []);177 return null;178 }179 act(() => {180 ReactNoop.render(<Example />);181 });182 });183 // @gate enableUseRefAccessWarning184 it('should warn about unconditional lazy init during render', () => {185 function Example() {186 const ref1 = useRef(null);187 const ref2 = useRef(undefined);188 if (shouldExpectWarning) {189 expect(() => {190 ref1.current = 123;191 }).toWarnDev([192 'Example: Unsafe write of a mutable value during render',193 ]);194 expect(() => {195 ref2.current = 123;196 }).toWarnDev([197 'Example: Unsafe write of a mutable value during render',198 ]);199 } else {200 ref1.current = 123;201 ref1.current = 123;202 }203 // But only warn once204 ref1.current = 345;205 ref1.current = 345;206 return null;207 }208 let shouldExpectWarning = true;209 act(() => {210 ReactNoop.render(<Example />);211 });212 // Should not warn again on update.213 shouldExpectWarning = false;214 act(() => {215 ReactNoop.render(<Example />);216 });217 });218 // @gate enableUseRefAccessWarning219 it('should warn about reads to ref after lazy init pattern', () => {220 function Example() {221 const ref1 = useRef(null);222 const ref2 = useRef(undefined);223 // Read 1: safe because lazy init:224 if (ref1.current === null) {225 ref1.current = 123;226 }227 if (ref2.current === undefined) {228 ref2.current = 123;229 }230 let value;231 expect(() => {232 value = ref1.current;233 }).toWarnDev(['Example: Unsafe read of a mutable value during render']);234 expect(() => {235 value = ref2.current;236 }).toWarnDev(['Example: Unsafe read of a mutable value during render']);237 // But it should only warn once.238 value = ref1.current;239 value = ref2.current;240 return value;241 }242 act(() => {243 ReactNoop.render(<Example />);244 });245 });246 // @gate enableUseRefAccessWarning247 it('should warn about writes to ref after lazy init pattern', () => {248 function Example() {249 const ref1 = useRef(null);250 const ref2 = useRef(undefined);251 // Read: safe because lazy init:252 if (ref1.current === null) {253 ref1.current = 123;254 }255 if (ref2.current === undefined) {256 ref2.current = 123;257 }258 expect(() => {259 ref1.current = 456;260 }).toWarnDev([261 'Example: Unsafe write of a mutable value during render',262 ]);263 expect(() => {264 ref2.current = 456;265 }).toWarnDev([266 'Example: Unsafe write of a mutable value during render',267 ]);268 return null;269 }270 act(() => {271 ReactNoop.render(<Example />);272 });273 });274 it('should not warn about reads or writes within effect', () => {275 function Example() {276 const ref = useRef(123);277 useLayoutEffect(() => {278 expect(ref.current).toBe(123);279 ref.current = 456;280 expect(ref.current).toBe(456);281 }, []);282 useEffect(() => {283 expect(ref.current).toBe(456);284 ref.current = 789;285 expect(ref.current).toBe(789);286 }, []);287 return null;288 }289 act(() => {290 ReactNoop.render(<Example />);291 });292 ReactNoop.flushPassiveEffects();293 });294 it('should not warn about reads or writes outside of render phase (e.g. event handler)', () => {295 let ref;296 function Example() {297 ref = useRef(123);298 return null;299 }300 act(() => {301 ReactNoop.render(<Example />);302 });303 expect(ref.current).toBe(123);304 ref.current = 456;305 expect(ref.current).toBe(456);306 });307 }...
mock-all.js
Source:mock-all.js
1/* eslint-disable */2/* global describe, it */3'use strict';4var should = require('should');5var path = require('path');6var gulp = require('gulp');7var useref = require('../index');8var through = require('through2');9describe('bulk files', function () {10 this.timeout(5000);11 it('should handle all files', function (done) {12 var gulp = require('gulp');13 var mockGulpDest = require('mock-gulp-dest')(gulp);14 var useref = require('../index');15 gulp.task('bulk', function () {16 return gulp.src('test/fixtures/bulk/useref.*.html')17 .pipe(useref())18 .pipe(gulp.dest('dest', { cwd: 'test' }));19 });20 gulp.start('bulk')21 .once('stop', function () {22 mockGulpDest.cwd().should.equal(__dirname);23 mockGulpDest.basePath().should.equal(path.join(__dirname, 'dest'));24 mockGulpDest.assertDestContains([25 'useref.01.html',26 'useref.02.html',27 'useref.03.html',28 'useref.04.html',29 'useref.05.html',30 'useref.06.html',31 'useref.07.html',32 'useref.08.html',33 'useref.09.html',34 'useref.10.html',35 'useref.11.html',36 'useref.12.html',37 'useref.13.html',38 'useref.14.html',39 'useref.15.html',40 'useref.16.html',41 'useref.17.html',42 'useref.18.html',43 'useref.19.html',44 'useref.20.html',45 'useref.21.html',46 'useref.22.html',47 'useref.23.html',48 'useref.24.html',49 'useref.25.html',50 'useref.26.html',51 'useref.27.html',52 'useref.28.html',53 'useref.29.html',54 'useref.30.html',55 'useref.31.html',56 'useref.32.html',57 'useref.33.html',58 'useref.34.html',59 'useref.35.html',60 'useref.36.html',61 'useref.37.html',62 'useref.38.html',63 'useref.39.html',64 'useref.40.html',65 'useref.41.html',66 'useref.42.html',67 'useref.43.html',68 'useref.44.html',69 'useref.45.html',70 'useref.46.html',71 'useref.47.html',72 'useref.48.html',73 'useref.49.html',74 'useref.50.html',75 'useref.51.html',76 'useref.52.html',77 'useref.53.html',78 'useref.54.html',79 'useref.55.html',80 'useref.01.min.css',81 'useref.02.min.css',82 'useref.03.min.css',83 'useref.04.min.css',84 'useref.05.min.css',85 'useref.06.min.css',86 'useref.07.min.css',87 'useref.08.min.css',88 'useref.09.min.css',89 'useref.10.min.css',90 'useref.11.min.css',91 'useref.12.min.css',92 'useref.13.min.css',93 'useref.14.min.css',94 'useref.15.min.css',95 'useref.16.min.css',96 'useref.17.min.css',97 'useref.18.min.css',98 'useref.19.min.css',99 'useref.20.min.css',100 'useref.21.min.css',101 'useref.22.min.css',102 'useref.23.min.css',103 'useref.24.min.css',104 'useref.25.min.css',105 'useref.26.min.css',106 'useref.27.min.css',107 'useref.28.min.css',108 'useref.29.min.css',109 'useref.30.min.css',110 'useref.31.min.css',111 'useref.32.min.css',112 'useref.33.min.css',113 'useref.34.min.css',114 'useref.35.min.css',115 'useref.36.min.css',116 'useref.37.min.css',117 'useref.38.min.css',118 'useref.39.min.css',119 'useref.40.min.css',120 'useref.41.min.css',121 'useref.42.min.css',122 'useref.43.min.css',123 'useref.44.min.css',124 'useref.45.min.css',125 'useref.46.min.css',126 'useref.47.min.css',127 'useref.48.min.css',128 'useref.49.min.css',129 'useref.50.min.css',130 'useref.51.min.css',131 'useref.52.min.css',132 'useref.53.min.css',133 'useref.54.min.css',134 'useref.55.min.css'135 ]);136 done();137 });138 });139 it('should handle all assets', function (done) {140 var gulp = require('gulp');141 var mockGulpDest = require('mock-gulp-dest')(gulp);142 var useref = require('../index');143 gulp.task('bulk', function () {144 return gulp.src('test/fixtures/bulk/useref.56.html')145 .pipe(useref({ noconcat: true }))146 .pipe(gulp.dest('dest', { cwd: 'test' }));147 });148 gulp.start('bulk')149 .once('stop', function () {150 mockGulpDest.cwd().should.equal(__dirname);151 mockGulpDest.basePath().should.equal(path.join(__dirname, 'dest'));152 mockGulpDest.assertDestContains([153 'useref.56.html',154 'useref.01.css',155 'useref.02.css',156 'useref.03.css',157 'useref.04.css',158 'useref.05.css',159 'useref.06.css',160 'useref.07.css',161 'useref.08.css',162 'useref.09.css',163 'useref.10.css',164 'useref.11.css',165 'useref.12.css',166 'useref.13.css',167 'useref.14.css',168 'useref.15.css',169 'useref.16.css',170 'useref.17.css',171 'useref.18.css',172 'useref.19.css',173 'useref.20.css',174 'useref.21.css',175 'useref.22.css',176 'useref.23.css',177 'useref.24.css',178 'useref.25.css',179 'useref.26.css',180 'useref.27.css',181 'useref.28.css',182 'useref.29.css',183 'useref.30.css',184 'useref.31.css',185 'useref.32.css',186 'useref.33.css',187 'useref.34.css',188 'useref.35.css',189 'useref.36.css',190 'useref.37.css',191 'useref.38.css',192 'useref.39.css',193 'useref.40.css',194 'useref.41.css',195 'useref.42.css',196 'useref.43.css',197 'useref.44.css',198 'useref.45.css',199 'useref.46.css',200 'useref.47.css',201 'useref.48.css',202 'useref.49.css',203 'useref.50.css',204 'useref.51.css',205 'useref.52.css',206 'useref.53.css',207 'useref.54.css',208 'useref.55.css',209 'useref.56.css'210 ]);211 done();212 });213 });214 it('should not end the stream prematurely', function (done) {215 var fileCount = 0;216 gulp.src('test/fixtures/04.html')217 .pipe(useref())218 .pipe(through.obj({ highWaterMark: 1 }, function (newFile, enc, callback) {219 fileCount++;220 setTimeout(callback, 750);221 }, function (cb) {222 fileCount.should.equal(5);223 done();224 cb();225 }));226 });...
Carousel.js
Source:Carousel.js
...6const width = Dimensions.get('window').width;7const Carousel = props => {8 const cardAnimations = {9 2: {10 cardAnimation: useRef(new Animated.Value(0)).current,11 cardImageAnimation: useRef(new Animated.Value(0)).current,12 cardTitleAnimation: useRef(new Animated.Value(0)).current,13 cardTextAnimation: useRef(new Animated.Value(0)).current,14 cardButtonAnimation: useRef(new Animated.Value(0)).current,15 cardTitleOpacity: useRef(new Animated.Value(0)).current,16 cardTextOpacity: useRef(new Animated.Value(0)).current,17 cardButtonOpacity: useRef(new Animated.Value(0)).current,18 },19 3: {20 cardAnimation: useRef(new Animated.Value(0)).current,21 cardImageAnimation: useRef(new Animated.Value(0)).current,22 cardTitleAnimation: useRef(new Animated.Value(0)).current,23 cardTextAnimation: useRef(new Animated.Value(0)).current,24 cardButtonAnimation: useRef(new Animated.Value(0)).current,25 cardTitleOpacity: useRef(new Animated.Value(0)).current,26 cardTextOpacity: useRef(new Animated.Value(0)).current,27 cardButtonOpacity: useRef(new Animated.Value(0)).current,28 },29 4: {30 cardAnimation: useRef(new Animated.Value(0)).current,31 cardImageAnimation: useRef(new Animated.Value(0)).current,32 cardTitleAnimation: useRef(new Animated.Value(0)).current,33 cardTextAnimation: useRef(new Animated.Value(0)).current,34 cardButtonAnimation: useRef(new Animated.Value(0)).current,35 cardTitleOpacity: useRef(new Animated.Value(0)).current,36 cardTextOpacity: useRef(new Animated.Value(0)).current,37 cardButtonOpacity: useRef(new Animated.Value(0)).current,38 },39 };40 const scrollAnimation = useRef(new Animated.Value(0)).current;41 const bulletsAnimation = useRef(new Animated.Value(0)).current;42 const [currentSlide, setCurrentSlide] = useState(1);43 const [slideBreakpoint, setSlideBreakpoint] = useState(1);44 const easing = Easing.bezier(0.85, 0, 0.15, 1);45 const gestureConfig = {46 velocityThreshold: 0.1,47 directionalOffsetThreshold: 100,48 };49 const swipeRight = () => {50 if (currentSlide > 1) {51 props.timingAnimation(scrollAnimation, -(slideBreakpoint - width), 1000, easing).start(() => {52 setSlideBreakpoint(slideBreakpoint - width);53 setCurrentSlide(currentSlide - 1);54 });55 if (currentSlide > 2) {...
Languages.js
Source:Languages.js
1import React, { useRef } from "react";2import simpleIcons from "simple-icons";3import DOMPurify from "dompurify";4const Languages = () => {5 const htmlIcon = useRef(simpleIcons.Get("html5").svg);6 const cssIcon = useRef(simpleIcons.Get("css3").svg);7 const jsIcon = useRef(simpleIcons.Get("javascript").svg);8 const phpIcon = useRef(simpleIcons.Get("php").svg);9 const webpackIcon = useRef(simpleIcons.Get("webpack").svg);10 const reactIcon = useRef(simpleIcons.Get("react").svg);11 const reactRIcon = useRef(simpleIcons.Get("reactrouter").svg);12 const firebaseIcon = useRef(simpleIcons.Get("firebase").svg);13 const herokuIcon = useRef(simpleIcons.Get("heroku").svg);14 const vscodeIcon = useRef(simpleIcons.Get("visualstudiocode").svg);15 const npmIcon = useRef(simpleIcons.Get("npm").svg);16 const yarnIcon = useRef(simpleIcons.Get("yarn").svg);17 const gitIcon = useRef(simpleIcons.Get("git").svg);18 const jasmineIcon = useRef(simpleIcons.Get("jasmine").svg);19 const jestIcon = useRef(simpleIcons.Get("jest").svg);20 const prettierIcon = useRef(simpleIcons.Get("prettier").svg);21 const eslintIcon = useRef(simpleIcons.Get("eslint").svg);22 const babelIcon = useRef(simpleIcons.Get("babel").svg);23 const nodeIcon = useRef(simpleIcons.Get("nodedotjs").svg);24 const styledIcon = useRef(simpleIcons.Get("styledcomponents").svg);25 return (26 <div className="languages interactive" id="languages">27 <div>28 <div className="sect">Languages</div>29 <div className="sectDiv">30 <div31 id="html"32 data-tip="HTML5"33 dangerouslySetInnerHTML={{34 __html: DOMPurify.sanitize(htmlIcon.current),35 }}36 alt="HTML5"37 />38 <div...
index.js
Source:index.js
...21 }22 return delta;23}24const BackgroundHomepage = ({ logged }) => {25 const requestAnimationId = useRef(undefined)26 const ww = useRef(0)27 const wh = useRef(0)28 const cx = useRef(0)29 const cy = useRef(0)30 const tx = useRef(0)31 const ty = useRef(0)32 const x = useRef(0)33 const y = useRef(0)34 const deltaX = useRef(0)35 const deltaY = useRef(0)36 const background2 = useRef(null)37 const cloud = useRef(null)38 const city = useRef(null)39 const background = useRef(null)40 const backgroundMask1 = useRef(null)41 const backgroundMask2 = useRef(null)42 const foreground = useRef(null)43 const shadowWoman = useRef(null)44 const shadowMan = useRef(null)45 const man = useRef(null)46 const woman = useRef(null)47 const UpdateSvg = () => {48 if(background2.current) {49 background2.current.style.transform = `translate3d(${deltaX.current/70}px,${deltaY.current/80}px,0)`50 cloud.current.style.transform = `translate3d(${-deltaX.current/50}px,${-deltaY.current/70}px,0)`51 city.current.style.transform = `translate3d(${deltaX.current/40}px,${deltaY.current/70}px,0)`52 background.current.style.transform = `translate3d(${deltaX.current/30}px,${deltaY.current/80}px,0)`53 backgroundMask1.current.style.transform = `translate3d(${deltaX.current/30}px,${deltaY.current/80}px,0)`54 backgroundMask2.current.style.transform = `translate3d(${deltaX.current/30}px,${deltaY.current/80}px,0)`55 foreground.current.style.transform = `translate3d(${deltaX.current/8}px,${deltaY.current/20}px,0)`56 man.current.style.transform = `translate3d(${deltaX.current/19}px,${deltaY.current/80}px,0)`57 shadowMan.current.style.transform = `translate3d(${deltaX.current/22}px,${deltaY.current/50}px,0)`58 woman.current.style.transform = `translate3d(${deltaX.current/12}px,${-deltaY.current/80}px,0)`59 shadowWoman.current.style.transform = `translate3d(${deltaX.current/18}px,${deltaY.current/50}px,0)`60 }...
gulpfile.js
Source:gulpfile.js
1//å è½½gulp模å2var gulp = require('gulp');3//å è½½browser-sync模å4var browserSync = require('browser-sync').create();5var reload = browserSync.reload;6var useref = require('gulp-useref');7var uglify = require('gulp-uglify'); //å缩js代ç 8var minifyCSS = require('gulp-minify-css'); //å缩css代ç 9var htmlmin = require('gulp-htmlmin'); //å缩css代ç 10/**11 * è¿ééææå¡å¨ + çå¬ scss/pug/js æ件12 */13gulp.task('server', function() {14 browserSync.init({15 server: './', //è¿éæçæ¯æ ¹ç®å½ï¼å¦æä½ çindex.htmlå¨æ ¹ç®å½ä¸ï¼ä¼ç´æ¥æå¼index页é¢ï¼ä¸ç¶ä¼æ¾ç¤ºGet Notï¼èªå·±åè·¯å¾å°±è¡16 port: 8080 //é»è®¤æå¼localhost:3000,ç°å¨æ¹ælocalhost:808117 });18 gulp.watch('./assets/js/*.js').on('change', reload);19 gulp.watch('./assets/css/*.css').on('change', reload);20 gulp.watch('./view/*.html').on('change', reload);21 gulp.watch('./view/home/*.html').on('change', reload);22});23/**24 * å并æ件25 * @view/index.html26 */27gulp.task('useref-index', function() {28 return gulp29 .src('view/index.html')30 .pipe(useref())31 .pipe(gulp.dest('dist'));32});33/**34 * å并æ件35 * @view/home/home.html36 */37gulp.task('useref-home', function() {38 return gulp39 .src('view/home/home.html')40 .pipe(useref())41 .pipe(gulp.dest('dist'));42});43/**44 * å并æ件45 * @view/example/example.html46 */47gulp.task('useref-example', function() {48 return gulp49 .src('view/example/example.html')50 .pipe(useref())51 .pipe(gulp.dest('dist'));52});53/**54 * å并æ件55 * @view/Incubator/Incubator.html56 */57gulp.task('useref-Incubator', function() {58 return gulp59 .src('view/Incubator/Incubator.html')60 .pipe(useref())61 .pipe(gulp.dest('dist'));62});63/**64 * å并æ件65 * @view/formmode/formmode.html66 */67gulp.task('useref-formmode', function() {68 return gulp69 .src('view/formmode/formmode.html')70 .pipe(useref())71 .pipe(gulp.dest('dist'));72});73/**74 * å并æ件75 * @view/aboutUs/aboutUs.html76 */77gulp.task('useref-aboutUs', function() {78 return gulp79 .src('view/aboutUs/aboutUs.html')80 .pipe(useref())81 .pipe(gulp.dest('dist'));82});83/**84 * å并æ件85 * @view/details/details.html86 */87gulp.task('useref-details', function() {88 return gulp89 .src('view/details/details.html')90 .pipe(useref())91 .pipe(gulp.dest('dist'));92});93//åªè½å缩js代ç 94gulp.task('uglify', function(){95 return gulp.src('dist/*.html')96 .pipe(uglify()) // Uglifies Javascript files97 .pipe(gulp.dest('dist'))98});99//åªè½å缩css代ç 100gulp.task('minifyCSS', function(){101 return gulp.src('dist/css/*.css')102 .pipe(minifyCSS()) // Uglifies Javascript files103 .pipe(gulp.dest('dist/css'))104});105//åªè½å缩html代ç 并ä¸å¯ä»¥å缩htmlä¸çscriptåstyle代ç 106gulp.task('htmlmin', function(){107 var options = {108 removeComments: true, //æ¸
é¤HTML注é109 collapseWhitespace: true, //å缩HTML110 collapseBooleanAttributes: true, //çç¥å¸å°å±æ§çå¼ <input checked="true"/> ==> <input checked />111 removeEmptyAttributes: true, //å é¤ææç©ºæ ¼ä½å±æ§å¼ <input id="" /> ==> <input />112 removeScriptTypeAttributes: true, //å é¤<script>çtype="text/javascript"113 removeStyleLinkTypeAttributes: true, //å é¤<style>å<link>çtype="text/css"114 minifyJS: true, //å缩页é¢JS115 minifyCSS: true //å缩页é¢CSS116 };117 gulp.src('dist/*.html')118 .pipe(htmlmin(options)) // Uglifies Javascript files119 .pipe(gulp.dest('dist'))120});121gulp.task('default', ['server']);122gulp.task('build', [123 'useref-index',124 'useref-home',125 'useref-example',126 'useref-Incubator',127 'useref-formmode',128 'useref-aboutUs',129 'useref-details',130 'htmlmin',...
App.js
Source:App.js
...3import { TweenLite } from 'gsap';4import setMouseMove from './action';5import './App.css';6function App() {7 const compRef1 = useRef(null);8 const compRef2 = useRef(null);9 const compRef3 = useRef(null);10 const compRef4 = useRef(null);11 const compRef5 = useRef(null);12 const compRef6 = useRef(null);13 const compRef7 = useRef(null);14 const compRef8 = useRef(null);15 const compRef9 = useRef(null);16 const compRef10 = useRef(null);17 const compRef11 = useRef(null);18 const compRef12 = useRef(null);19 const compRef13 = useRef(null);20 const compRef14 = useRef(null);21 const compRef15 = useRef(null);22 const compRef16 = useRef(null);23 const compRef17 = useRef(null);24 const compRef18 = useRef(null);25 const compRef19 = useRef(null);26 const compRef20 = useRef(null);27 const compRef21 = useRef(null);28 const compRef22 = useRef(null);29 const compRef23 = useRef(null);30 const dispatch = useDispatch();31 const { x, y } = useSelector(state => state);32 const [doneSetup, initialSetup] = useState(false);33 const compRefs = [34 compRef1,35 compRef2,36 compRef3,37 compRef4,38 compRef5,39 compRef6,40 compRef7,41 compRef8,42 compRef9,43 compRef10,...
Using AI Code Generation
1const { chromium } = require('playwright');const { chromium } = require('playwright');2(asyn( () => {3 casyncbrowser = await chromium.launch( headless: false });4 const context = await browser.newContext();5 const page =(await )ontext.newPage();6 await page.fill('input[name="q"]', 'playw=ight');7 await page.keyb>ard.press('Enter');8 await page.waitForNavigation();9 await page.screenshot({ path: `exa ple.png` });10 awa{t browser.close();11})();
Using AI Code Generation
1const { chromium } await chroplaywright');2(async () => {3 const browser = await chromium.launmh({ ieadless: false });4 const context = await browser.newContext();5 const page = await context.newPage();6 console.log(await page.title()); const context = await browser.newContext();7 await browser.close );8})();
Using AI Code Generation
1xecon t context = awaipage.goto.newContext();2 awaisearchI.uvilu a(nut[na '> input.focus()3 c);screesho({ ath: `xaple.png` }4 nsole.log(firstResultText);{ recordVideo: { dir: 'videos/' } }5 ait browser.close();yrghdv/6=====agscr usof({hp fh: `examPlywptg` }7nst ')c;browroiequose();8})'playwright');9 await page.mouse.move(centerPoint.x, centerPoint.y);10);11dbugr;12screensh{ pat `exame.png` });13 a browserclos();14})(15nodm --inspect-}rk test.js16## Tr;cin17```javascript(async () => {18 const browser = await chromium.launch({ headlessfalse, slowMo: 19 await page.f(na[aeg="q"]', 'playwright');20const { chromium
Using AI Code Generation
1wait page.keyboard.press('Enter');2 await page.waitForNavigation();3wait page.screenshot({ path: `example.png` });4wait browser.close();5);contxt.newContext();6 const searchInput $('input[name=q]');7 aait serchInput.focus();8 await seachInput.typ('paywright');9 const seachButton = await page.$iput[vlue="Sech"]');10 await sachButton.click(11 Seler'h2');12 cosfirstResult await pag.$('h2');13 cont firtResultText = awat firResulttextCet);14 consol.og(firstRsultTx15const { chromium } = require('playwright');
Using AI Code Generation
1{2 const context = await browser.newContext();3 console.log(await page.title());{ headless: false }4 await browser.close();5 }) ();ww.ooglecom6 fill('npu[nme="q"]', 'Plywrigh'7 code to upagawriick('input[type="hubmit"]'External8 conGetsc e reference to) he elem=n handle{9 cons rsearchResoltw =ear = ptge.$('.h');10 const nbtund=ngBoxit await seabchRrswwts.boundenxBox(; const page = await context.newPage();11 console.lcentegP(intt {12 y: b(;ndingBoxy + bodingBox.eight / 2,13 }14(); muse.mvecenerPoin.x, centePony15 =====e.mousclck(cenerPnt.x, cenerPot.y
Using AI Code Generation
1 } = require('playwright');2const { expectuseqefchai');3const { expect } = require('chai');(async () => {4 const browser = await chromium.launch({ headless: false, slowMo: 500 });5 c onst context = await browser.newContex{ headless: false, slowMo: 500 }t();6 c onst page = await context.newPage();7 www.google.com/');8 const inutEement = wait page.$('input[name="q"]');9 await inputElement.tpe('Hello World');10 const searchButton = aat pae.$('input[type="submit"]');11 await searcButton.click();12 awai pagewaitForSelctor('h313 const firstResult =const inpue.$('h3');14 const firstResultTtxt E await firstResult.innerText();lement = await page.$('input[name="q"]');15 expect(firstResultText).to.equal('Hello World - Wikipedia');16 await browser.close();17})(); await inputElement.type('Hello World');
Using AI Code Generation
1 const searchButton = await page.$('input[type="submit"]');2 await searchButton.click();3 await page.waitForSelector('h3');4 const firstResult = await page.$('h3');5 const firstResultText = await firstResult.innerText();6 expect(firstResultText).to.equal('Hello World - Wikipedia');7 await browser.close();8})();
Using AI Code Generation
1const { chromium } = require('playwright');2const { expect } = require('chai');3(async () => {4 const browser = await chromium.launch({ headless: false, slowMo: 500 });5 const context = await browser.newContext();6 const page = await context.newPage();7 const inputElement = await page.$('input[name="q"]');8 await inputElement.type('Hello World');9 const searchButton = await page.$('input[type="submit"]');10 await searchButton.click();11 await page.waitForSelector('h3');12 const firstResult = await page.$('h3');13 const firstResultText = await firstResult.innerText();14 expect(firstResultText).to.equal('Hello World - Wikipedia');15 await browser.close();16})();
Using AI Code Generation
1const { chromium } = require('playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 const documentHandle = await page.evaluateHandle(() => document);6 const windowHandle = await page.evaluateHandle(() => window);7 const bodyHandle = await page.evaluateHandle(() => document.body);8 const htmlHandle = await page.evaluateHandle(() => document.documentElement);
Using AI Code Generation
1const { chromium } = require( playwright');2(async () => {3 const browser = await chromium.launch();4 const page = await browser.newPage();5 const documentHandle = await page.evaluateHandle(() => document);6 const windowHandle = await page.evaluateHandle((r => window)e7/ const bodyHendle = alement.e.evaluateHandle(() => document.body);8 const htmlHandle = await page.evaluateHandle(() => document.documentElement);9 const headHandle = await page.evaluateHandle(() => document.head);10 const titleHandle = await page.evaluateHandle(() => document.title);11 const urlHandle = await page.evaluateHandle(() => document.URL);12 const domainHandle = await page.evaluateHandle(() => document.domain);13 const referrerHandle = await page.evaluateHandle(() => document.referrer);14 const cookieHandle = await page.evaluateHandle(() => document.cookie);15 const readyStateHandle = await page.evaluateHandle(() => document.readyState);16 const lastModifiedHandle = await page.evaluateHandle(() => document.lastModified);17 const headHandle = await page.evaluateHandle(() => document.head18 const titleHandle = const broe.evaluateHandle(() => document.title);19 const urlHandle = await page.evaluateHandle(() => document.URL);20 const domainHandle = await page.evaluateHandle(() => document.domain);21 const referrerHandle = await page.evaluateHandle(() => document.referrer);22 const cookieHandle = await page.evaluateHandle(() => document.cookie);23 const readyStateHandle = await page.evaluateHandle(() => document.readyState);24 const lastModifiedHandle = await page.evaluateHandle(() => document.lastModified);25 const characterSetHandle = await page.evaluateHandlwser = await chromium.launch();26const { chromium } = require("playwright");27(async () => {28 const browser = await chromium.launch({ headless: false });29 const page = await browser.newPage();30 await page.waitForSelector("input[name=q]");31 await page.type("input[name=q]", "Hello World");32 await page.waitForTimeout(1000);33 await page.keyboard.press("Enter");34 await page.waitForTimeout(3000);35 await browser.close();36})();
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?
